Chapter 23. Scalable Vector Graphics

by Andrew Watt

In this chapter

Vector Graphics Overview

Vector Graphics on the Web

The SVG Rendering Model

SVG Document Structure

SVG Basic Shapes

Paths in SVG

Text Handling in SVG

Gradients in SVG

Declarative SVG Animations

Scripting SVG

Linking in SVG

Additional Resources

Roadmap

Scalable Vector Graphics (SVG) is one of the most exciting of the new XML-based specifications to emerge from the W3C. Many of the other XML specifications can be pretty abstract at times, but SVG is very visual. As you improve your skills in how to create SVG, you will have the pleasure of easily seeing your increasing control of the technology right in front of your eyes.

SVG provides an XML-based vector graphics format that was intended by the World Wide Web Consortium (W3C) to replace many uses of bitmap graphics in Web pages. It can be used for many situations in which you might currently use GIFs, including animated GIFs. It can also be used to create complex animations that can compete with Macromedia Flash and add subtle transitions that Flash, being frame-based, is less suited to produce. In addition, SVG has enormous potential for the creation of maps and technical diagrams in which the ability to zoom in to and out of a map or diagram can be of enormous practical benefit.

A graphics format must be visual, so straightaway we will create a visual example—although we won't examine the syntax in detail at this point. Let's suppose that you want to create a graphics rollover using conventional technologies. You might use two bitmap graphics, perhaps produced in an expensive proprietary graphics editor, together with some JavaScript to create the rollover. Using SVG, you can create rollovers simply by declaring what you want to happen.

Listing 23.1 is a fairly straightforward piece of SVG that creates a rollover button. Don't worry about the detail of the code just now: We will discuss it later. The code describes an SVG button and its behavior in response to particular mouse events. When the button is unmoused, it contains a gradient that has a bright green top and bottom with a quiet pink center and dark blue text. When the graphic is moused, the gradient changes to a red center with pale green edges while at the same time the color of the text changes to white. Figures 23.1 and 23.2 show the appearance onscreen when the graphic is unmoused and moused.

Listing 23.1. A Rollover Button Animation in SVG (RolloverButton.svg)

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="300" height="250">
<defs>
<linearGradient id="MyGradient" gradientUnits="objectBoundingBox"
  x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="1%" style="stop-color:#00FF00"/>
<stop offset="50%" style="stop-color:#FF9999"/>
<stop offset="100%" style="stop-color:#00FF00"/>
</linearGradient>
<linearGradient id="MySecondGradient" gradientUnits="objectBoundingBox"
  x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="1%" style="stop-color:#CCFFCC"/>
<stop offset="50%" style="stop-color:#FF0000"/>
<stop offset="100%" style="stop-color:#CCFFCC"/>
</linearGradient>
</defs>
<rect id="MyRect" x="20" y="20" rx="10" ry="10"
 width="130" height="45" style="fill:url(#MyGradient); stroke:none">
<set attributeName="fill" begin="mouseover"
 end="mouseout" to="url(#MySecondGradient)"/>
</rect>
<text x="30" y="47" style="fill:#000099; stroke:none; font-family:Arial, sans-serif;
 font-size:16" pointer-events="none">
<set attributeName="fill" begin="MyRect.mouseover"
 end="MyRect.mouseout" to="white"/>
SE Using XML</text>
</svg>

To produce, without using SVG, a visual effect similar to that produced by Listing 23.1, you would typically have to use two bitmap graphics and a little straightforward JavaScript. In SVG, you simply describe the appearance of the button at rest, as it were, and also describe the animation that is to take place when the rectangle is moused. Assuming that you have the syntax correct, the rest is handled by the SVG rendering engine. SVG makes such animations delightfully simple.