Animating With Inline SVG

in Front-end

Incorporating animation in your design is a great way to grab a user’s attention and, for me, it adds some fun to an otherwise static design. While using inline SVGs might not be too common, it gives you the flexibility to animate virtually all aspects of an SVG with CSS. Let’s take a look at how to use animation to complement your designs.

Always Optimize

When using inline SVGs, it’s always a good idea to spend time optimizing the SVG code. Take us for example — most designers at Code School use Adobe Illustrator to create their designs. Unfortunately, Illustrator saves out SVG files with extraneous code that just bloats the file size.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="670px" height="236px" viewBox="328 -111 670 236" enable-background="new 328 -111 670 236" xml:space="preserve">
  <polygon fill="none" stroke="#4CADC1" stroke-width="4" stroke-linejoin="round" stroke-miterlimit="10" points="671.6,-35.1 
    671.6,-14.8 694.7,7 671.6,28.8 671.6,49.1 716.2,7 "/>
  <polygon fill="none" stroke="#4CADC1" stroke-width="4" stroke-linejoin="round" stroke-miterlimit="10" points="654.4,28.8 
    631.3,7 654.4,-14.8 654.4,-35.1 609.8,7 654.4,49.1 "/>
  <path fill="none" stroke="#4CADC1" stroke-width="4" stroke-linejoin="round" stroke-miterlimit="10" d="M663-72.1
    c-43.7,0-79.1,35.4-79.1,79.1s35.4,79.1,79.1,79.1S742.1,50.7,742.1,7S706.7-72.1,663-72.1z"/>
  <path fill="none" stroke="#4CADC1" stroke-width="4" stroke-linejoin="round" stroke-miterlimit="10" d="M663,71.9
    c-35.8,0-64.9-29.1-64.9-64.9s29.1-64.9,64.9-64.9S727.9-28.8,727.9,7S698.8,71.9,663,71.9z"/>
</svg>

The easiest way to do basic clean up is by running your SVG through an optimizer — I like to use SVGO as a starting point. It handles the initial clean up, and you can continue refactoring and organizing paths into groups if you’re making a more complex animation. Here’s an example of output you might get from SVGO:

<svg xmlns="http://www.w3.org/2000/svg" width="670" height="236" viewBox="0 0 670 236">
  <path stroke="#4CADC1" stroke-width="4" stroke-linejoin="round" stroke-miterlimit="10" fill="none" d="M343.6 75.9v20.3l23.1 21.8-23.1 21.8v20.3l44.6-42.1zM326.4 139.8l-23.1-21.8 23.1-21.8v-20.3l-44.6 42.1 44.6 42.1zM335 38.9c-43.7 0-79.1 35.4-79.1 79.1s35.4 79.1 79.1 79.1 79.1-35.4 79.1-79.1-35.4-79.1-79.1-79.1zM335 182.9c-35.8 0-64.9-29.1-64.9-64.9s29.1-64.9 64.9-64.9 64.9 29.1 64.9 64.9-29.1 64.9-64.9 64.9z"/>
</svg>

If you compare the SVGO SVG with the code I use in my CodePens, you’ll see I actually split out all of my paths so I could animate them separately using different class names. In this case, SVGO optimized things too well.

Animating with CSS

Now we’re ready to get things moving. The following attributes are the ones I’m adjusting and animating, but they’re just a few you can control in SVG. For a complete list of attributes, visit the MDN documentation on SVG.

  • stroke-linecap: We can adjust the stroke cap with stroke-linecap from butt, round, or square.
  • stroke-linejoin: This attribute can be set to miter, round, or bevel.
  • stroke-dashoffset: The dashoffset is the attribute we actually animate. It determines the distance the dash pattern starts on your path.
  • stroke-dasharray:The dasharray attribute controls the gaps on a path.

In my example below, I’m animating the dashoffset to create the effect of the design being drawn. Then, I add a class to all the paths called ‘path’ and declare a keyframe animation to adjust the stroke dashoffset.

See the Pen Code School - SVG Animation - Logo by Jordan Wade (@jordanwade) on CodePen.

Remember, when you’re using this effect your dashoffset and dasharray must be high enough to account for the entire length of the path you are animating. For example, I set the Code School logo to around 500. If I had set the properties to something lower, like 10, then it would have created the effect you see below. Although the effect is neat, it doesn’t appear to be drawn like I had originally intended.

See the Pen Code School - SVG Animation - Logo Dashed by Jordan Wade (@jordanwade) on CodePen.

For this example, we’ve bumped it up a notch with a more complex design. I’ve adjusted the animations so that the lines are drawn at different times and move slightly (hint: click RERUN on the CodePen if you missed the animation).

See the Pen Code School - SVG Animation by Jordan Wade (@jordanwade) on CodePen.

These techniques just scratch the surface of what you can do with SVGs. If you’re looking to explore more complex animations with SVGs, check out one of the many JavaScript libraries built to animate SVGs — my favorites are Snap.svg, Two.js, and RaphaelJS. The best way to learn is just to start experimenting with your code, so get started today and soon enough you’ll have animations you can start using in your designs.

Let us know what you think about using inline SVG animations or check out our SVG course. Share any tips or tricks you have in the comments section below!

Code School

Code School teaches web technologies in the comfort of your browser with video lessons, coding challenges, and screencasts. We strive to help you learn by doing.

Visit codeschool.com

About the Author

Jordan Wade

A Front-end Developer who started as a carpenter on a Amish construction crew. He traded in his tool belt for all things web design and development related.

Might We Suggest