SVG Essentials, 2nd Edition

Chapter 12. Animating SVG

Up to this point, all the images you have seen are static images; once constructed, they never change. In this chapter, we will examine two of three methods of making graphic images move. The first method, SMIL-based animation, should be used for movement that is a fundamental part of what the graphic represents, and for which the motion can be defined ahead of time. CSS animations should be used for stylistic effects and simple feedback (like highlighting an element on focus/hover). Scripting should be used for more complex interaction, and it is covered in Chapter 13.

In Chapter 11, we suggested that filters should be used as a means to enhance a graphic’s message, not as an end in themselves. This suggestion is even more crucial with animation. Drunk with the power of animation, you will be tempted to turn your every graphic into an all-dancing, all-singing, Broadway spectacular. As long as your goal is experimentation, this is fine. If your goal is to convey a message, however, nothing is worse than gratuitous use or overuse of animation. Let me state this clearly: nobody except the company CEO is interested in repeated viewing of a spinning, flashing, color-changing, strobe-lit version of the company logo.

In this chapter, the message is the animation, so most of the examples will be remarkably free of any content while, of course, avoiding gratuitous and overwrought animation as much as possible.

Warning

Internet Explorer browsers (through version 11, ...