How to get started with Snap.svg

Animating and transversing SVG files with Javascript is actually not such an easy task and plugins like Snap.svg make our lives much easier when it comes to animating our SVG files.

This library is one that aims to help Web Developers easily bring advanced SVG features to the Web, with it we can load, animate and even create SVG graphics right in the browser.

The creator of this plugin is also the creator or Raphael, also an SVG plugin. The main difference between these two resources is that Snap aims only at top level browsers not worrying much about backwards compatibility and that allows it to have much more advanced characteristics.

Getting started

In order to get started with Snap.svg we need to head over to their website and download the latest version. After we’ve downloaded the zip file we need to insert the Snap Javascript file into our HTML:

<script src=“js/snap.svg-min.js”></script>

After this is done we can start playing around with the plugin and we are going to start by creating our drawing surface , and this surface is where our SVG file will be placed:

var s = Snap(800,800);

In my case I created a new surface but we can also call the snap function to an already existing element like so:

var s = Snap(“#element”);

Both these ways are great, it all depends on your project and what you trying to accomplish with the plugin. Now that we have initialized the plugin it’s time to get our file in the HTML.

Inserting the SVG and animating it

To insert an external SVG file we need to call the load function and this function takes two parameters, the first one is the file we want to insert and the second is the callback function, this is the function that will run when the file is placed on the page. This means that this is the function where all our animation code will be placed.

Snap.load(“img/wdd.svg”, onSVGLoaded ) ;

The load function is this simple, it loads the file and then calls the function and in this function we need to append the file to our page :

function onSVGLoaded( svg ){ 
    s.append( svg );
}

This is all we need to properly show the SVG on our page and have it ready for snap to mess around with.

Now, let’s move on to animate and transform this SVG file with Javascript. It’s worth mentioning that all this transforming and animating code will go before the append function but inside the onSVGLoaded function. First of all let’s try to change the color of the rectangle we have:

svg.select(“rect[fill=‘#AD6F6F’]").attr({fill: "#5D9170"});

As you can see from the line I got the svg and selected a rectangle that had that background and then changed the atribute of it to another color. You can do this with any attribute in the SVG file and the syntax it’s pretty self explanatory but this doesn’t animate the rectangle , it just changes its color.

Let’s try to animate the circle’s radius, first we need to get the circle and assign it to a variable:

var circle = svg.select(‘circle’);

After this is done we can call the animate function to that same variable and pass in the radius as a parameter:

circle.animate({r: 20}, 1000);

As you can see this function takes two parameters , the first one is the attributes ( key and value, in this case the key is radius and value one is 20 ) and then we have the duration which is how long the animation will last.

If you been following this long you can see that when you load up the page the circle does animate and shrinks down. From this you can see what you can do with this and we can even change the line when we change the color of the fill in the rectangle to have it animate like so:

svg.select(“rect[fill=‘#AD6F6F']").animate({fill: "#5D9170"},1000);

As you can see I changed attr to animate and also added the duration of the animation and it’s already working.

The last thing I want to do with this is to make this rectangle wider and place the text there and this means I have to animate the rectangle’s width and the text position. Firstly I want to make the rectangle bigger:

var rect = svg.select(‘rect’);

rect.animate( { width: 500 }, 1000 );

As you can see all I really did was animate the width to 500. The last thing we need is to move the text and for that we need to change the text’s x and y values:

var text = svg.select(‘text’);

text.animate({y: -200,x: 150}, 1000);

In this case I wanted to call two atributes so I separated them with commas and moved the text 200px up and 150px to the right.

The full code would look something like:

var s = Snap(800,800);
Snap.load("img/wdd.svg", onSVGLoaded ) ;

function onSVGLoaded( svg ){ 
    svg.select("rect[fill='#AD6F6F']").animate({fill: "#5D9170"},1000);
    var circles = svg.select('circle');
    var rect = svg.select('rect');
    var text = svg.select('text');
    rect.animate( { width: 500 }, 1000 );
    circles.animate({r: 0}, 1000);
    text.animate({y: -200,x: 150}, 1000);
    
    s.append( svg );
}

And if you would like a demo you can see it here.

Final Thoughts

SVG is a powerful format for the Web, it’s the only format that was designed specifically for the Web and it gives us abilities we don’t have with other image formats, just the fact that it can be copied in code and pasted to our HTML file gives us freedom we really never had with bitmap image files.

Hopefully you got into SVG and really understood the reason so many people are adopting it and are behind it.