[IPOL discuss] Vector graphics on IPOL: which format to use?

[Pascal Getreuer]

Dear all,

While most graphics on IPOL are images (i.e., "raster graphics"),
there are certain cases where vector graphics would be useful.  Unlike
pixel-based images, vector graphics are constructed using geometric
primitives and they have basically infinite resolution.  The user is
able to zoom in to any scale on a vector graphic without pixellation.

One case where vector graphics are better than images are for plotting
2D vector fields.  Such a plot shows an array of small arrows where
some functions u(x,y) and v(x,y) give the horizontal and vertical
directions of the arrow at (x,y).  A user visualizing a vector field
probably wants to view the field at a global scale but may also need
to zoom in to see the individual arrows more clearly.  So it is
awkward to render the a vector field as an image: either the image is
too coarse or the image is too big.  A vector graphic does not have
this problem since it can be visualized at any scale.  Contour line
plots are a similar situation.

The question for IPOL is which vector graphics format would be best to
use in the articles and demos?

The most prominent formats for vector graphics are EPS, PDF, and SVG.
I will describe the each by quoting the first paragraph from Wikipedia
and then listing pros and cons for application on IPOL.


=== EPS ===
"Encapsulated PostScript, or EPS, is a DSC-conforming PostScript
document with additional restrictions which is intended to be usable
as a graphics file format. In other words, EPS files are more or less
self-contained, reasonably predictable PostScript documents that
describe an image or drawing and can be placed within another
PostScript document." [1]

Pros
 * Very stable and well-documented format
 * Many drawing programs and tools support EPS
 * Easy to write EPS from a program because it is plain text
Cons
 * Typical Windows computers are not equipped to view EPS (a program
like GhostView needs to be installed)
 * Since it is plain text, files can be large


=== PDF ===
"Portable Document Format (PDF) is an open standard for document
exchange. This file format created by Adobe Systems in 1993 is used
for representing documents in a manner independent of application
software, hardware, and operating systems. Each PDF file encapsulates
a complete description of a fixed-layout flat document, including the
text, fonts, graphics, and other information needed to display it."
[2]

Pros
 * Very stable format
 * Windows can view PDF within a browser with the Adobe Reader web
plugin, support on other platforms is also good
Cons
 * To my knowledge, PDF is difficult to write directly, but EPS can be
converted to PDF via Ghostscript
 * Cannot be embedded into a web page like an image, a PDF file is
viewed as a separate page

=== SVG ===
"Scalable Vector Graphics (SVG) is a family of specifications of an
XML-based file format for describing two-dimensional vector graphics,
both static and dynamic (i.e. interactive or animated)." [3]

Pros
 * Designed especially for the web
 * Easy to write SVG from a program because it is plain text
 * SVG can be embedded in a web page like an image
 * Can be easily compressed with gzip ("SVGZ") to reduce size
 * Some aspects of the SVG format are stable
Cons
 * The format as a whole is not yet stable
 * Many browsers in use have limited support for SVG, or none at
all---SVG is not supported by IE8 and earlier


=== PDF is good ===
I think PDF is a nice solution because many computers are equipped to
view it, especially in the academic world where PDF is a necessity.
On Windows computers, it can be viewed within the browser window.  The
format is standardized and very stable (with the exception of some
extensions that Adobe keeps secret).

It is possible to create PDF from your own programs.  First, make your
program write an EPS file.  There are many tutorials and references on
how to write EPS, see for example
   http://paulbourke.net/dataformats/postscript/
   http://www.tailrecursive.org/postscript/postscript.html

Second, use Ghostscript to convert the EPS to PDF with the command
   gs -dSAFER -q -P- -dCompatibilityLevel=1.4 -dNOPAUSE -dBATCH
   -sDEVICE=pdfwrite -sOutputFile=output.pdf -c .setpdfwrite -f input.eps

I used this process to generate PDFs in my contour stencils demosaicking demo
http://dev.ipol.im/~getreuer/ipol_demo/g_demosaicking_with_contour_stencils/

It is even possible to embed images into the EPS file.  You can see
how I did this in the "DisplayContours" function:
http://www.ipol.im/pub/algo/g_demosaicking_with_contour_stencils/srcdoc/dmcswl1_8c_source.html#l00875


=== SVG? ===
Obviously, SVG would be nicer for the web since it is specifically
designed for that purpose.  The key downside is that only recent
browsers support SVG.  It would be possible detect non-SVG-capable
browsers with JavaScript and then advise those visitors to update
their browser.  Would this be reasonable to do?

Also, robustness and the extent of capabilities is not clear to me,
e.g., whether I can confidently plot with 30k primitives without
crashing the browser.  Does anyone have experience with how current
browsers handle complex SVG images?

You can probably tell that I am more familiar with PDF than SVG, so
due to that bias I am leaning in that direction.  Which format do you
think IPOL should use: SVG or PDF?


[1] http://en.wikipedia.org/wiki/Encapsulated_PostScript
[2] http://en.wikipedia.org/wiki/Portable_Document_Format
[3] http://en.wikipedia.org/wiki/Scalable_Vector_Graphics


Best,
Pascal