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 haven’t heard, Snap.svg is a Javascript API that makes it very easy to animate SVG for the web. In this tutorial, we’ll be drawing a very simple icon in Inkscape and then use Snap.svg to animate it.

The Final Result

(Hover your mouse over the icon)

1. Drawing the Icon

Step 1

I have a 100px by 100px document, so let’s start by drawing a square of that size as well.

Step 2

This is the important part: assign IDs and Labels to everything! Head up to Object > Object Properties and name each object as something logical, such as blueRect. Make sure you click Set when you’ve named your objects.

Step 3

Next, I’m just going to draw another white square in the center of the icon. Of course, I’ll assign an ID and a Label.

Step 4

Finally, I’m going to group my objects together and label it as icon.

Step 5

With the icon drawing finished, head up to File > Save As and change the Save as type to Plain SVG, then save into its own folder.

2. Animating with Snap.svg

Step 1

Well, I suppose now is a good time to actually download Snap.svg here. The particular file in the Snap download we want is named snap.svg-min.js, which we’ll want to place into the same folder as the SVG file.

Step 2

To use Snap.svg, you’ll need a very small amount of experience with HTML and Javascript. Start by opening the icon.svg file in your favorite text/code editor. Below, I have found the code for my whiteRect, which is what we’ll be animating for the icon. For this specific animation, I need the original Y value, which is 977.36218.

Step 3

Now we need to make an HTML file to render everything, so go ahead an create a normal index.html file in the same folder as your SVG file. This may be a lot at once, but below is my full index.html code, but it’s also fully commented for your convenience!

Step 4

In the code above, you’ll notice that the actual animation code simply subtracts the Y to make it rise on hover, then return to the original Y when not hovered. I’ve also added an elastic effect to the animation for some added fun. When you run this index.html file in a browser (preferably from a server), you end up with this:

That’s It!

If you like this idea and are ready to move on with something more advanced, read Animating a More Advanced Icon with Snap.svg.

First of all, the end result of this may be simple, but it’s absolutely revolutionary. The ability to render and animate a vector graphic created in Inkscape so fluidly is amazing. With so many different web devices with so many resolutions, the infinite definition and scalability of vector will no doubt become the new standard for web graphics. Thanks for reading!