Main Page

script tag in SVG

Figure 5-2
The next tag is
, which contains a description of the image. You can think of
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
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.
is the
tag, which is short for
. This
is special because it is the outermost
one and, therefore, encapsulates the visible image.
tags can be used multiple times to form groups
of shapes within the outermost
(think of it as a
in HTML).
In this example, two
tags point to a shape in the
section. The
tag points its
attribute to the ID of a shape (preceded by the pound sign, #) and, therefore, brings the
shape into the visible image. Shapes defined in
can be used multiple times in the image if you
include multiple
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:
attribute is required.
This can be set to
though the former is technically the correct one.
attribute is illegal.
Including this attribute causes SVG code to be invalid.
Chapter 5
08_579088 ch05.qxd 3/28/05 11:37 AM Page 134

JavaScript EditorFree JavaScript Editor     Ajax Editor