I Want My SVG

I recently upgraded to Firefox 3.0 and have been making heavy use of the much improved whole page magnification. This feature, like the magnification in Internet Explorer, allows you to magnify the entire web page. For the most part the feature works great. There are still some pages, mostly flash content, which ignore the magnification setting (Cartoon Network ADULTSWIM most annoyingly).

I am finding that I generally magnify whatever pages I am reading to use the whole width of my monitor. For sites at already use my whole monitor width (thank you) I view at typically 200-250% of the "normal" size. It's not that I can't read the content at the default size (middle age presbyopia doesn't exist. I swear it.), but it's a lot more comfortable to view at a meter reading distance on a 24 inch monitor when magnified.

When you magnify a web page both Firefox and IE scale the fonts smoothly as well as any graphical elements. Graphical elements like borders, colour regions and text boxes are smoothly drawn in the expanded size. The only elements which don't scale smoothly are bitmap graphics. Firefox uses fancy bicubic image scaling from Cairo to enlarge graphics. IE 7 uses crappy pixel doubling. IE 8 will use bicubic scaling. Even bicubic scaling is inadequate though as images and graphical elements quickly look blocky. The appearance of the images is also altered subtly as it appears that none of the current image scaling adjusts the image gamma.

Many of the bitmaps used on the web are used for graphical elements--borders, logos, buttons, icons. Because they are generally very small, less than 25 pixels in at least one dimension, they look really bad when scaled to two or three times their normal size. I've been really been getting used to the pretty scalable SVG icons used by Gnome and the increasing amount of scalable user interface they are incorporating. From what I understand Apple's Leopard MacOS X also incorporates a lot more scalable user interface content and future releases will be entirely non-pixel dimension based. This is a huge improvement and one I really support. I'd really like a user interface that draws identically on a 17" monitor whether it's 72 DPI or 200 DPI. Of course the 200 DPI version would look better but the size and position of all of the elements should be identical. Hopefully monitors will eventually behave like printers--I expect a page of output to look essentially the same no matter what printer I use.

With desktop user interfaces moving in the direction of full scalability web pages are starting to look noticeably inferior. This is mostly due to the need to use bitmaps for graphical elements and the poor scaling of bitmaps. The standard for resolution independent graphics content on the web is Scalable Vector Graphics (SVG). SVG, at least basic SVG, is supported by Firefox, Opera and Safari. That other browser with 80%+ market share doesn't support SVG at all and won't support it even in their next major version.

Unfortunately this means that unless web developers use browser sniffing and differentiated content we will probably all be seeing lots of crappy scaled bitmaps for at least 5 years. Web pages are going to continue to look a lot less pretty than desktop applications for the foreseeable future.


IE indeed sucks majorly. And its marketshare isn't going down fast enough. If you're the content developer there are many libraries for working around the problem of IE not natively supporting SVG. If you're not the developer but just the consumer of the content it becomes more tricky but there's still Batik and several plug-ins (Adobe, Renesis, etc.) Can you put an IE-plugin wrapper around Batik maybe?

Posted by stelt on July 08, 2008 at 05:41 AM PDT #

FYI - all browsers except IE now support a very decent amount of SVG. Furthermore, the html:object can support 'fallback' content for those browsers that don't support the SVG format. So actually no browser sniffing need be used. You can see the clip art or icon menu on my site for a working exmaple (compare IE vs Firefox vs Opera vs Safari).

Posted by Jeff Schiller on July 08, 2008 at 05:42 AM PDT #

Post a Comment:
Comments are closed for this entry.



« June 2016