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.…

Accepted Answer

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.

Snap.svg vs Svg.js

Solution

Problem