Creating SVG

SVG is XML. In principle, it can be created by any text editor. Of course, having syntax checking for well-formedness and color highlighting is an improvement over an editor such as Windows Notepad.

Listing 15.1 shows a simple SVG document that animates some text from a position offscreen onto the screen shortly after the document loads.

Listing 15.1. HelloVector.svg: An Animated Greeting Expressed in SVG

<?xml version='1.0'?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
<svg> 
<text x="-320" y="50" style="font-family:Arial; font-
  size:24;"> 
Hello Vector Graphics World! 
<animate attributeName="x" from="-320" to="20" 
  begin="1s" dur="3s" fill="freeze" /> 
</text> 
</svg> 

The XML declaration and the DOCTYPE declaration should be familiar from earlier chapters in this book. The document element is an svg element. Remember that SVG is XML, so element type names are case sensitive. The svg element must be written using lowercase characters only.

An SVG text element is used to contain the short message. One of the SVG animation elements is used to animate the text from a position just offscreen to the left onto the screen, starting one second after the document loads.

This declarative animation provides powerful and flexible animation facilities in SVG, which don’t need to use scripting languages for many common effects. However, SVG has the flexibility to add script code to augment animation effects when it is appropriate.

Figure 15.1 shows the onscreen appearance partway through the animation of the text.

To view the SVG content onscreen, you need either a Web browser that has the Adobe SVG plug-in installed (see www.Adobe.com/svg/ for further details) or a dedicated SVG viewer such as Batik (see http://xml.apache.org/batik/ for further information). Some of the examples in Chapters 16 and 17 use SVG to illustrate programmatic control of the XML Document Object Model, so you will find it useful to install an SVG viewer.

Examples of SVG used in geographical mapping can be seen at www.carto.net/projects/.

Another approach to creating SVG is to use a drawing tool with SVG export capabilities. For example, Jasc WebDraw is a dedicated SVG drawing tool. More information is available at www.Jasc.com. Other well-known vector-drawing tools such as Adobe Illustrator (version 9 and onward, www.Adobe.com) and CorelDraw (version 10 and onward, www.Corel.com) have SVG export facilities. Macromedia Freehand does not support SVG export at the time of this writing.

Because SVG is XML, it can be generated dynamically from XML data stores on the server before being transmitted to an SVG-enabled Web browser. Among the server-side tools that can be used to generate SVG dynamically are XSLT, Java, and Perl.