SVG Basics

What is SVG?

SVG is short for Scalable Vector Graphics, the open source W3C recommendation for two dimensional vector graphics. SVG is a type of XML (the extensible markup language), so the files are plain text, human-readable and editable in your favorite text editor.

There are software tools which you can use to create SVG's in a graphical environment. These include Adobe Illustrator and the open source program Inkscape. If you prefer to code by hand, then there are many good (and some out of date) tutorials and examples online.

Browser Support

Full browser support for SVG has been slow to develop, although the same could be said of MathML and PNG, both W3C recommendations as well. The best choices for viewing SVG are Opera 9 and Firefox 1.5+, both of which have native (no plug-in required) SVG support with a few limitations (Neither of these supports filters or embedded fonts, and Firefox does not yet support declarative (SMIL) animation).

Internet Explorer users must use the Adobe SVG Viewer (ASV 3.03) plugin.

To see if your browser supports svg, try this sample. If the sample does not work then you must change or update your browser, or else install the Adobe viewer (See the broweser support section for more info)

An Uncertain Future?

Unfortunately (?) for the svg community, Adobe (following their acquisition of Macromedia) announced in September 2006 that they would cease updating or supporting ASV in 2008, and stop offering it for download in January 2009. This was due to the arrival of new browsers with native support, and in order to concentrate their efforts on Flash/Flex (Flex is the new "rich internet application" framework -- akin to Open Laszlo).

It's unclear what the ramifications of Adobe's decision are, but for the near term at least one company (the Renesis Viewer) is working on a replacement plugin. In the long run I expect that some sort of xml based vector graphic format (svg/vml/xaml/??) will be incorporated into Explorer, and I'm hopeful that Microsoft will decide to support SVG.