Image for post
Image for post

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 is an open standard being developed by the W3C since .

have at least some degree of SVG rendering support (). 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.

Image for post
Image for post
I agree with what you are thinking. I am very handsome.

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 . You can think of as a <div> container. By grouping your layers, which results in a 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 in the following way:

Image for post
Image for post

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

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?


The > 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”.

from=”2" to=”10"

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 .

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

Originally published at on December 10, 2014.

Ryan Allen

Currently designing @godaddy

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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