In this tutorial we're going to introduce Snap.svg, a JavaScript library which assists in animating and manipulating SVG content. To demonstrate some of the features available, we're going to animate an SVG eye.
What is Snap.svg ?
Snap.svg is a JavaScript library which makes it easy to create and manipulate SVG graphics for modern browsers. It is the successor to Dmitry Baranovskiy's Raphaël; the most popular Javascript library for working with SVG.
Raphäel
Raphäel.js is a great library. Released in 2008, its biggest win was its support for browsers from IE 5.5 onwards. However, supporting so many browsers was limiting and meant that it couldn't implement the latest developments, instead relying on a common subset of SVG features.
After a while the Raphäel.js community divided in two, one group which relied on it for cross browser compatibility, and other one which used it for creating SVGs. This latter group demanded changes to support more SVG features which Raphäel.js couldn't handle.
Hence Snap.svg was built, written entirely from scratch by Dmitry Baranovskiy (of the Adobe Web Platform team), in order to work with SVG more easily and using the latest that SVG can offer; features like masking, patterns, gradients, groups, animations and more.
What Can You do With Snap.svg?
Take a look at their API documentation and you will see features like mask, group, gradient, filter, animate and pattern, all of which you can apply to SVGs.
Snap.svg will help you generate graphics, but it can also work with existing SVG. This means that your SVG content does not necessarily have to be created with Snap.svg, you're also free to manipulate graphics created with tools like Adobe Illustrator, Inkscape, or Sketch.
Getting Started With Snap.svg
Download
Firstly, you'll need to download Snap.svg. With that done, you'll find the following in the archive:
- demos - here are some examples, which you can also find on the Demo section of their website
- dist - this is the minified and uncompressed (for development) snap.svg script
- doc - here you'll find the API documentation which is also available on snapsvg.io
- src - these are the components, tools and plugins which make up Snap.svg, like animate, paper, running a Grunt task etc.
- test - this directory contains unit tests for Snap.svg
Setting up a Project
Having downloaded the Snap.svg resources, begin a new web project which needs to include:
- index.html - the main HTML file
- js/snap.svg.js - the snap.svg plugin
- js/main.js - our main workspace
Create an HTML template and reference "scripts/snap.svg.js" and "scripts/main.js" scripts somewhere on your page.
After that, place an <svg> container inside the <body> and give it an id. You should have something a little bit like this:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Introducing Snap.svg</title><script src="js/snap.svg.js"></script><script src="js/main.js"></script></head><body><svg id="svg"></svg></body></html>
Working With SVG
Let's now jump directly into coding. To follow along you'll need some basic JavaScript knowledge and understanding, but it doesn't matter too much because we're not going too deep with this tutorial.
Firstly, we'll initialise Snap, pointing to the svg just created and assign it to a variable. In our case the variable is called s
var s = Snap("#svg");From now on, within the s variable we'll have access to all Snap.svg methods. For example, let's say that we want to create a circle, or a rectangle.
- Circle can take three arguments x,y and radius (check Circle API)
- Rectangle can take six arguments: x, y, width, height, horizontal radius and vertical radius (check Rect API)
- Ellipse can take four arguments: x , y, horizontal radius and vertical radius (check ellipse API)
// Circle with 80px radius var circle = s.circle(90,120,80); // Square with 160px side width var square = s.rect(210,40,160,160); // Ellipse with 80px vertical radius and 50px horizontal radius var ellipse = s.ellipse(460,120,50,80);
The code above will generate the following result:
As you can see from attached screenshot, the shapes, by default have a #000 ( black ) fill color without any other styling. Let's interact with them and add some more styling attributes, like fill color, fill opacity, stroke color, stroke width, stroke opacity. You can check SVG Attributes for more details.
circle.attr({
fill: 'coral',
stroke: 'coral',
strokeOpacity: .3,
strokeWidth: 10
});
square.attr({
fill: 'lightblue',
stroke: 'lightblue',
strokeOpacity: .3,
strokeWidth: 10
});
ellipse.attr({
fill: 'mediumturquoise',
stroke: 'mediumturquoise',
strokeOpacity: .2,
strokeWidth: 10
});These attributes have made our svg shapes much prettier!
Further SVG Manipulation
Let's take our example and go beyond the basics.
Grouping Shapes
Snap.svg uses a powerful weapon called group, which, as the name suggests, groups vectors together, making them one shape. You can group as many shapes as you want by adding them as a list.
Let's create two circles, group them and lower the fill of each circle to visualise more clearly what's going on.
var circle_1 = s.circle(200, 200, 140);
var circle_2 = s.circle(150, 200, 140);
var circles = s.group(circle_1, circle_2);
circles.attr({
fill: 'coral',
fillOpacity: .6
});
Masking Shapes With Other Shapes
Let's now say that we want to create an imaginary eye using the grouped elements we've already made. We can do so using mask. First we need to create an extra ellipse and place it in the middle of the group.
var circle_1 = s.circle(300, 200, 140);
var circle_2 = s.circle(250, 200, 140);
var circles = s.group(circle_1, circle_2);
var ellipse = s.ellipse(275, 220, 170, 90);
circles.attr({
fill: 'coral',
fillOpacity: .6,
});
ellipse.attr({
opacity: .4
});
Now we need to mask the circles with our ellipse, adding a different fill color to the ellipse:
circles.attr({
fill: 'coral',
fillOpacity: .6,
mask: ellipse
});
ellipse.attr({
fill: '#fff',
opacity: .8
});
Animating Shapes
Continuing with our example, we can make this eye blink, by adding an animate method. To animate the ellipse we just created, we'll modify the vertical radius from 1 to 90 (which is the current value) and back again.
Create the animation and wrap it inside a function called blink.
function blink(){
ellipse.animate({ry:1}, 220, function(){
ellipse.animate({ry: 90}, 300);
});
};This states that we are going to animate from ry: 90 to ry: 1 and from ry: 90 to ry: 1 with different timing.
Now create a setInterval to call the blink method once every three seconds, in order to create a blinking effect.
setInterval(blink, 3000);
The final code should look like this:
var circle_1 = s.circle(300, 200, 140);
var circle_2 = s.circle(250, 200, 140);
// Group circles together
var circles = s.group(circle_1, circle_2);
var ellipse = s.ellipse(275, 220, 170, 90);
// Add fill color and opacity to circle and apply
// the mask
circles.attr({
fill: 'coral',
fillOpacity: .6,
mask: ellipse
});
ellipse.attr({
fill: '#fff',
opacity: .8
});
// Create a blink effect by modifying the rx value
// for ellipse from 90px to 1px and backwards
function blink(){
ellipse.animate({ry:1}, 220, function(){
ellipse.animate({ry: 90}, 300);
});
};
// Recall blink method once every 3 seconds
setInterval(blink, 3000);
Browser Support
As mentioned previously, these features are supported in modern browsers: IE9+, Safari, Chrome, Firefox, and Opera.
Open-Source and Free
Snap.svg is available under an Apache 2 license which means it’s completely open-source, and completely free.
Conclusion
Snap.svg lowers the barrier for some pretty amazing SVG manipulation. I hope you enjoyed following along and that it's inspired you to look further into SVG!
Useful Links
