Snap.svg vs Svg.js

Question

I have tried to find a proper SVG library for modern browsers. My goal is to decide, what library is suitable for creating simple online SVG editor with eg. text and path editing and clipping text with paths.

I found two libraries, which may be suitable: Snap.svg and Svg.js.

---

SNAP.SVG

Github: https://github.com/adobe-webplatform/Snap.svg
Source code lines: 6925 Github Stars: 3445
Doc: http://snapsvg.io/docs/
Getting started: http://snapsvg.io/start/
Starter example (JSBIN)

var draw = Snap(800, 600);

// create image
var image = draw.image('/images/shade.jpg', 
                       0, -150, 600, 600);

// create text
var text = draw.text(0,120, 'SNAP.SVG');

text.attr({
  fontFamily: 'Source Sans Pro',
  fontSize: 120,
  textAnchor: 'left'
});

// clip image with text
image.attr('clip-path', text);

---

SVG.JS

Github: https://github.com/svgdotjs/svg.js
Source code lines: 3604 Github Stars: 1905
Doc: https://svgdotjs.github.io/

Starter example (JSBIN):

var draw = SVG('drawing');

// create image
var image = draw.image('/images/shade.jpg');
image.size(600, 600).y(-150);

// create text
var text = draw.text('SVG.JS').move(300, 0);
text.font({
  family: 'Source Sans Pro',
  size: 180,
  anchor: 'middle',
  leading: '1em'
});

// clip image with text
image.clipWith(text);

---

Usage seems to be rather similar.

What are the main differences between these two libraries?

Answer 1

I am the creator of SVG.js (so I'm biased too :). You'll have to try them both and see what suits you best. With SVG.js I try to keep the syntax more javascript based so everything is more dynamic, whereas Snap often uses a string based syntax. This makes the resulting code often more human readable in SVG.js, which I obviously prefer. Let's take a gradient as an example.

SNAP.SVG:

var g = paper.gradient("L(0, 0, 100, 100)#000-#f00:25%-#fff");

paper.circle(50, 50, 40).attr({
  fill: g
});

SVG.JS:

var g = draw.gradient('linear', function(stop) {
  stop.at(0, '#000')
  stop.at(0.25, '#f00')
  stop.at(1, '#fff')
})

draw.circle(80).center(50,50).fill(g)

The Snap.svg syntax is a bit more concise, the SVG.js code is more readable. So it's really a matter of taste.

Generally SVG.js is much more Object Oriented. Everything is a class, even down to numbers and colors and are therefore extendible. Because of the OO structure it is extremely easy to write plugins and extend existing objects on any level.

Answer 2

I originally tried Snap as it had a nice website and seemly good documentation. After a few issues that I couldn't explain, I decided to try SVG.js. I can't pinpoint why, but SVG.js seems easier to write; more intuitive. I'm not saying that Snap is bad, but it doesn't fit my style, and the documentation was a little sparse in content.

Answer 3

I'm not sure you are going to get an unbiased answer, as most people will have experience of one or the other.

As both are essentially interfaces to the underlying SVG spec, you should be able to do most things with either, so I wouldn't worry too much about picking either. Solutions will be similar, rather than seeing differences.

I've more experience with Snap (so biased), but looking at the docs, my impressions would be that svg.js seems to have a bit more sugar to some aspects like animations and text, whereas maybe Snap has a bit more towards things like Matrices (which I've found very useful as I struggle with those sometimes), and seem to support a few extra things like touch elements (I suspect they are available in both somehow, and partly dependent on browser support though, but things like touch support may become increasingly important with svg).

Ultimately, I'd just get coding in one or the other and not worry about it. I think if you understand SVG you will be able to swap between them relatively easy if you ever need as well.