Adobe Illustrator’s SVG Interactivity Panel Explained

SVG is on its way to being a staple part of web development and design. Understanding SVG and being able to list it among your skills is becoming more and more important.

In today’s tutorial we’re answering a specific request from a Tuts+ reader. We’re going to take a look at a tool in Adobe Illustrator which helps authoring of SVG interactivity with JavaScript. It’s called–wait for it–The SVG Interactivity Panel.

Quick Disclaimer

I’ll spare everyone a heavily-detailed walk through of what’s actually quite an ineffective tool. I won’t be discussing the variables tab as I really don’t see much use for it and (in my opinion) it’s much wiser to write JavaScript from your project itself over using the interactivity panel. 

Neither will I be walking through the linking of external JavaScript files, but you can always examine things more closely at a later point after reading about this panel’s purpose.

1. Target the Object

Begin by selecting an object on the art board, or targeting an item in the Layers palette (see Changing the appearance of artwork using the Layers palette for more information on this.) 

Targeting via the Layers panel

Go to Window > SVG Interactivity.

2. Make the Event

Now we need to add an event to our object. This event will determine the circumstances under which our JavaScript will take effect. In the SVG Interactivity palette, choose an event in the Event select menu. Here I’ve chosen onmouseover:

In the JavaScript text box, write a JavaScript command that will be triggered by the event you selected. In this case we’ve added:

alert("hello");

Press Enter to add the entry to the event list.

3. Examine Your XML Output

Once the event has been created Illustrator will use your selected target (in this case my group element known as the g tag) and apply the JavaScript inline. If you copy your object and paste directly into a text editor you will be given the XML for that object. It will look something like this:

<svg><g id="clock" onmouseover="alert('hello');"></g></svg>

As you can see in the XML output the event listener and handler have been inlined for us. Now when you open the SVG in a browser, when you hover over the SVG you’ll see an alert with the word “hello”.

Note: please be aware that I do not endorse the use of inline JavaScript for anything unless absolutely necessary!

Deleting a JavaScript Event

In the SVG Interactivity palette, click on a JavaScript event to highlight it. Choose the trash can from the bottom right of the SVG Interactivity palette menu. 

Conclusion

That’s it! As we’ve seen the SVG interactivity palette allows designers to add interaction programming from within Illustrator directly. Again, I would stay away from this tool unless you absolutely have reason to use it. Stick to writing JavaScript from your project, rather than directly in Illustrator.

{excerpt}
Read More

Leave a Reply

Your email address will not be published. Required fields are marked *