Wednesday, June 10, 2015

Using Adobe Illustrator to mark SVG elements for JavaScript targeting

Lately I've been working with complex SVG files, linking JavaScript interaction to various elements within the SVG markup. 
Its not an easy task to locate elements within the markup. Luckily, Adobe Illustrator comes to the rescue: 

  1. Within Illustrator, its very easy to use the direct selection tool to select the required element. It is automatically marked in the Layers window.
  2. Give the layer a name. This name later becomes the element ID in the SVG markup.
  3. Be carefull not to use the same names for multiple layers. While Illustrator doesn't really care, your HTML / JavaScript are much less forgiving...
  4. Use the "Save Aa" command to save your file as SVG.
  5. If you open your SVG in a text editor - you will notice that layer names are now element IDs within your SVG markup.

All you need to do now is select your element by its ID in order to assign a JavaScript interaction to it.
In this example, I wanted the sun in the picture to be clickable so I gave its layer the name "sun".
After exporting to SVG, all that remain is:

document.getElementById("sun").onclick = function(){
   alert("You clicked the sun!");

Give it a try - click the sun:

No comments:

Post a Comment

About Me

My photo
I've been developing Internet and rich-media application for 15 years. In my work I emphasis usability and best user experience as well as sleek design. My main expertise are JavaScript, Flex and Flash.