↑
Main Page

JavaScript in SVG

Scalable Vector Graphics (SVG) is an up-and-coming XML-based language used to draw vector graphics

on the Web. Vector graphics are different from raster (or bitmap) graphics in that they define angles,

lines, and their relationship to each other instead of simply specifying one color per pixel of an image.

The result is an image that looks the same no matter what size the rendering. Vector graphic programs

such as Adobe Illustrator have begun to include SVG export functions as the language gains popularity.

Although no browsers natively support SVG at present (although Mozilla 2.0 will), a number of compa-

nies, notably Adobe and Corel, are making SVG plugins that enable most browsers to display SVG

graphics.

Basic SVG

Introducing SVG as a language is out of the scope of this book; however, it is helpful to understand a

little about the language for the JavaScript discussion.

Here is a simple SVG example:

<?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”>

width=”100%” height=”100%”>

<desc>

An image of a square and a circle.

</desc>

<defs>

<rect id=”rect1” width=”200” height=”200” fill=”red” x=”10” y=”10”

stroke=”black”/>

<circle id=”circle1” r=”100” fill=”white” stroke=”black” cx=”200”

cy=”200”/>

</defs>

<g>

</g>

</svg>

This example places a circle at the lower-right corner of a square (see Figure 5-2).

Note that SVG files begin with the XML prolog

<?xml version=”1.0”?>

, which indicates that this lan-

guage is XML-based. Following that is the SVG DTD, which is optional but typically included.

The outermost tag is

<svg/>

, which defines the file as an SVG image. The

width

and

height

attributes

can be set to anything, including percentages and pixels, but are set to 100% here for simplicity. Notice

that two XML namespaces are specified, one for SVG and one for XLink. XLink defines the behavior of

links such as

href

and will most likely be supported in future versions of XHTML. For now, SVG leads

the way in supporting basic XLink.

133

JavaScript in the Browser

08_579088 ch05.qxd 3/28/05 11:37 AM Page 133