SVG -- Something Very Good, or a flash in the pan?

by Thomas Powell

January 29, 2001 —

Every few years pundits cry, "Bitmaps are bad! Vectors are better!" The newest hope for vector victory is Scalable Vector Graphics (SVG), a W3C-endorsed XML-based language for vector graphics. SVG is getting a push from some of the leading names in the graphics community, including Adobe and even Macromedia, whose Flash product could be seen as a competitor.

What causes vector mania? Vector-based images are scalable and have small file sizes -- two improvements over standard bitmapped image formats like GIF and JPEG.

Vector images save storage space by using a format that describes an image as a collection of geometric objects -- such as lines, circles, and letter shapes -- with textures and fills. It is much easier to tell a browser to draw a red circle with a radius of 100 pixels at coordinate 200,200 than it is to describe each dot that makes up the circle individually, as you would do in a bitmap.

Consider, for example, the SVG markup shown here, which describes some text over a circle.


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

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

 "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303

stylable.dtd">

<svg width="400" height="400">

 <desc>A circle with some text over it</desc>

 <g>

   <circle style="fill: blue; stroke: black" cx="200"

cy="200" r="100"/>

  <text style="font-size:128; fill: yellow; stroke: green"
 x="60" y="200">SVG</text>

 </g>

</svg>

You could type this mark-up in using a standard text editor, call it circle.svg, and view it using a browser that is SVG-aware. No browsers currently ship with native SVG support, but you can download a viewer from Adobe. If you're in a hurry, you can take a look at a screen snap of what this code displays here.

Vector images are rendered or literally drawn locally by a viewing application. There are pros and cons to this method. Because of the toll they place on local resources, vector graphics are often limited to simple shapes and text rather than complex photo-realistic imagery, which requires significant rendering time. There's little point to saving bandwidth with smaller files and squandering it in greater local rendering time. Slow rendering is what did in VRML, the hot vector technology of a few years ago. Texture mapping and other tricks help to alleviate this problem, but too many tricks send you right back to bitmaps again.

Despite the occasionally cartoony graphics they produce, vector languages are very useful. They make it easy to scale simple images up and down and move them around. Notice how successfully Macromedia's Flash has been used in marketing and entertainment sites. Today you can use Flash to create complex cartoons with fairly minimal bandwidth requirements.

Given that Flash is well entrenched in the minds of graphic artists, is there any room for SVG? Possibly. It's an open language composed of simple XML-based elements, and that makes it easy to author documents both by hand and programmatically. Furthermore, SVG is well positioned to integrate with other Web technologies such as Cascading Style Sheets and the Document Object Model.

However, don't jump on the SVG bandwagon too quickly. SVG has serious competition from Flash, the reigning heavyweight in the Web vector community, and from other alternatives waiting in the wings with existing native support in Internet Explorer, such as Vector Markup Language. SVG will have a hard time knocking Flash out, since many of SVG's supposedly new benefits are already available from Flash. In fact, Macromedia has promoted Flash as an open standard, and many tools already export directly to Flash's SWF file format. Finally, despite the fact that Flash documents are binaries, it's possible to generate them dynamically using products like Macromedia Generator.

Like many XML technologies, SVG could be incredibly useful, since it is easy to manipulate and integrate into the emerging XML-oriented Web architecture. However, Flash currently has the highest mindshare among artists who produce this type of content. If SVG tools for artists appear and browsers offer native support for the format, SVG has a shot at success. Until then, my money's on Flash, since even nonartistic types like me can already make cool Website effects in Flash using tools like SwiSH, Swift 3D, and LiveMotion without the hassle of tagging.

ITworld.com