Sams Teach Yourself SVG in 24 Hours

Hour 12. Time

For this hour, you will step back from the practical application of code to review a concept that will be fundamental in making your SVG content interactive.

With any technology that defines motion and interaction, you will need to have a system of measuring and addressing time to handle animation. In terms of SVG, animation is considered an action that occurs beyond an object's initial static display (such as an adjustment in size, visibility, color, position, and so forth). For an animation to occur (that is, for a ball to bounce or a drop-down menu to unfold), a viewer must know when to initiate the action. In some instances, you will want an animation to occur at a fixed time. For example, 5 seconds after your SVG loads, a ball ...