↑
Main Page

Tag placement in SVG

CDATA sections are required for inline code.

Because SVG is a true XML-based language, it

properly supports CDATA sections and, therefore, requires them when inline code uses special

XML characters.

Uses

xlink:href

instead of

src

In SVG, no

src

attribute is used on a

tag.

Instead, SVG uses the

xlink:href

attribute to indicate an external file to reference.

For 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>

var i = 0;

]]></script>

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

In this code, the two

tags are correct for SVG. The first, containing inline code, is surrounded

by a CDATA section so no problems arise if you use special characters; the second uses the

xlink:href

attribute to reference an external file.

Tag placement in SVG

Because no

<head/>

area exists in SVG,

tags can be placed nearly anywhere. Typically, how-

ever, they are placed:

Immediately after the

<desc/>

tag

Inside of the

<defs/>

tag

Just before the outermost

<g/>

tag

The

tag cannot be placed inside of shapes, such as

<rect/>

, nor can they be

placed inside of filters, gradients, or other appearance-defining tags.

135

JavaScript in the Browser

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