An Intro to SVG Animation

Scalable Vector Graphics (SVG) is an XML-based vector image format that is becoming increasingly more popular with web designers. The SVG specification is an open standard being developed by the W3C since 2001.

All major modern web browsers have at least some degree of SVG rendering support (IE sadly doesn't support SMIL animations yet). In this article I'll show you how simple SVGs actually are to understand by exporting an illustration from Adobe Illustrator and animating the code it gives us.

The Illustration:

A few rectangles, circles, polygons and paths. That's what little boys are made of. And by little boys I mean me, dressed up as wizard.

img

Layer Structure is Important

If your layers are messy your code is going to be messy. No one likes things that are messy.

The svg code will be layered based on the organization of your groups and layers in Illustrator’s layers window. You can think of layer groups as a <div> container. By grouping your layers, which results in a <g> element in the svg code, you can affect the child elements within that <g>.

For those familiar with After Effects you can think of it as having child and parent relationships. A parent that moves will move all of its children in a similar manner, whereas a child that moves won't affect its parent or any of its siblings.

Illustrator Layers and Groups

I have ordered and grouped my layers in the following way:
image

avatar-ryan
|hat
||stars
|||star-top
|||star-2
|||star-3
|||star-bottom
||hat-main
|monocle
||monocle-glare
||monocle-ring
||monocle-chain
||monocle-shadow
|||monocle-shadow top
|||monocle-shadow bottom
|||monocle-shadow chain
|||monocle-shadow handle
|eyes
||right-eye
|||right-eye pupil
|||right-eye cornea
||left-eye
|||left-eye pupil
|||left-eye cornea
|mouth
|body

SVG Elements

Once we export our perfectly layered artwork to svg we can begin to play with it. I like to take the code generated by Adobe Illustrator and clean it up a bit. I’ll remove un-needed code to reduce file-size, make sure layer names exported correctly, and reformat it.

Cleaner Code:

Cleaned up and easier to work with for when we want to do crazy things like ANIMATING IT!

The Animation

<animate
    xlink:href="#mouth"
    attributeName="height"
    from="2"
    to="10" 
    begin="0s"
    dur=".25s"
    fill="restart"
    repeatCount="indefinite"
/>

What Does It All Mean?

<animate

The <animate> element is meant to work with shapes that don't move along a path. Things like resizing an image, changing colors etc.

xlink:href="#mouth"

This tells the animation to affect the #mouth id selector (the layer we named mouth in Illustrator).

attributeName="height"

Next we need to identify which attribute of the #mouth id we want to animate. In this case it is the height of the #mouth that we will change to make it open and close as if speaking to the user.

begin="0s"

We want the animation to begin as soon as it is loaded which is why we are using begin="0s".

    from="2"
    to="10" 

Now we will instruct the height to change from="2" units to="10" units.

dur=".25s"

By setting a time duration of dur=".25s" we can instruct the height unit to change from 2 to 10 in a quarter of a second. (This will make the animation play out one time).

fill="restart"

We can reset the animation to esentially its first frame by setting fill="restart".

repeatCount="indefinite"

What good is an animation that plays out so quickly only one time? By setting repeatCount="indefinite" the animation will loop and play for all eternity.

If you are interested in more ways to animate SVG's you can read all the delicious details at the w3c's site.

If you have any SVG illustrations you are proud of I would love to be inspired by them. Send them to me on twitter or dribbble.