During lunch one day at the latest SVG working group meeting, I had a discussion with Doug Schepers about Inkscape’s use for creating Wikipedia graphics. Doug says it stinks and pointed me to a talk at SVG Open 2009 by Brion Vibber who discussed how even gzipped SVG files were much bigger than PNGs. The worse category for “bloat” is flags where an SVG file is on average 18 times bigger than the equivalent PNG. Now this may not sound important to you and me but to somebody serving up zillions of graphics it cost real money.
Today I came across a graphic of a clock escapement. In the “talk page” for the article on Robert Hooke, graphic file size is briefly discussed. The page gives the size of various versions of the graphic but it’s a bit hard to figure out what exactly they mean. Here is a short summary:
I set about to see how I could reduce the SVG file size. The source shows that the SVG was created with Inkscape version 0.43. In the latest version, 0.48, there are a couple of tools to reduce file size. My first attempt at file size reduction was to save the file as “plain” SVG. This reduced the file size from 35755 bits to 28560 bits. This is done by mostly stripping out things in the Sodipodi and Inkscape namespaces. In recent versions of Inkscape, there is an “Optimized” SVG option. Trying this, with the default settings, I obtained a file size of 17481 bits. By turning on stripping out ID labels and xml prolog, reducing the precision to 3, and not using any indentation, I got a file size of 8366 bits, roughly the same size as the optimized PNG.
But I can do even better. The SVG was made by tracing the original drawing from a book which means that the path preserves all the imperfections from the original. I can redraw the image using a few simple Bézier curves to reduce the number of nodes from the 571 in the original SVG to just 120 nodes. The file size is now 3333 bits. Removing the unused xmlns declarations, metadata, and defs sections yields a file size of 2999 bits. Gzipping the file reduces the file to 1528 bits.
I could now even animate the file and it would still be smaller than the optimized PNG. (Animation is left as an exercise for the reader. I’ve already created an animated SVG gear clock.)
The final SVG drawing:
SVG Open 2010 was held in Paris, and since I live nearby I offered to give a talk about Inkscape. I would like to thank the organizers for waving the conference fee and even providing a ticket for the conference dinner aboard a boat on the Seine.
There were quite a few interesting talks and panels and I learned quite a bit. My overall impression can be summed up easily: SVG has finally arrived. This conclusion was easy to make after talking to the many representatives of the major web browsers, including those from Microsoft who were there in numbers. In case anybody missed the news, IE9 will include comprehensive support for SVG, only missing the filters, SMIL, and SVG fonts modules. Filters will almost certainly appear in IE10; SMIL and fonts might too depending on demand. In case anybody wants to know, it took about 15 developers 15 months to implement SVG support in IE.
A good fraction of the discussion was on how SVG fits into HTML5. HTML5 is not a finished standard and there are still pieces to work out. Microsoft is implementing what it can now and has an important message for users: Download and test the IE9 previews and betas. Complain about any behavior you find wrong or undesirable. You have about three months before IE9 gets locked down. It will be hard to change behavior after that as IE9 is expected to be around for 10 years and future versions of IE will maintain backwards compatibility.
I’m afraid my notes are quite poor so I will just make a list of some random observations:
HTML5 will be everywhere soon. Firefox 4 and IE9 already contain HTML5 parsers, Webkit (Chrome and Safari) and Opera will have them soon (you can use SVG in XHTML right now). All the browsers support some HTML5 features.
There is a huge desire to have CSS3 apply the same way to HTML as to SVG. This includes things like sharing filters.
SVG is very popular in mapping circles (and not just in OpenStreetMap).
Vector effects are very interesting for maps, especially the ability to share partial paths between objects and for creating complex paths for roads, et cetera.
