SVG Animation

Ryan Brownhill
Mar 5, 2015 · 5 min read

SVG stands for Scalable Vector Graphics. Which means you can scale the graphic and it will never ever pixelate. This post I am going to be diving into animating these SVGs!

Animating SVGs is SUPER EXCITING! There are so many attributes you can animate and you can even style the animation with CSS! Its like animating with a shape layer in After Effects. Its like having a GIF that you can scale, style and tweak! Its basically a GIF on steroids.

Exporting SVG

There are many applications that export SVG (like InkScape, Fireworks< and Webcode), but the most popular are Illustrator & Sketch. When exporting from these applications I noticed some of differences. Overall, Illustrator exports messy SVG code and Sketch exported clean code with some extra perks. So overall when exporting SVG file — I recommend Sketch.

If you want to know more about SVG Exporting, Alex Walker did a post about this on Sitepoint.

Styling Properties

There are so many properties you can use when animating SVGs its AMAZING! You can look at the SVG Styling Properties Documentation to see all the attributes. Some of these styling you might be familiar with from CSS. Below I have pulled out the styling properties that are unique to SVGs.

SVG Animation Syntax

What is SMIL

Now for the nerdy stuff: what is SMIL and how does it relate to SVG? SMIL Stands for Synchronized Multimedia Integration Language, and it is the animation language to which SVG is a host. SVG’s animations have the constraints and features that are permitted by the SMIL Animation Spec but thats not all! In addition to SMIL constraints SVG’s have additional capabilities defined by W3 SVG Animation Spec, such as animateTransform, path, & keyPoints.

SVG animations are similar to CSS animations because they have keyframes, easing curves, etc. but, it’s presented in a different syntax. One of the downsides of SMIL is that it doesn’t work with any version of IE and Opera Mini. CanIUse

The <animate/> Element

The <animate/> element is used to animate a single attribute or property over time.

The basic structure:

  • xlink:href — selects the element you want to animate. If xlink:href is not defined the animation will default to its parent element.
  • attributeName — defines the attribute of the element selected.
  • from -> to — defines the values of the attribute you are animating. Think of them as the same as from to in CSS.
  • dur — duration of animation, similar to the animation-duration in CSS.
  • fill — same concept as animation-fill-mode property in CSS. It defines what to do with the element after the animation is finished.

Now lets look how this looks like when translated to CSS. I added color highlights so you can see where the attributes go when translated from SVG to CSS.

Getting fancy with Keyframes:

  • values — Above we defined from and to, with the values we are defining how that changes over time in more detail just like keyframes.
  • keyTimes — keyTimes is defining the % of the animation. The order of keyTimes correlates directly to the order of values. The keyTimes list has to start with 0 and 100

Now lets look how this looks like when translated to CSS. I added color highlights so you can see where the attributes go when translated from SVG to CSS.

Getting EVEN fancier with Easing Curves:

So how to you make the BEAUTIFUL easing curves with SVG animation? I will show you how!

Above you see the CSS @keyframe animation structure on the left and on the right the SVG animation structure. I added color highlights so you can see how the attributes go when translated from CSS to SVG.

Note there is no CSS property called cy. I have it there as a place holder to gain a better understanding of SVG animation structure.


  • cy property = attributeName=”cy”
  • cy value = values
  • @keyframes animation % = keyTimes
  • animation-tmining-function = keySplines

Things that don’t translate from CSS to SVG animation are pre-defined cubic-bezier’s. For example: ease-in in CSS = cubic-bezier(0.47, 0, 0.745, 0.715) in SVG. There is a great tool by Lea Verou that does these calculations for you. To understand more about motion curves check out my other post Ae to CSS — where I dive into this subject in a little more detail.

Other Cool Things:

  • Animate along path with <animateMotion>
  • Interactivity (kinda) Starting animation with Click begin=”click”

How I Animate

  1. Define Shape/Path for Animation
  2. Define Property to Animate
  3. List out Property Values
  4. Define Percentage over time for those values.
  5. Map out the easing curves between keyframes.


Thanks to Sara Soueidan and her wealth of knowledge of SVG’s and for helping me with this learning curve!

Thanks to Una Kravets for helping review this post!

If you liked this post — Follow me on Twitter: @ryan_brownhill

Ryan Brownhill

Written by

Product Designer @Instagram. I like to make beautiful things that move. Follow me @ryan_brownhill on all social media