Snap.svg vs Svg.js

Question

I tried to find a suitable SVG library for modern browsers. My goal is to decide which library is suitable for creating a simple online SVG editor, for example. edit text and paths and crop text using paths.

I found two libraries that might be suitable: Snap.svg and Svg.js.

---

SNAP.SVG

Github: https://github.com/adobe-webplatform/Snap.svg
Source Codes: 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 Codes: 3604 Github Stars: 1905
Doc: https://svgdotjs.imtqy.com/

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 pretty similar.

What are the main differences between the two libraries?

Answer 1

I am the creator of svg.js (so I'm biased too :). You will have to try both of them and see what suits you best. With SVG.js, I try to make the syntax more based on javascript, therefore more dynamic, whereas Snap often uses string-based syntax. This leads to the fact that the resulting code is often read by a person in SVG.js, which I obviously prefer. Take the 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) 

Snap.svg syntax is a bit more concise, SVG.js code is more readable. So this is really a matter of taste.

As a rule, SVG.js is much more object oriented. All of this is class, even up to numbers and colors and therefore extensible. Due to the structure of OO, it is extremely easy to write plugins and extend existing objects at any level.

Answer 2

I initially tried Snap, as it had a good site and seemingly good documentation. After a few questions that I could not explain, I decided to try SVG.js. I cannot determine why, but SVG.js seems easier to write; more intuitive. I'm not saying that Snap is bad, but it doesn’t match my style, and the documentation was a bit poor in content.

Answer 3

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

Since both are essentially interfaces to the basic SVG specifier, you can also do most of the things, so I wouldn't worry too much about the choice. The solutions will be similar, not see the difference.

I have more experience with Snap (so biased), but looking at the docs, my impressions are that svg.js seems to have a bit more sugar for some aspects like animation and text, while maybe Snap has a bit more to do with things like Matrices (which I found very useful as I sometimes fear them) and seem to support a few extra things like touch elements (I suspect they are available somehow, and partially dependent on browser support, but things like touch support could t become increasingly important with svg).

Ultimately, I just get the coding in one or the other, and don't worry about it. I think that if you understand SVG, you can easily exchange among themselves if you ever need to.