Main Page

JavaScript in SVG

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
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”
<svg xmlns=”” xmlns:xlink=””
width=”100%” height=”100%”>
An image of a square and a circle.
<rect id=”rect1” width=”200” height=”200” fill=”red” x=”10” y=”10”
<circle id=”circle1” r=”100” fill=”white” stroke=”black” cx=”200”
<use xlink:href=”#rect1” />
<use xlink:href=”#circle1” />
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
, which defines the file as an SVG image. The
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
and will most likely be supported in future versions of XHTML. For now, SVG leads
the way in supporting basic XLink.
JavaScript in the Browser
08_579088 ch05.qxd 3/28/05 11:37 AM Page 133

JavaScript EditorFree JavaScript Editor     Ajax Editor