I attended Cassie Evan's SVG masterclass on getting started with SVG animation in February and have been enjoying creating and animating more SVGs in recent weeks.

Reading and Writing SVGs

You may be wondering what exactly are SVGs. SVG's are magic! The Scalable Vector Graphics (SVG) format is a human-readable image format. You can create and edit SVGs by writing XML or by editing the file in design software like Adobe Illustrator. SVG images are vector files that are mathematically calculated which means that even if you zoom into an SVG on a website or enlargen it for a billboard it will be just as sharp. In contrast, to vector files, pixel based images (generally photographs) will become blurry at different resolutions.

One of the cool things about SVGs is that once you understand how to read an SVG file you can change the colors (known as fill or stroke) programmatically.

four squares generated by SVG's XML Markup

The code block below this paragraph represents the four SVG squares above. Each of the squares is a rect with a different fill color. Since the width and height is the same value of 300 these rects appear as squares and all of the squares have the same y coordinate which means they are aligned horizontal but have different x coordinates. If they had the same x and y coordinate they would overlap with each other. The viewBox property in the <svg/> that wraps these components determines how viewed in these shapes appear. Amelia Wattenberger created a great, interactive writeup for getting a better understanding of viewBox.

1<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1728 500">
2    <rect x="153.55" y="200" width="300" height="300" fill="#ff499e" />
3  <rect x="519.55" y="200" width="300" height="300" fill="#99267e" />
4     <rect x="883.41" y="200" width="300" height="300" fill="#9c5ea8" />
5  <rect x="1263.41" y="200" width="300" height="300" fill="#798fd4" />
6</svg>

I've also written an article about my SVG creation process for more complex SVGs.

Animating SVG elements

Since the visual properties of SVGs are written in a human readable format we can programmatically change different values of SVGs with CSS or JavaScript to create animations by applying a sequence of styling changes over a duration of time.

Below is an example of a Bubble Tea SVG that I animated with CSS to make the cheeks blush and move the bubbles around a bit. You can take a peek at the SVG in the HTML tab of the Codepen below to see how I structured the SVG. You may notice that can group different elements in SVG with a <g> which functions similarly to <div>s and can be target programmatically if there is a specific class or id associated with a group. Individual SVG shapes and paths can also have their own unique identifiers if you want to target more specifically but so far I've found that it's helpful to animate in groups.

The cheeks in the bubble tea SVG are grouped together with the id "cheeks"

1<g id="cheeks" stroke="#de9bb5" stroke-miterlimit="10" stroke-width="10">

There's a default fill and stroke color set for the #cheeks based on the original color values in the SVG but we can use CSS to target the #cheeks and change the colors with the below animation that change the color of its thick stroke by applying a blush animation every that last a duration of 4s for an infinite amount of time.

1#cheeks {
2  /* play the blush animation for 4s and repeat an infinite amount of times */
3  animation: blush 4s infinite;
4}

Generally, on production sites you'd want to have more control over when an animation is running so that it isn't running continuously as opposed to just when visible or necessary for performance reasons.

The specifics for blush to change the fill color are then defined in @keyframes blush

1@keyframes blush {
2  50% {
3     /* change from original fill color (defined in SVG)
4    to #b7094c halfway through the animation */
5    stroke: #b7094c; 
6  }
7}

If you view the CodePen you can also see the separate jiggle animation instances that I applied to each of the individual #boba at different time points (offsetting the seconds measurement in animation: jiggle 5s infinite) with the CSS transform property which allows you to move, scale, rotate and more!

1/* excerpt of applying the jiggle animation with different timing to different elements*/
2#boba-two {
3  -webkit-animation: jiggle 5s infinite;
4  animation: jiggle 5s infinite;
5}
6#boba-three {
7  -webkit-animation: jiggle 3s infinite;
8  animation: jiggle 3s infinite;
9}

Cross-Browser Compatibility

You may have noticed some of the CSS in the code examples in this article have prefixe like -webkit. These are vendor prefixes which allows developers to use newer features that aren't yet considered stable within a specific browser. You can use a website like: https://autoprefixer.github.io/ or a PostCSS tool like https://github.com/postcss/autoprefixer to automate adding these prefixes to your animations to ensure any more experimental features have as much cross-browser support as possible. In addition to using these vendor prefixing tools I'd recommend actually doing cross-browser testing for your animation work and being familiar with Can I Use which shows up-to-date information on browser compatibility for specific features.

The CSS animation examples in this article are relatively simple but more complex animations can be created using similar principles with with CSS animations or with animation libraries like GreenSock Animation Platform (GSAP)