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.
ANIMATING SVG WITH CSS
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 books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
