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.