by Derrick Story
   Other articles in this feature:

XHTML: The Clean Code Solution

Extensible Graphics with SVG

The X-Acronyms

What Does XUL Have to Do With XML?

Here's a problem: Your production team has just learned that your company is launching a new sales and marketing web site for its affiliate brokers to track their individual and collective efforts. Information will be entered daily into a database that's linked to the web site. The production team must find an efficient way to generate charts and graphs from the changing data for the brokers to view.

Wouldn't it be nice if the data could be processed by a script that automatically generated vector-based graphics that downloaded quickly from the web site? As an added benefit, wouldn't it be wonderful to be able to print those same graphics without loss of color or detail, nor displaying those ugly "jaggies" that are often visible in low-resolution bitmap images.

   Smart SVG

SVG graphics are:

• Vector-based and require less bandwidth to deliver on the Web than bitmap graphics such as GIFs and JPEGs.

• An application of XML and have the flexibility of extensible code.

• DOM compliant and are scriptable.

This is exactly the kind of challenge that the members of the W3C SVG (Scalable Vector Graphics) Working Group want to meet. The group is comprised of representatives from Adobe, Apple, Corel, HP, IBM, Macromedia, Microsoft, Netscape, Sun, Xerox and more. Soon, as a result of their efforts, we'll have a standard vector graphics language that enables gradients, embedded fonts, and filter effects that's written in editable XML-based code that's fully scriptable.

What Makes SVG so special?

The beauty of SVG graphics are that they're plain text written in XML. At its most basic level, this text describes the graphic in terms of "X" and "Y" coordinates, height, width, stroke, color, etc. Once the specification is fully adopted by browsers, the SVG code can simply be dropped into your HTML pages and displayed. Currently there are beta plug-ins available to let you see how this works, and I'll explain them in more detail later in the article.

   Here's a taste of SVG Code

The rectangle example below expresses all values in physical units (centimeters, in this case). The rect element is filled with yellow and stroked with navy. This code is from the W3C working draft. (Note: Lines of code are broken for display purposes only.)

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//
DTD SVG 20000303 Stylable//EN"

<svg width="12cm" height="4cm">

<desc>Example rect01 - rectangle expressed in physical units</desc>

<rect x="4cm" y="1cm" width="4cm" height="2cm"
style="fill:yellow; stroke:navy; stroke-width:0.1cm" />


rectangle example

Because SVG graphics describe objects in terms of lines and curves, they require much less bandwidth to display than their bitmap counterparts (such as JPEGs and GIFs) that need to account for every pixel in order to render the image. These vector descriptions also allow for "zooming" so that graphics can be magnified without any loss of detail. Some of this functionality is similar to what we see in Flash, but SVG graphics will have even more capability and won't require a plug-in.

Another big advantage of SVG, over GIF for example, is its palette of 16 million colors with support for color profiles (to ensure consistent color rendering across output devices). Plus, these vector graphics also will look just as good coming out of the printer as they do on the screen. You'll never see the "jaggies" as we've experienced before with bitmaps.

One aspect of this format that I'm very excited about is its ability to generate graphics on the fly using a scripting language and a data source. For example, in the scenario I described at the top of the article, let's imagine that your web site was linked to a database that contained daily sales results. Thanks to the XML code that describes SVGs, you could script that data to generate beautiful graphs and charts representing those sales results--automatically. Imagine how this could change the way we communicate information on the Web.

Those that came before it

In 1998 two graphics standards were proposed to the W3C: VML (Vector Markup Language) and PGML (Precision Graphics Markup Language). Both of these languages are applications of XML and use CSS style attributes.

VML never became a W3C recommendation despite strong support from Microsoft and others. The only current browser that can render VML graphics is Internet Explorer 5 for Windows. Microsoft still maintains a VML web page on its MSDN site.

PGML, on the other had was developed by Adobe and backed by IBM and Sun as a vector graphics language more suited to the professional design and publishing communities. The W3C looked carefully at the PGML and the VML proposals and did what seemed to be the logical step: it took the best from both and create a new proposal labeled SVG, which is backed by both the PGML and VML camps.

If you're interested in learning more about the similarities between VML and PGML, you might want to check out the article, VML/PGML Head-to-Head Comparison in the archives.

   SVG Tools

You can start creating SVG graphics right now. Here are a few resources for tools:

Adobe Illustrator Plug-In for version 8.0.1 and higher allows you to create artwork in Illustrator and export it as SVG. For Mac and Windows platforms.

Mayura Draw is a Windows drawing program that now supports SVG export.

CorelDRAW beta SVG export filter for the Windows platform.

XML flexibility in graphics

The joy of XML-based languages is that they separate content from presentation. This is much different than HTML code, which although intended for structural markup, can be used also for display. XML code, on the other hand, can be the basis for display, or it can be used as data for another application.

This XML genealogy elevates the functionality of web graphics to a new level. The text within an SVG graphic can be in any XML namespace suitable to the application. This means that SVG graphics themselves have the same searchability and accessibility as other XML-based documents. This opens up a whole new realm for the use of graphics on the Web.

SVG has full DOM support

Because SVG conforms to the Document Object Model standard, SVG graphics are scriptable. This allows for user interaction with the images, changing the graphic itself or triggering changes to other objects on the same page. Functions such as onmouseover,onmouseout, onload, and onfocus can be used with SVG files.

Where does SVG stand now?

The eighth working draft of SVG has been released and it has entered as second last call. That means it could become a recommendation before the end of 2000. A good place to keep up with SVG activity is on the W3C Overview page.

Since SVG is backward compatible in the sense that you will be able to add the equivalent of ALT text for a vector graphic allowing older browsers to display a GIF or JPEG instead, the sooner the standard is released, the better.

Viewing SVG now

Currently no browser can render SVG graphics, but Adobe has released a couple of beta plug-ins for Macs and PCs that work pretty well. The plug-ins are available through Adobe's Scalable Vector Graphics page.

I've tested the plug-ins on both a Mac and a Windows PC, and had the best results using Netscape 4.7 on the Mac platform and Internet Explorer 5.0 on Windows. Playing with the graphics reminds me of the early days of learning HTML. I'd see how a graphic displays in the browser, then I'd look at the code to dissect its construction. Very cool.

IBM has also released an SVG viewer for the Windows platform that can be downloaded from their alphaWorks page. Csiro has also just released a SVG Toolkit that contains a viewer and a utility for rendering an SVG document into various image formats. It's written in Java and requires Java 1.2 or higher. The toolkit is Open Source and based on the BSD license.

If you want to read the current working draft, go to the SVG 1.0 Specification page. In the meantime, you might want to start thinking about applying SVG graphics to your upcoming web projects. We'll be publishing more information of this format to help you prepare for this important change in how we handle graphics on the Web.

Derrick Story is the author of The Photoshop CS4 Companion for Photographers, The Digital Photography Companion, and Digital Photography Hacks, and coauthor of iPhoto: The Missing Manual, with David Pogue. You can follow him on Twitter or visit

Discuss this article in the O'Reilly Network General Forum.

Return to the O'Reilly Network Hub.