Introducing Snap.svg

One of the best ways of presenting graphics online is as scaleable vector graphics. That’s because SVG can adapt to any screen size, without losing quality.

The increased demand for the format has lead to the open source Snap.svg library.

What is Snap.svg?

Snap is a JavaScript library that aims to help web developers bring advanced SVG features to the Web. This library can load, animate or even create SVG graphics right in the browser.

Snap was written by Dmitry Baranovskiy who was also the writer of Raphael but unlike Raphael this library is made for top level browsers.

Creating simple SVG graphics

Once you’ve downloaded the library and included it in your page, the first thing you need to do is create an SVG HTML element, like so:

<svg width=”0” height=”0”></svg>

Next, instantiate the snap library:

var s = Snap();

By omitting parameters our drawing surface will automatically be sized to 100% x 100%, but if you want to supply a specific width and height you can do so:

var s = Snap(800, 800);

Next, we can start to build some simple shapes:

var circle = s.circle(200, 200, 100);

This code creates a simple circle 100px in radius, that is positioned 200px from the top and left of our page.

The default background fill of a shape is black, but we can change that, along with the stroke and stroke width, using the attr method:

circle.attr({
fill: "#6A8EAB",
stroke: "#fff",
strokeWidth: 3
});

Of course we can also create other shapes with Snap, such as rectangles:

var r = s.rect(100, 100, 75, 75, 5);

This code creates a rectangle 100px from the top and from the left of the drawing area, with a width and height of 75px and a 5px border radius.

We can also add text:

var t = s.text(50, 50, "Developer Drive");

We can even add things like polygons, ellipses and gradients.

If we have more than one element on the drawing surface Snap allows us to group them, like so:

var circles = s.group(s.circle(100, 150, 70), s.circle(200, 150, 70));

Snap also gives us the ability to animate our elements. To make the circle element above smaller, over the course of 2 seconds I just need something like:

circle.animate({r: 50}, 2000);

This is just the very beginning of creating elements with Snap, you can also create masks, pattern fills, and much more.

Loading external SVG elements

One of the biggest advantages of Snap is being able to load existing SVGs:

Snap.load("image.svg", function (f) {
// Code
});

All this code does is import the SVG file, in order to place it on our drawing board we need to append it:

Snap.load("image.svg", function (f) {
g = f.select("g");
s.append(g);
});

Now that we have it on our drawing board we can also make it draggable by simply adding after the image is appended:

g.drag();

And like the elements we saw previously we can also change the attributes in our image like the fill color or stroke. But we should do this before the image is appended to our board:

f.select("polygon[fill='#000']").attr({fill: "#FF0000"});

As you can see, the select method allows us to search through our elements. In this case we search for any polygons with a black background and then changed the background color to red.

Conclusion

Snap.svg has a lot to offer when it comes working with SVG on the web.

There really is no limitation when it comes to using this library if you check the demos you can see that even games can be built using this amazing library.

What’s the most challenging aspect of working with SVG? Have you tried out Snap.svg? Let us know in the comments.