O'Reilly logo

Sams Teach Yourself SVG in 24 Hours by Micah Laaker

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required