SVG Animations

Foreword

Have you ever learned a new word, then had the opportunity to use that word in the perfect situation come up a number of times that week? That’s what it feels like when you start learning SVG. To layer on the metaphors, it’s like discovering your toolbox has been missing a tool all this time.

As a designer and developer, now that I’ve dug into SVG, I can tell you I work with it almost every single day. Not necessarily because I’m jamming SVG into projects because I can, but because it’s so often the right tool for the job. After you read this book and SVG becomes your tool too, I think you too will find yourself reaching for it regularly. It will pop to mind when you’re working, just like that satisfying moment when a new word you’ve learned comes in useful.

Perhaps you’ll think of SVG when you need to replace a logo with one that will display crisply on screens of any pixel density. Perhaps you’ll think of SVG when you need an icon system, a chart or graph, or a vector background pattern. Now that you’re holding this book in your hands, you’ll almost certainly think of SVG when you think of animation.

SVG is uniquely qualified for animation. It’s the single most powerful tool there is for animation on the web. Partly that’s because SVG is made of numbers. SVG essentially draws with geometry. And on the web, numbers are easy and intuitive to manipulate and animate. Perhaps you know that you can “fade out” an element—a rudimentary animation—by animating opacity from 1 ...