Image for post
Image for post

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

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

Styling Properties

Image for post
Image for post

SVG Animation Syntax

What is SMIL

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 basic structure:

<animate
xlink:href="#your-item"
attributeName="cx"
from="20"
to="450"
dur="1s"
fill="freeze"
/>
  • 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.

Image for post
Image for post

Getting fancy with Keyframes:

<animate
xlink:href="#your-item"
attributeName="cx"
from="20"
to="450"
dur="1s"
fill="freeze"
values="20; 10; 30; 40; 450"
keyTimes="0; .25; .5; .75; 1"
/>
  • 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.

Image for post
Image for post

Getting EVEN fancier with Easing Curves:

Image for post
Image for post

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.

CSS to SMIL:

  • 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:

  • Interactivity (kinda) Starting animation with Click begin=”click”

How I Animate

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

Resources:

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

Written by

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store