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.
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.
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
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:
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
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!
<animate xlink:href="#mouth" attributeName="height" from="2" to="10" begin="0s" dur=".25s" fill="restart" repeatCount="indefinite" />
What Does It All Mean?
<animate> element is meant to work with shapes that don't move along a path. Things like resizing an image, changing colors etc.
This tells the animation to affect the
#mouth id selector (the layer we named mouth in Illustrator).
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
Now we will instruct the
height to change
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
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.