Adding SVG interactivity to artwork


    You use the SVG Interactivity palette to add interactivity to your artwork when it is exported for viewing in a Web browser. For example, by creating an event that triggers a JavaScript command, you can quickly create movement on a Web page when the user performs an action such as moving a mouse cursor over an object.

    The SVG Interactivity palette also lets you see all the events and JavaScript files associated with the current file. For information on using palettes, see Using palettes.

    To add SVG interactivity features to your artwork, select an object using a selection tool, and then add the event and corresponding JavaScript to that object in the SVG Interactivity palette. For example, you could select an object in your artwork and specify that the object will move on a Web page when a user clicks on the object in a Web browser.

    Object with normal appearance (left) compared with glow activated by a mouse rollover (right)
    Object with normal appearance (left) compared with glow activated by a mouse rollover (right)

    Displaying the SVG Interactivity palette

    Choose Window > SVG Interactivity.

    Using the palette menu

    Click the triangle triangle icon in the upper right corner of the palette.

To add a JavaScript event to an object:

  1. Select the object.
  2. In the SVG Interactivity palette, choose an event from the Event pop-up menu:
    • onfocusin to trigger the action when the element receives focus, such as selection by the pointer.
    • onfocusout to trigger the action when the element loses focus, (often when another element receives focus).
    • onactivate to trigger the action with a mouse click or keypress, depending upon the SVG element.
    • onmousedown to trigger the action when the mouse button is pressed down over an element.
    • onmouseup to trigger the action when the mouse button is released over an element.
    • onclick to trigger the action when the mouse is clicked over an element.
    • onmouseover to trigger the action when the pointer is moved onto an element.
    • onmousemove to trigger the action while the pointer is over an element.
    • onmouseout to trigger the action when the pointer is moved away from an element.
    • onkeydown to trigger the action when a key is pressed down.
    • onkeypress to trigger the action while a key is pressed down.
    • onkeyup to trigger the action when a key is released.
    • onload to trigger the action after the SVG document has been completely parsed by the browser. Use this event to call one-time-only initialization functions.
    • onerror to trigger the action when an element does not load properly or another error occurs.
    • onabort to trigger the action when the page loading is stopped before the element is completely loaded.
    • onunload to trigger the action when the SVG document is removed from a window or frame.
    • onzoom to trigger the action when the zoom level is changed for the document.
    • onresize to trigger the action when the document view is resized.
    • onscroll to trigger the action when the document view is scrolled or panned.
  3. In the JavaScript text box, write a JavaScript command that will be triggered by the event you selected in step 3.
  4. Press Enter to add the entry to the event list.

To delete a JavaScript event from the SVG Interactivity palette:

  1. In the SVG Interactivity palette, click on a JavaScript event to highlight it.
  2. Click the trash button Delete icon, or choose Delete Event from the SVG Interactivity palette menu.

To list, add, or remove JavaScript events linked to the file:

  1. In the SVG Interactivity palette, click the Link JavaScript Files button Link JavaScript Files button , or choose JavaScript Files from the SVG Interactivity palette menu.
  2. In the JavaScript Files dialog box, select a JavaScript entry. Click Add to browse for additional JavaScript files; click Remove to remove the selected JavaScript entry.