Imagine creating one graphic and having it look great on all screen. Scalable Vector Graphics (SVG) offer a bright future for graphics which render smoothly at any resolution and play nicely with other XML document types.

With new electronics products being launched everyday, there is a huge number of different display sizes and types. Mobile phones typically have screens which are 1.5 inches in size, while TVs vary from 14 to 72 inches. Computer screens may be 12 inches in the case of a smaller laptop or 30 inches for a large display. An added complication is the resolution of the display, one 14 inch display might have a much higher resolution than another display if it is a High Definition (HD) display. These problems presents several difficulties for the interface designer who wants his work, particularly that on the internet, to look similar on all screens.

Wouldn't it be nice to have a way where by you can create a web-page once and have it render crystal clear on every display

Wouldn't it be nice to have a way where by you can create a web-page once and have it render crystal clear on every display, no matter the size or resolution? Standard graphic formats use pixels to generate the image - one image maybe made of many millions of pixels each with its own colour information. The problem with this is that while the image might look great on your camera phone's display, if you print it out on A3 paper you will easily be able to make out each individual pixel. So how can we describe graphics without using pixels? Mathematics of course!

Imagine a circle with a radius of three units, a line width of one unit and a line colour of blue. Noting that information in text (or any-other) form, we can draw that circle on any screen of any size. The circle will always be drawn at the native resolution of the screen so it will look like a perfect circle, even if you then transfer it to a different screen. This type of image notation is know as vector graphics. In 2001 the World Wide Web Consortium (W3C - the fine people who are responsible for steering the direction of the web) introduced the Scaleable Vector Graphics (SVG) 1.0 standard which can be used not only to draw shapes and manipulate them, but also to animate an interact with them. This means that an interface designer could create an interface for a TV which would work perfectly on both hand-held TV and a 72 inch plasma display.

That was five years ago and many web designers still haven't heard of SVG never-mind use it. Of course many designer do use vector graphics, and have done for many years, in the form of Macromedia's Flash (now Adobe's), which describes its graphics in terms of mathematics and allows pixel based images (bitmaps) to be embedded into the file. Although SWF (Flash's file format) is an open standard, there are two main areas where SVG trumps Flash: an SVG image is described by an XML document, and SVG can interact directly with other XML name spaces, particularly XHTML. What this means is that in the first place is that a simple XML document with all the advantages of easy transportability and device independence are available, and secondly the SVG images can interact with the XHTML elements on the page (for example you might have an XHTML table inside an SVG circle - for whatever reason). The flexibility this offers cannot be ignored.

It takes a long time for new standards to take hold on the web, and SVG is no exception,

when there is already another vector format available. However, the tools are now becoming available to generate SVG images just as you would another other:

As the tools become available for people to create SVG content, so web browsers change to be able to display the new format. This is where the main slow down comes on the internet. Generally people do not upgrade their web-browser very often. Usually only when they change their computer or install a new operating system. Browser programmers are also usually quite slow in incorporating new standards not wanting to spend the time and effort in incorporating the standard if no one is going to use it. Adobe where one of the first to offer SVG support for the mass market with its SVG Viewer plug-in. At the time Adobe and Macromedia were big rivals and Adobe must have seen SVG as a way of countering Flash. Of course now Adobe and Macromedia are one and the Adobe SVG Viewer hasn't seen an update in a long time, and nor is it likely to soon. However, the Adobe plug-in provided enough traction for others to take a serious interest. Now we have several browsers offering several levels of support:

  • Firefox 1.5 - The Mozilla browser offers partial SVG support, mainly basic drawing of images
  • Opera 9 Technical Preview - Opera offers the most complete support for browser native SVG display at the moment, although it is still missing foreignObject support to display non-SVG elements inside SVG. Hopefully the Opera team will manage to fix this before Opera 9 is released
  • Safari - SVG has now been available in the Safari nightly builds for a while and they are making good progress. They have support for many of the more advanced SVG filters (blur etc) and foreignObject support, but not animation yet.
  • Several others: More are available here

web-developers will be able to start using it in earnest will be when Internet Explorer supports SVG natively

The point when SVG will be truly accepted and web-developers will be able to start using it in earnest will be when Internet Explorer supports SVG natively. However that day might be a long way off as Microsoft have announced their own vector graphics format, Sparkle, which will be in Windows Vista, and they will no doubt push that over SVG. Indeed there is no sign of SVG support in IE7.

Traction is slowly being gained by the SVG community and as the three browsers after IE approach the working standard this traction will only grow. For myself, while I would dearly like to use SVG in a large project, I will only use it in personal projects for the moment until the browser support improves. The world where size doesn't matter is slowing coming into view.

External resources:

Elsewhere on the web