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:

• PNG: 558 x 715 px: 44KB
• PNG: as thumbnail: 20 KB
• PNG: 536 x 696 px, optimized: 8KB
• SVG: 11 KB (35 KB as regular file)

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: