• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Hour 13. Interaction

It almost goes without saying: interactive elements often make for more engaging content than static, unmoving elements. SVG not only provides the language to define vector content display, but also the language to define how that content interacts with itself and other outside elements.

In SVG, animation and interaction controls are created using an appropriate element (such as set, animate, animateTransform, animateMotion, and animateColor). Though in some cases you can define an object's interactivity by locating an interactive element within an object's element, SVG does not require the object and the interactive control to be located next to each other in the code. This affords two very helpful benefits:

  • Reduced chance for errors—By separating the object and the interaction, you run into less likelihood of mistakenly editing the wrong property. For instance, if your interaction element had a similar attribute name as one of your object element's attributes, you may mistakenly edit the interaction element's attribute when meaning to edit the object element's attribute.

  • Easier identification of code—With interaction elements separated from their applied objects by space within the SVG code, you can group all interaction elements together. This makes it easier to find and edit interaction elements (without mistakenly editing the original objects), as you won't need to pick through large, unrelated sections of code.

In this hour, you'll learn

  • how to make pop-up devices and links to other sites

  • how to change an item's display (disappearance) and its color

  • ways to apply your timing and event trigger knowledge

  • fundamental concepts of animation



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint