The SVG Interactivity palette

(Note: Internet Explorer for the Macintosh does not support JavaScript access to plug-ins. This is a browser limitation, not a shortcoming of the Adobe® SVG Viewer. For this reason, Macintosh IE 5 users cannot properly view examples incorporating JavaScript functions. Please use Netscape to view this tutorial.)

The SVG Interactivity palette in Adobe Illustrator 9.0® is designed to provide an easy way of creating dynamic SVG using JavaScript. Please use the drop-down menu (shown at left) to navigate to each of the specific examples.

On each of the following tutorial pages, you will find:

  • JavaScript files for creating specific effects such as rollovers, animations, and drop-down menus.
  • Step-by-step instructions for creating interactive SVG.
  • The complete Illustrator zip files or hqx files (i.e, "before" and "after") to recreate the examples yourself. The names of these files all end in "_final.ai." Please note that these files are also available on the Illustrator 9.0 CD.

Notes:

  • JavaScript-driven SVG will not work with the current versions of Internet Explorer on the Macintosh. For more information, refer to the FAQ on this site.
  • You should be familiar with the improved Layers palette in Illustrator 9.0 and be able to expand layers, select elements, and name elements before creating your own interactive SVG.

A note about targeting vs. selection:

The distinction between "selecting" and "targeting," and the difference between applying attributes to a group of objects individually and to a group as a whole, is important when it comes to using the SVG Interactivity palette. The Layers palette allows you to target groups or layers to apply attributes such as styles, URLs, and scripts. Targeting a layer or group is achieved by clicking the targeting icon at the right of the Layers palette. A filled icon indicates the application of attributes to that layer or group.

In the figure below, the top layer has been targeted, and an attribute has been applied to it. The icon next to the layer name is outlined (showing that it is targeted) and filled (showing that the layer has an applied attribute). The layer below demonstrates how the selection of a layer (or group) and the application of an attribute to the multiple objects in the selection results in the application of the attribute individually to each object (note the filled icons next to each object, but not next to the layer)


When applying attributes such as URLs or scripts to illustrations, you will probably want the URL or script to be associated with a layer (or group) of objects, but not with each object within the layer (or group) individually. Targeting allows you to specify the desired behavior on a set of objects as a group.

Rollovers
One of the main benefits of SVG rollovers is there is no image swapping. Instead, you are able to dynamically change the SVG artwork. These changes are immediately displayed in the browser without needing to refresh, reload, or swap images.

Our rollover examples show how you can change the following:

Animation
SVG supports two different methods of animation. The first is to create a series of frames and then show and hide those frames in a particular order to give the appearance of animation. This is how animated GIFs are made. The second method of animation involves directly manipulating the SVG in terms of moving, rotating, scaling, or otherwise changing various elements to create the animation. Since the latter involves some knowledge of how SVG works, our examples deal solely with frame-based animation.

Our examples show how you can create the following animations:

  • Looping — Looping animations step through each frame and upon reaching the last frame, start over at the first frame.
  • Oscillating — Oscillating animations step through each frame and upon reaching the last frame, step backward through the frames. When the first frame is reached, the animation repeats.
If you would like to learn more about creating animation within SVG, check out the advanced tutorial on Dynamic SVG.


Drop-down menus
Since SVG can contain embedded fonts as well as links, making customized drop-down menus is simple.

Learn how to make a drop-down menu like the one at left.