Siwicki

Creating SVG With Snap

March 01, 2015

This morning I wanted to start playing with SVG. Snap.svg is a JavaScript SVG library that allows you to create, animating and manipulating either existing SVG or elements you have made in Sketch or Illustrator.

To get started we just create an empty svg with and id.

<svg id="svg"></svg>

Next we need to active Snap onto our svg element.

var s = Snap("#svg");

Now, lets draw some stuff.

var circle_1 = s.circle(200, 200, 140);
var circle_2 = s.circle(150, 200, 140);

To break down the attributes of circle_2 the x-axis coordinate is 150 and the y-xis is 200 and 140 is the radius of the circle.

Then lets group the elements together.

var circles = s.group(circle_1, circle_2);

We can add attributes now to our circles group. Lets just add a little fill color and some opacity.

circles.attr({
  fill: 'mediumturquoise',
  fillOpacity: .6
});

Snag is a powerful library. It feels like that jquery of SVG. Next up, I want to see how to animate a previous SVG I made in Sketch.


John SiwickiWritten by John Siwicki who lives and works building interesting things. You should follow him on Twitter