Snap.svg vs Svg.js [geschlossen]

Ich habe versucht, eine geeignete SVG-Bibliothek für moderne Browser zu finden. Mein Ziel ist es zu entscheiden, welche Bibliothek zum Erstellen eines einfachen Online-SVG-Editors mit z. Text und Pfad bearbeiten und Text mit Pfaden ausschneiden.

Ich fand zwei Bibliotheken, die geeignet sein können: Snap.svg und Svg.js .

SNAP.SVG

Github: https://github.com/adobe-webplatform/Snap.svg
Quellcodezeilen: 6925 Github Stars: 3445
Doc: http://snapsvg.io/docs/
Erste Schritte: http://snapsvg.io/start /
Starterbeispiel ( 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
Quellcodezeilen: 3604 Github Stars: 1905
Doc: https://svgdotjs.github.io/

Starterbeispiel ( 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);

Die Verwendung scheint ziemlich ähnlich zu sein.

Was sind die Hauptunterschiede zwischen diesen beiden Bibliotheken?

Ich bin der Schöpfer von SVG.js (also bin ich auch voreingenommen :). Sie müssen beide ausprobieren und sehen, was am besten zu Ihnen passt. Mit SVG.js versuche ich, die Syntax stärker auf Javascript zu halten, damit alles dynamischer ist, während Snap häufig eine auf Zeichenfolgen basierende Syntax verwendet. Dies macht den resultierenden Code in SVG.js oft besser lesbar, was ich natürlich bevorzuge. Nehmen wir als Beispiel einen Farbverlauf.

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)

Die Snap.svg-Syntax ist etwas präziser, der SVG.js-Code ist besser lesbar. Es ist also wirklich Geschmackssache.

Im Allgemeinen ist SVG.js viel objektorientierter. Alles ist eine Klasse, bis auf Zahlen und Farben und daher erweiterbar. Aufgrund der OO-Struktur ist es extrem einfach , Plugins zu schreiben und vorhandene Objekte auf jeder Ebene zu erweitern.

Ich habe Snap ursprünglich ausprobiert, da es eine schöne Website und eine scheinbar gute Dokumentation hatte. Nach einigen Problemen, die ich nicht erklären konnte, entschied ich mich, SVG.js auszuprobieren. Ich kann nicht genau sagen warum, aber SVG.js scheint einfacher zu schreiben; intuitiver. Ich sage nicht, dass Snap schlecht ist, aber es passt nicht zu meinem Stil, und die Dokumentation war inhaltlich etwas spärlich.

Ich bin mir nicht sicher, ob Sie eine unvoreingenommene Antwort erhalten werden, da die meisten Menschen Erfahrung mit dem einen oder anderen haben werden.

Da beide im Wesentlichen Schnittstellen zur zugrunde liegenden SVG-Spezifikation sind, sollten Sie in der Lage sein, die meisten Dinge mit beiden zu tun, sodass ich mir auch keine Sorgen um die Auswahl machen würde. Die Lösungen werden ähnlich sein, anstatt Unterschiede zu erkennen.

Ich habe mehr Erfahrung mit Snap (so voreingenommen), aber wenn ich mir die Dokumente ansehe, würde ich den Eindruck haben, dass svg.js in einigen Aspekten wie Animationen und Text etwas mehr Zucker zu haben scheint, während Snap vielleicht etwas mehr mit Dingen zu tun hat wie Matrizen (die ich als sehr nützlich empfunden habe, da ich manchmal mit diesen zu kämpfen habe) und scheinen ein paar zusätzliche Dinge wie Berührungselemente zu unterstützen (ich vermute, dass sie in beiden irgendwie verfügbar sind und teilweise von der Browserunterstützung abhängen, aber Dinge wie Touch-Unterstützung kann mit svg) immer wichtiger werden.

Letztendlich würde ich nur die eine oder andere Codierung bekommen und mich nicht darum kümmern. Ich denke, wenn Sie SVG verstehen, können Sie relativ einfach zwischen ihnen wechseln, wenn Sie es jemals brauchen.