SVG Animations

Chapter 1. The Anatomy of an SVG

Scalable Vector Graphics are becoming increasingly popular as a means of serving images on the web. The format’s advantages can be deduced from its name:

• SVG images are scalable, which in an age of increasingly varied viewport sizes is a huge boon to development. With SVG we have one graphic to rule them all that scales to all devices, and therefore can save us from subsequent HTTP requests. Even the newer CSS properties such as srcset and picture require different images to be cut for different viewports, but SVG avoids all of that extra work.
• Vector (rather than raster) means that, because they are drawn with math, SVGs tend to have greater performance and smaller file sizes.

SVG is an XML file format, and we can use it to succinctly describe shapes, lines, and text while still offering a navigable DOM; this means it can be performant and accessible.

In this first chapter, we’ll lay the foundation for an understanding of what this DOM comprises, because we’ll be reaching within it in order to create complex animations. We’ll be going over some of the syntax within the SVG DOM so that you know exactly what you’re manipulating and can debug as needed. We won’t be doing a deep dive into everything that the SVG DOM has to offer, because it’s out of the scope of this book. If you’d like more backstory, SVG Essentials by J. David Eisenberg and SVG Colors, Patterns, and Gradients by Amelia Bellamy-Royds and Kurt Cagle, both from O’Reilly, are great ...