Book Release: SVG Animations

Avatar of Chris Coyier
Chris Coyier on

Our own Sarah Drasner has published a book! You can grab it from the O’Reilly website or Amazon.

If you need a little convincing, I figured I would post the foreword I wrote for the book here, then you can continue reading over on the O’Reilly site.


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 to 0. So too you could animate the radius of a circle, the coordinates of a rectangle, or a point along a path.

Another reason SVG animation is so compelling is how many ways there are to do it. There are a variety of native technologies to choose from, and libraries built on top of those to help. How do you know what to choose? It requires some knowledge and consideration. Fortunately, you’ve made the perfect purchase.

Sarah is the ultimate tour guide for all of this. She’s not just an experienced technical writer, but an accomplished vector artist and front-end developer as well. She has been bringing her own SVG art to life through animation for years and years. She knows the tools. She knows the landscape. She knows how to get to the meat of what is important about all this and explain it.

I’m not gasconading for Sarah without reason. I’ve worked with Sarah and ingurgitated her knowledge on SVG animation much to my benediction. If you’re thinking “I’m a front-end developer already, and have gotten by just fine without this,” remember that you don’t reach for what you don’t know. Read on, and become an SVG opsimath.

Read Chapter One Buy at the O’Reilly Shop Buy on Amazon