SVG Animations

Preface

SVG Animation: Where Art and Code Intersect

People joke that working with Scalable Vector Graphics, one must be an archaeologist, and as funny as it is, there’s a lot of truth there. SVG has long lain dormant, put aside for its previous lack of support and understanding. But a few twists in the web plot have allowed for its resurgence, now-excellent support, and now-strong standing in the community:

Data visualization

Being able to visually express concepts with the actual data is vital for communication of complex concepts.

Responsive

In a world of thousands of devices, viewports, and pixel densities, the ability to use one graphic and have it be crisp and scale to all of them is a game-changer.

Performance

When SVG is built properly, with reduced path points and simple shapes, it can offer tiny file sizes that bitmaps can’t compete with. With properly constructed SVGs we can make our web lightning-fast and available to all.

A navigable DOM

This point is a sleeper hit: you might not immediately notice it as a boon to development, but SVG’s integration into the DOM means you have the ability to offer more information to screen readers and make your graphics truly accessible. You can also reach right inside and animate or manipulate small sections at a time. In this book, you’ll discover how powerful a feature this is indeed. No crazy z-indexing and absolute positioning required!

SVG can move smoothly, freely. We’ve only just hit the surface of its potential. As a developer, ...