webentwicklung-frage-antwort-db.com.de

Snap.svg vs Svg.js

Ich habe versucht, eine richtige 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 Pfadbearbeitung und Beschneiden von Text mit Pfaden.

Ich habe zwei Bibliotheken gefunden, die geeignet sein könnten: Snap.svg und Svg.js .


SNAP.SVG

Github: https://github.com/Adobe-webplatform/Snap.svg
Quelltextzeilen: 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
Quelltextzeilen: 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?

67
Timo Kähkönen

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 javascript-basierter zu halten, damit alles dynamischer wird, während Snap häufig eine stringbasierte Syntax verwendet. Dies macht den resultierenden Code in SVG.js oft besser lesbar, was ich offensichtlich 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 Syntax von Snap.svg ist etwas präziser, der Code von SVG.js ist besser lesbar. Es ist also wirklich Geschmackssache.

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

72
wout

Ich habe Snap ursprünglich ausprobiert, da es eine nette Website und eine scheinbar gute Dokumentation hatte. Nach ein paar Problemen, die ich nicht erklären konnte, habe ich mich für SVG.js entschieden. Ich kann nicht genau sagen warum, aber SVG.js scheint einfacher zu schreiben zu sein. intuitiver. Ich sage nicht, dass Snap schlecht ist, aber es passt nicht zu meinem Stil, und die Dokumentation war inhaltlich etwas spärlich.

13
Nate

Ich bin mir nicht sicher, ob Sie eine unvoreingenommene Antwort erhalten werden, da die meisten Leute 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. 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 mein Eindruck sein, dass svg.js zu einigen Aspekten wie Animationen und Text etwas mehr Zucker zu haben scheint, während Snap vielleicht etwas mehr zu Dingen hat wie Matrizen (die ich manchmal als sehr nützlich empfunden habe, weil ich mit ihnen zu kämpfen habe) und ein paar zusätzliche Dinge wie Touch-Elemente zu unterstützen scheinen (ich vermute, dass sie irgendwie in beiden verfügbar sind und teilweise von der Browser-Unterstützung abhängen, aber Dinge wie Berührungsunterstützung kann mit svg) an Bedeutung gewinnen.

Letztendlich würde ich nur die eine oder andere Codierung bekommen und mich nicht darum kümmern. Ich denke, wenn du SVG verstehst, kannst du relativ einfach zwischen ihnen wechseln, wenn du es jemals brauchst.

11
Ian