↑
Main Page

script tag in SVG

Figure 5-2

The next tag is

<desc/>

, which contains a description of the image. You can think of

<desc/>

as being

similar to the

tag in HTML because it provides a description of what is in the image but does

not render it on the page. Immediately following is the

<defs/>

tag, which is where you can define

resources and shapes that are to be used later in the image. In this case, a rectangle and a circle are

defined. These shapes won’t be displayed unless specifically used in the actual image.

After

<defs/>

is the

<g/>

tag, which is short for

group

. This

<g/>

is special because it is the outermost

one and, therefore, encapsulates the visible image.

<g/>

tags can be used multiple times to form groups

of shapes within the outermost

<g/>

(think of it as a

<div/>

in HTML).

In this example, two

<use/>

tags point to a shape in the

<defs/>

section. The

<use/>

tag points its

xlink:href

attribute to the ID of a shape (preceded by the pound sign, #) and, therefore, brings the

shape into the visible image. Shapes defined in

<defs/>

can be used multiple times in the image if you

include multiple

<use/>

tags. This capability makes SVG a shining example of code reuse among XML-

based languages.

Of course, one of the most exciting parts of SVG is its excellent support for JavaScript that can be used to

manipulate all parts of an SVG image.

The <script/> tag in SVG

SVG adopted a similar version of the

tag for including JavaScript in its pages. This

tag, however, is different from its HTML sibling:

The

type

attribute is required.

This can be set to

text/javascript

text/ecmascript

though the former is technically the correct one.

The

language

attribute is illegal.

Including this attribute causes SVG code to be invalid.

134

Chapter 5

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