High Temperature Materials Laboratory - SVG Animations: from Common UX Implementations to Complex Responsive Animation

• 2017-03-16: First Release

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? Thats what it feels like when you start learning SVG. To layer on the metaphors, its like discovering your toolbox has been missing a tool all this time.

As a designer and developer, now that Ive dug into SVG, I can tell you I work with it almost every single day. Not necessarily because Im jamming SVG into projects because I can, but because its 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 youre working, just like that satisfying moment when a new word youve learned comes in useful.

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

SVG is uniquely qualified for animation. Its the single most powerful tool there is for animation on the web. Partly thats 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 elementa rudimentary animationby 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, youve made the perfect purchase.

Sarah is the ultimate tour guide for all of this. Shes not just an experienced technical writer, but an accomplished vector artist and frontend 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.

Im not gasconading for Sarah without reason. Ive worked with Sarah and ingurgitated her knowledge on SVG animation much to my benediction. If youre thinking Im a frontend developer already, and have gotten by just fine without this, remember that you dont reach for what you dont know. Read on, and become an SVG opsimath.

Chris Coyier