Animating a More Advanced Icon with Snap.svg

How great would it be if we could animate an SVG graphic and implement it for web use? In this tutorial, we’ll be doing just that. Let’s go over how to create a relatively simple icon in Inkscape and apply some neat animations using Snap.svg.

If you’re new to this, I highly recommend reading this quick beginner tutorial first and then coming back to this one.

The Final Result

(Hover and click to scroll)

1. Draw an Icon

Step 1

Let’s start by drawing two squares and convert the white one with Path > Object to Path.

draw two squares

Step 2

Just for fun, let’s add a small drop shadow with Filters > Shadows and Glows > Drop Shadow.

add drop shadow

Step 3

Of course, we’ll want to assign an ID and Label with Object > Object Properties.

assign id inkscape

Step 4

This may seem strange, but let’s draw a rectangle that is 50% of the icon’s height and 100% wide, then remove any fill or stroke. We’ll be using this invisible rectangle as an activator for the upcoming animation. Also, assign an ID/Label to this rectangle as well.

inkscape invisible rectangle

Step 5

Let’s repeat the same thing, but for the bottom 50% of the icon.

inkscape interactive

Step 6

When you’re done, head up to File > Save As and change the type to Plain SVG.

save as plain svg

2. Animating the Icon

With Snap.svg, we’ll be using a combination of HTML, CSS, Javascript/jQuery to create the animation. For this part of the tutorial, I’ll just lay down all of the code and explain it a bit.


First, open the SVG file in a text/code editor and look for rectWhite. When you do, copy the d value as we’ll be needing this for the actual animating.


Let’s go over the most complicated - the Javascript. First, we just refer to the SVG file we made earlier, and add the IDs for the shapes.

Below is the actual animation script. This is where we need that d value earlier, because those are the actual node positions for rectWhite. When the top of the icon is hovered (rectTop), I change the 3rd node from 150,150 to 80,80 which turns the square into an arrow shape. I also ran a transform to rotate by 45 degrees around its center point. When the top of the icon is not hovered, it simply returns to the original values.

I also repeat this for rectBottom, but the opposite.

And now it’s time to add some actual functionality to this icon. When the top or bottom is clicked, it scrolls accordingly with a smooth jQuery animation. I’ve also made it so that rectWhite changes to a gray fill when it’s being clicked.


Here’s a little styling for later on. Oh yeah, I added a little CSS box shadow to the icon DIV holder.


To wrap it all up, we’ll need the HTML. I start by importing my CSS stylesheet (style.css), animation script (icon.js), Snap.svg API (snap.svg-min.js), and the jQuery script. Finally, I’ve added the iconDiv in which to have the icon appended to, along with a few DIVs for some content to scroll through.

Run the Code!

All that’s left to do is upload everything accordingly and run the index.html. Below is the final result, and it really does look engaging.

We’re Done!

Whew, that was a lot to take in! By using Inkscape to design a simple icon, we were able to use Snap.svg to create an animated icon that actually does something useful. You can also get super fancy and create a working clock using Snap.svg. Thanks for reading!

Want to learn more?

Improve your design skills

Add a Comment

Your email address will not be published.

+ 9 = 14

Copyright 2015 GoInkscape! - Privacy - Disclosure - Contact Us
Keep Reading!
inkscape snap.svg animation tutorial
Snap.svg Animation Tutorial for Beginners

This will be the easiest, most beginner focused tutorial for using Inkscape and Snap.svg to animate SVG graphics. If you...