Tuesday Jul 08, 2008

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.

About

mduigou

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today