1. Introduction

1.1 Scalable Vector Graphics

Scalable Vector Graphics, or SVG, is the World Wide Web Consortium's (W3C's) Recommendation for defining 2-dimensional schematic drawings such that the size is more directly dependent on the content in the drawing and the resolution is whatever the user requires. Zooming in on an SVG drawing allows greater and greater detail to be seen if the drawing is complex. The first version of SVG appeared in 2001. This was superceded by SVG 1.1 in 2003 which factored in a number of errata. Work is currently ongoing on SVG 1.2. The basis for this new version is SVG 1.2 Tiny, a cut-down version aimed at small devices that was completed in 2008.

1.2 An XML Application

SVG is an XML application. This means that SVG is defined using a set of elements, and the elements can have attributes associated with them. Both must conform to the rules defined by XML. For example:

<text x="20" y="20">Abracadabra</text>

The SVG text element has a start and end tag written as <text> and </text> and the content of the element is the string Abracadabra. The text element has two attributes, x and y, that define the position of the text in the drawing. These are defined as part of the start tag. Being an XML application, several rules have to be obeyed:

  • There can only be one outer element that encloses the complete drawing definition and that is <svg>
  • Every start tag must have a correctly nested end tag
  • In SVG, tag names are predominantly lower case with no spaces (multi-word names like clipPath use camel case
  • Attributes must be enclosed in quotes (either single or double)

If the content of the element is null, a shorthand can be used:

<rect x="10" y="10" width="50" height="30"></rect>
<rect x="10" y="10" width="50" height="30" />

The slash before the closing > in the second line indicates that the element does not have any content. Effectively, all the content is encapsulated in the name of the element and its attributes. The two examples of the rect element given above are equivalent.

1.3 Using SVG

The two simple ways to use SVG from a browser are:

  • Open an SVG file directly
  • Accessing an SVG file from within an (X)HTML page using the object element

You define the SVG document and store it in a file with .svg as the file extension. To add it to the (X)HTML page requires, for example:

<p>This can be shown in the following diagram:</p>
<p><object width="620" height="420" data="mysvg.svg"  type="image/svg+xml"/></p>

The SVG Primer on the W3C site gives a lot more examples of how to access an SVG document but the two above will suffice for now.

1.4 HTML5

HTML5 will allow the SVG document to appear directly in the HTML page. This is now supported by all the major browsers:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" >
  <head>...</head>
  <body>
    ...
    <svg xmlns="http://www.w3.org/2000/svg" id="anim" width="1024" height="768">
      .....
    </svg>
    ....
  </body>
</html>

A major advantage is that changes can be made to the SVG document using scripting in the HTML5 document. This is how we achieve synchronisation between the soundtrack, which is an HTML5 audio element, and starting the SVG animation. Note that HTML5 is currently using the XHTML namespace declaration.