Interactivity and event handling are also part of the SVG Specification. Hyperlinks, mouse and keyboard events and state change events are all scriptable in SVG. The <a> element can be used to indicate what parts of a drawing will cause the current browser frame to be replaced by the contents of the URL specified in the href attribute. The following is an example of a hyperlink attached to a path (which in this case draws a triangle):

<a xlink:href="http://www.w3.org">
<path d="M 0 0 L 200 0 L 100 200 Z">
</a>

If the path is clicked, the current browser frame will be replaced by the W3C home page.

A unique feature of SVG is that because individual elements of SVG images can be referenced as links, dynamic rollover effects can be achieved like in the following example. Pass your cursor over the HTML links on the right, and then try passing your cursor over the elements in the SVG image. (Note: "Hover" effects are only available in IE4 and IE5).

Just as with scripting animations, rollovers can be created by changing various property values.

For example, the "linkS" element in the SVG image above demonstrates a rollover where the value of the property "fill-opacity" changes from "0" to ".7."

The script here uses event handlers associated with SVG elements. We use the mouseOver and mouseOut events and we define two separate functions for each of the events: mouse_over_a and mouse_out_a, respectively. Event handlers can be associated with any SVG element in much the same way as in HTML. For example:

<g id="linkV"
onMouseOver="mouse_over_a('linkV')"
onMouseOut="mouse_out_a('linkV')">

Just like in HTML, the value of the event handler can be any valid JavaScript statement. In particular it can be a call to a JavaScript function either defined in the parent HTML document or in the SVG document itself. Also, the object event can be used inside the JavaScript statement. This object contains more attributes related to the event, such as event type, position of mouse, etc.

In the following example, rollovers in the first SVG image trigger functions that manipulate elements in the second SVG image. Note that the 2 images are separate. Pass your cursor over the numbered boxes in the image below, and then try clicking them.

[The SVG image above is separate from the SVG image below]

This interaction is fairly sophisticated, but builds on the kind of scripting we have done up to this point. Take a look at the script by clicking "view JavaScript source," and note the various functions and features we have used in previous examples. For instance, making elements visible (as on the mouseovers), and manipulating existing elements and animating them as continuous animations ("gradient_star" goes from being the finely outlined element to the heavier stroked and filled animated element).

Next lesson: Keyboard events