Sams Teach Yourself SVG in 24 Hours

Summary

Animation can certainly inject your SVG documents with life. With all the possible elements and various attributes that allow fine-tuning, virtually any animation conceivable can be replicated in SVG. Figuring out which animation element to use, however, is the challenge.

Remember that each animation has its own focus. animate focuses on transitioning between values of a specific attribute. animateMotion deals only with moving an object along a motion path, allowing more freeform movement than animate can allow. animateTransform transitions an object between various transformation states. Finally, animateColor simply shifts an object's color from one state to another.

Old-fashioned frame-by-frame animation is possible as well. By intelligently ...