A Brief Intro to Motion Design with SVG

Ryan Allen
Dec 11, 2014 · 3 min read

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 doesn’t support SMIL animations yet). In this article I’ll show you how simple SVG’s actually are to understand by exporting an illustration from Adobe Illustrator and performing a very basic animation with 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.

I agree with what you are thinking. I am very handsome.

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.

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

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.

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

The Animation


Here is a link to the animation code <!— YOU SHOUD CLICK ME —>

Here is a link to the animation <! — YOU SHOUD CLICK ME 2 — >

What Does It All Mean?

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

This tells the animation to affect the #mouth id selector.

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.

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

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

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).

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

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.

Originally published at articles.dappergentlemen.com on December 10, 2014.

Ryan Allen

Currently designing @godaddy

Ryan Allen

Written by

Designer of things | @ryanallen_com

Ryan Allen

Currently designing @godaddy