Optimizing Inkscape SVG size for the Web

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:

Your browser does not support SVG! Too bad.

SVG Open 2010

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.
  • Most TV set-top boxes use SVG for their displays.
  • Look for cool SVG demos at SVG-Wow.org.

Here we go again…

It’s been more than two years since I last attempted to blog… and I never made the blog public. After attending SVG Open 2010 and a couple days of the SVG working group meetings, I find I that I have quite a few topics to blog about. So here we go again…

Book update is finished.

The 2nd edition of my guide to Inkscape is finished! Yeh! It has been a busy week with many corrections from the editor and from Loïc Guégant who, while translating the book into French, is checking everything I wrote! I thought I was done Thursday, but the editor had given me some wrong information and I had to quickly change some things on the copyright page like the ISBN numbers. As it takes an hour to generate the book through xsltproc and fop, I just regenerated the beginning and then used pdftk to substitute the corrected page. pdftk is a great tool! Unfortunately it isn’t included in Fedora 8 or 9 due to some confusion about licensing. I found a note on the web that you could use the Fedora 7 src and rebuild the RPM. That worked. However, it takes forever and a day to do the regeneration.

Fedora 9 on a Dell Inspiron 9200 Notebook

I’ve used Fedora since the beginning and Red Hat before that but the upgrade of my laptop to Fedora 9 has been one of the most frustrating. I guess I had gotten soft with the easy upgrades through Fedora 4, 5, 6, and 7 (skipped ‘8’) and I was lead astray by the easy install on my wife’s Inspiron E1505. The problems started with the initial installation. The installation would crash with a “this is probably a bug, please file a report” message. After doing a little Googling, I found a few others that had similar problems (medium checks OK, works on other computers). Following one suggestion, I did a minimum install. That worked. Of course, I am left with the problem of figuring out which crucial packages I am missing. (And the Add/Remove Software program is not very useful.) The next problem encountered is that my Dual Head setup didn’t work. And even worse, my 1920×1200 notebook screen came up with an incorrect resolution, leaving my panels corrupted (e.g. although displayed, I couldn’t access the System menu). After much Googling I figured out that I could modify the configuration with xrandr and that my old setup with two separate desktops was no longer supported with the radeon driver and X1.3 (oh, and fglrx doesn’t work with Fedora 9 yet). I have finally gotten a working desktop but losing the separate desktops is going to be a problem. I have my external monitor on the left which means that screen postion 0, 0 is now on that monitor. If I use my laptop without the external screen, 0, 0 will be at the left of the internal screen which means that all the icons on the desktop as well as default window positions will be shifted. A further annoyance is that Evolution in F9 seems to have problems when logging off and back on if it is not closed first. It comes back up with an error messages about protecting the user by messing up what panes are being viewed. Argh!

Inkscape Printing

Printing in Inkscape is not a pretty picture. There are two main ways to produce PostScript or PDF files. The first is with the “Save As” dialog and the second is with the “Print” dialog. The two ways use different routines! Then within the “Save As” dialog, one can choose two different routines for PostScript output (via Cairo or via an internal routine) and in the “Print” dialog one can chose between Vector and Raster output. The only method that handles Patterns, Clipping, and Masking correctly is printing with rasterized output… but the quality is limited to 72 dpi (despite an entry box for setting dpi). There is support for Patterns, Clipping, and Masking in the Vector code but it doesn’t work correctly. I’ve looked at patterns briefly in the “Print” dialog Vector output. It appears that an extra transformation is being made. Removing this transformation produces correct output for simple test cases. I’ll need to come up with more complicated tests to check it fully. There is also a very confusing code that tries to align patterns to a grid. Why this is necessary with vector output (or even with raster output) is a mystery to me.

A new beginning…

I was blogging in the mid 1990’s. Of course, I didn’t know I was blogging then as the word hadn’t been invented yet. My blogging was done by editting HTML files directly. After five or six years of blogging, I changed jobs and that was the end of that blog. I’ve attempted to start blogging again using modern tools like WordPress a few times but always had some problem in getting it to work. It looks like I’ve got it going this time so here we go…