Snap.svg vs Svg.js [closed]

Question

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.

Leave a Comment Cancel reply