No Images? Click here

Create compelling animations with 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.

In Chapter 7 of Practical SVG, Chris Coyier shows you how to use all three SVG animation methods. You'll start by adding some eye-catching animation to the clouds in an advert using some very simple CSS:

You'll move on to learn how to morph a star into a check mark using SMIL, which can create animations that CSS can't.

You'll finish by discovering how to animate SVG with JavaScript by directly manipulating the DOM, and then learn about using the Greensock and Snap.svg libraries to take care of all of the heavy lifting.

Practical SVG

Harness the power and possibilities of crisp, performance-efficient SVG with Chris Coyier. From software basics to build tools to optimization, you’ll learn techniques for a solid workflow. Go deeper: create icon systems, explore sizing and animation, and understand when and how to implement fallbacks. Get your images up to speed and look sharp!

Start your subscription today and you'll get access to this book, plus 300+ other web design and development books in SitePoint Premium!

Until next time,
James at SitePoint