JavaScript in SVG - Java Script

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 companies, 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:

This example places a circle at the lower-right corner of a square

Note that SVG files begin with the XML prolog <?xml version=”1.0”?>,which indicates that this language 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.

Basic SVG

The next tag is <desc/>, which contains a description of the image.You can think of <desc/> as being similar to the <title/> 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 XMLbased 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 <script/> tag for including JavaScript in its pages.This <script/> tag, however,is different from its HTML sibling:

  • The type attribute is required.This can be set to text/javascript or text/ecmascript,
  • though the former is technically the correct one.
  • The language attribute is illegal.Including this attribute causes SVG code to be invalid.
  • 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 <script/> tag.

Instead, SVG uses the xlink:href attribute to indicate an external file to reference.

For example:

In this code, the two <script/> 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, <script/> tags can be placed nearly anywhere. Typically, however,they are placed:

  • Immediately after the <desc/> tag
  • Inside of the <defs/> tag
  • Just before the outermost <g/> tag

The <script/> tag cannot be placed inside of shapes, such as <rect/> or <circle/>, nor can they be placed inside of filters, gradients, or other appearance-defining tags.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

Java Script Topics