Scalable Vector Graphics (SVG)

SVG is a markup language for 2-dimensonal vector graphics. SVG has been around a few years (it became a W3C recommendation in 2001), but has been slow to gather momentum, mostly because of competing standards and the dominance of Macromedia Flash (the SWF format) for delivering web-based vector graphics.

What does SVG have going against it?

• Macromedia Flash can do pretty much anything SVG can do (and more), and Flash is installed on almost all web browsers.
• SVG is still not supported on Mozilla/Firefox! (Though Firefox 1.1 is supposed to offer partial native SVG support)

What does the SVG standard have going for it?

• It is the W3C recommendation for web-based vector graphics
• SWF (the Flash format) is not XML, so is less attractive to developers
• Abode recently acquired Macromedia, and SVG has been heavily promoted by Adobe

Should I use SVG?

If you want to distribute your vector graphics far and wide, then the answer is "no", or rather, "not yet." SVG will not display on all web browsers currently.

IE will display SVG if the Adobe SVG plugin is installed (http://www.adobe.com/svg/viewer/install/). Mozilla/Firefox has a built-in viewer, which will be part of Firefox 1.1 (which is scheduled for release in 2005).

If you want to develop specific applications and can control the web browser that users will use, then SVG might work for you. Again, what is attractive about SVG is that it is standards-based.

Sample applications

• See some local demos (NOTE: you will need an SVG-enabled browser to do this)
• An example of a transformation: XML data file - XSL file
• Chemical Markup Language Viewer: http://www.xml-cml.org/jumbo3/jumbo3-JS/

For more info

• Adobe's SVG tutorials: http://www.adobe.com/svg/basics/intro.html
• Another SVG tutorial: http://www.w3schools.com/svg/

Explore

Make an SVG diagram using the basic SVG shapes and apply styles to them. For advanced users: use an XSLT transformation to generate an SVG (the oXygen XML editor will display SVG: select Tools >> SVG Viewer then browse to the SVG file).