In and Out of SVG

SVG

Preamble

I have been looking at SVG for some time now. Why? Because it is an open (non-proprietary) format and because it is a W3C recommendation. I like to use open standards as much as possible in my work (and would like everyone else to do the same) so SVG has always looked attractive compared to the likes of Adobe Flash and the emerging <canvas> element of HTML5. Best of all, SVG has inherent the means to be made accessible.

SVG forms the core of some visualisation tools that I am producing for a client for their Tribal Tool-Kit. The work in which I am engaged at the moment has raised some issues. This article describes those issues and how I am addressing them and constitutes "stuff I wish I had known when I started" as well as an aide-memoire for the next time I come across them. Hopefully others will benefit from this and not have to spend quite so many hours staring at Google as I did.

SVG Not The End Format

Whilst I would love to be able to render data as SVG and leave it at that, there are reasons why this cannot always be so. There's a little graphic on this page that says "SVG". It's not an SVG file though, it's a PNG. (I created it as SVG – the original is here.) Why is this? Because Internet Explorer, almost alone of modern web browsers, does not support SVG. Developers Brad Neuberg (Google Inc.) et al are working on svgweb, in an attempt to rectify this situation. However, as svgweb is only in the alpha stage of development and because I am wary of being an early-adopter (especially when my clients are concerned,) I will continue to convert SVG for the web to PNG.

My current project has PDF as an end-format.  Rather conveniently, SVG can be converted to both PNG and PDF using the same tool, rasterizer, which comes as part of the Apache Batik toolkit.  I should note at this point that the export tools that I am discussing need to run on a web server; they are not desktop applications. (They can, however, be run from a command prompt. I work on Linux, but the majority of the tools that I am discussing are available cross-platform.)

Converting an SVG file to PNG is as simple as installing Batik and running:

rasterizer foo.svg

…to produce foo.png. To convert to PDF, we need to do a bit more typing:

rasterizer -m application/pdf foo.svg

…to produce foo.pdf.

Easy, isn't it?  The current project, however, produces 7 SVG files but requires 1 PDF document as the end product.  I thought that this might complicate matters but thanks to a nice little application called pdftk, all we need to do is to convert the 7 SVG files to PDF (I'll call these doc1.pdf … doc7.pdf) and then run:

pdftk doc1.pdf doc2.pdf doc3.pdf doc4.pdf doc5.pdf doc6.pdf doc7.pdf cat output mydoc.pdf

…where mydoc.pdf is a concatenation of doc1.pdf … doc7.pdf.

Caveat

This may sound easy – and it is. The caveat, however, is the fact that it isn't necessarily quick.  If you are rasterizing SVG on a a web server, assume that this process will have to run asynchronously and notify the end user that they may have to wait a bit.

Oh, and if anyone feels that there is something wrong about creating PDFs with a tool called 'rasterizer' when PDF isn't a raster format, yes, it's weird. Ignore it; it's just a name.

The Branding Problem

The PDF document that I am creating from that bunch of SVG files is a report. It needs to be branded with logos. Fair enough. You just go to the graphic designer that created the logos and ask for them in SVG format. Possible, if they were created with the likes of Adobe Illustrator. More likely, this is not the case.  Odds are that you will end up with a raster format such as TIFF or – if you are especially lucky – with encapsulated PostScript (EPS.)  Let's deal with the raster formats first.

We can put an external image into our SVG easily enough:

<image xlink:href="http://www.smiffysplace.com/img/png.svg"/>

If we were odd enough to want to put a rasterization of an SVG file into another SVG file, that is.

When rendered, this all looks OK – until we try zooming in on the image. Those parts that are pure SVG will scale and scale and scale – and still be as sharp as at 1:1 magnification. The raster graphics, however, will become horribly pixellated and very 8-bit looking. (That's a joke for those who used to have Sinclair, Commodore, Atari and the like home computers.)

If there is no choice but to use raster graphics, the trick is to start with an image larger than you require and scale it down using the width and height attributes of the image element.  Doing this means that you should not start to see pixelisation until you have zoomed past the original size of the raster graphic.  For example, if the raster graphic is 200×200 pixels and we size it to 50×50 pixels in the SVG, it should look fine until we magnify the SVG beyond 400%.

But we're lucky enough to have EPS. Why's that lucky? What's so great about PostScript? What's good here is that we can convert to SVG without loss. Once we have our logo as SVG, we can just pop it in the <defs></defs> section of our SVG, job done.

To convert EPS to SVG, the first thing we need to do is to download and install the Open Source Desktop Publishing  (DTP) package, Scribus. Then:

  1. Start Scribus.
  2. When a dialogue pops up, select the tab 'Open Existing Document'.
  3. In the file selector, change File type to: PostScript(*.ps *.PS *.eps *.EPS)
  4. Select your EPS file, then OK.
  5. Scribus will prompt you for a file name for its native format. Put in something appropriate or just accept its suggestion.
  6. Remove any unwanted bits in the document now showing.
  7. From the File menu, select Export, then Save Page as SVG.

You will now have an SVG file with your desired logo in it. There's a fair chance that you have a little logo sitting all alone in the corner of a big SVG. If this is the case, change the height, width and viewbox attributes of the SVG element to suit. Tip: if you don't know what size to use, rasterize the SVG, open the resulting PNG in an image editor such as the GIMP, where you will be able to see/measure the part of the image you want.

Update

I thought I had a working TIFF to SVG technique, which I posted here briefly, which used Open Office Draw as a step to creating an EPS. However, whilst this appeared to work, I found that the SVG file created had an embedded PNG of the original image in it! I will continue my research and post any updates here.

Notable Mention

There is one Open Source SVG tool that I did not use for this project but is worth a mention: Inkscape. I appreciate that not everyone likes to create their SVG by hand, as I do, so Inkscape makes a good tool for an introduction to the wonderful world of vector graphics.

Conclusion

There is generally more than one way to do a job. What I have described in this article is how I export from and import to SVG.  Google Is Your Friend – have a look for alternatives and see what you can learn in the process. (Anyone trying to concatenate PDFs using GhostScript should be warned, however, that it trashes embedded raster graphics.)

Have fun with your SVG!