Vector Graphics Overview

Vector graphics, whether based on proprietary or open standards, describe shapes in terms of drawing instructions. When a vector image is scaled up or down, the shapes can be redrawn and allow the quality of an image to be maintained in a way that is impossible with pixel-based bitmap graphics, without returning to the server to download a different copy of the graphic.

The facility for vector images to be re-drawn on the client side allows for functionality such as animations, and allows for interactivity with responsiveness to the user far better than if it were necessary to return to the server to download a new image. SVG has a Document Object Model (DOM) based on the W3C DOM, but extended to accommodate specific functionality in SVG. This allows us to script SVG documents on the client side using, for example, JavaScript (ECMAScript). Later in the chapter, we will examine some straightforward JavaScript code to manipulate the SVG DOM.

SVG Tools

To make use of SVG, you need two basic tools—a tool to create SVG and a rendering engine (also called a viewer) that will enable you to see the SVG onscreen.

Tools to Create SVG

To create SVG, you can use a simple text editor, an XML-aware editor, or one of the more traditional vector graphics drawing programs such as Corel Draw 10 or Adobe Illustrator 10. One SVG-oriented graphics tool that is of particular interest is Jasc WebDraw, which allows you to create graphics visually, to edit the code within the same program, and also to create SVG animations using a timeline. Further information is available from http://www.jasc.com/products/WebDraw/.

Which tool you use is entirely up to you and might depend on the tools you already have.

Tools to View SVG

Several viewers for SVG are already available, but some, at the time of writing, more fully implement the SVG specification than others.

Probably the most complete implementation, although it still has some gaps, is the Adobe SVG Viewer. We will use Adobe SVG Viewer version 3.0 to view most of the SVG examples in this chapter. To obtain the Adobe SVG Viewer, go to http://www.adobe.com/svg/ and follow the links to the download page.

If you want to program SVG and view your work with Adobe's SVG Viewer, there is also documentation about the SVG Viewer available for download that describes which parts of the SVG specification are already implemented and which have yet to be implemented.

The Adobe SVG Viewer is available for Internet Explorer and Netscape 4 on the PC and the Mac. On the PC, simply double-click on the download, and it will install without further intervention.

The Adobe Viewer currently implements far more of SVG's animation capabilities than any of the other SVG viewers. It also allows extensive scripting of SVG using JavaScript. Because of these capabilities and the ease of installation in many common Web browsers, we will be using Adobe SVG Viewer 3 in most of this chapter.

If you are not using Windows or the Mac, you might want to explore the Batik SVG Viewer, which is part of a Java-based SVG toolkit. For further information, visit http://xml.apache.org/Batik/. Batik is very limited in support for animation or JavaScript.

Adobe has recently issued a beta version of the Adobe SVG Viewer for Linux. Further information is available at http://www.adobe.com/svg/viewer/install/old.html. Look under the “English” heading for Linux versions.

A further option is the X-Smiles browser, which can display several XML technologies including SVG, XSL-FO, XForms, and SMIL. Further details can be obtained from the X-Smiles Web site at http://www.xsmiles.org/. The X-Smiles browser can be downloaded without charge. In a separate download, a range of files using several of the XML technologies just mentioned can be obtained. X-Smiles is very limited in support for animation or JavaScript.

Comparing Macromedia Flash and SVG

For some potential users of SVG, an important question is how SVG compares with Macromedia Flash. A detailed comparison chart is available online at http://www.carto.net/papers/svg/comparison_flash_svg.html.

You will likely have or intend to develop an XML tool set and an XML skill set. Because SVG is an XML application language, many parts of the tool set and the skill set can be applied directly to SVG. For example, if you have an XML-aware editor, you can use that to create SVG. If you have skills in programming XML using the DOM, for example, many of those skills will be transferable to programming the SVG DOM. Similarly SVG, being XML, works naturally with XSLT for dynamic server-side generation and can be displayed with other XML namespaces in the same browser, as was mentioned for X-Smiles a little earlier.

Scripting of Flash uses ActionScript, a Macromedia variant of ECMAScript. SVG can be scripted without relying on proprietary variants.

SVG should provide, at least, strong competition to Flash in many application areas. However, many Flash developers will not be keen to learn yet another technology and will continue with Flash. However, as XML becomes the foundation of the Web over the next few years, the fact that XML will have to be “bolted on” to the Flash's proprietary core is likely to provide limitations in some areas. Being an XML application, SVG will not be as restricting.

The frame-based approach to Flash animations might benefit certain types of animation. SVG's approach is to provide multiple renderings of animations, which will produce visually superior output. However, it might pose a significant load on a slower CPU on a client machine.

However, SVG's use of SMIL Animation elements provides the potential for many types of animation that are likely less suitable for production with Flash.