Chapter 7. Animating SVG

THERE ARE THREE distinctly different ways to animate SVG: with CSS, with SMIL, and with JavaScript. All of them are compelling and appropriate in different situations. SVG can accommodate anything from minor little UI-embellishing animations to full-on immersive, interactive, animated worlds.


Readers who have made it this far, I reckon, are well acquainted with CSS and find transitions and @keyframe animations fairly straightforward and comfortable.

Lucky for you, the same CSS techniques you use for animating and transitioning HTML elements also work on inline SVG elements.

Let me give you an example. Say we’ve designed ...

Get Practical SVG now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.