Snap.svg vs Svg.js [geschlossen]

76

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?

javascript svg snap.svg svg.js Timo Kähkönen
quelle
13
Es mag eine meinungsbasierte Frage sein, aber es ist eine ausgezeichnete, und die Meinungen von Leuten, die die Bibliotheken tatsächlich genutzt haben, können eine enorme Zeitersparnis für diejenigen sein, die versuchen zu entscheiden, wo sie ihre Zeit investieren sollen. Außerdem basieren die meisten Antworten auf SO auf Meinungen.
Isapir
2
@Igal umgekehrt ist die Zeit, die durch nicht geschlossene meinungsbasierte Fragen "verschwendet" wird, ... vernachlässigbar. Mindestens 56 Personen hielten diese Frage für sinnvoll.
KlaymenDK
1
@KlaymenDK Ich denke, dass Tausende von Menschen die Frage nützlich fanden, da sie bisher 19.257 Mal angesehen wurde. Die meisten Leute machen sich einfach nicht die Mühe, eine Frage oder Antworten zu bewerten, selbst wenn sie es nützlich finden.
Isapir

Antworten:

81

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.

wout
quelle
11
SVG.js scheint einen sehr ermutigten und Community-orientierten Schöpfer zu haben - könnte auch ein Pluspunkt sein! :) Ich bevorzuge auch die Verkettung des Codierens mehr als das "stringbasierte" jQuery-Schema.
Florian Loch
@wout: Ist es mit svg.js in einer SVG-Datei möglich, das Dokumentelement zu erfassen, anstatt zusätzliche Elemente einzufügen?
Williham Totland
2
@wout: Tolle Arbeit! Ich habe vor einer Woche mit snap.svg angefangen, aber ich hatte bereits einige Zweifel. Beim Lesen der svg.js-Dokumentation entdecke ich Dinge, die in Snap fehlen, wie z. B. relative Bewegungen. Und ich sehe Dinge wie Viewbox, rbox, die Use-Klasse, Defs, einfachere Funktionen und Filter (mit den Plugins), Schleifenanimationen. Insgesamt wirkt es modularer und offener. Auch die Dokumentation auf svg.js scheint ausführlicher und vollständiger zu sein. Ich hoffe nur, dass svg.js genauso gut funktioniert wie snap.svg, da snap speziell auf neuere Browser abzielt. Irgendwelche Gedanken dazu? Haben die Leute Benchmarks gemacht?
Thijs Koerselman
1
@ 0x80 svg.js übertrifft snap.svg leicht. Ein einfacher attr()Test auf jsperf zeigt, dass es mindestens fünfmal so schnell ist: jsperf.com/raphael-vs-snapsvg-attr/3 . Berücksichtigen Sie auch, dass svg.js nur halb so groß wie Snap ist und, wie Sie selbst angegeben haben, mehr Funktionen bietet.
Ohne
3
Betrachten Sie es so, jede Manipulation eines Elements erfolgt über die attr()Methode. Diese Methode ist das Zentrum des Wandels. Wenn sie langsam ist, ist der allgemeine Leistungseinbruch exponentiell. Was Raphael vs Snap betrifft, so sind beide Bibliotheken vom selben Autor. Snap ist im Grunde Raphael 3.0 und wenn Sie sich den Code ansehen, sehen Sie viele Ähnlichkeiten. Es verwirrt mich, warum Snap so schlecht abschneidet, insbesondere wenn Adobe es unterstützt.
Ohne
16

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.

Nate
quelle
4
Die Dokumentation von Snap.svg war auch für mich ein Schmerzpunkt. Es wird automatisch generiert und lässt dem Leser oft wichtige Dinge zu erraten. Wenn Sie nicht von 0.3.0 aufsteigen (was nützlich erscheint - bisher wurde nur ein Fehler gefunden), kann dies auch zu einem Mangel an Dynamik führen.
Akauppi
Ich kann svg.js nicht zum Laufen bringen. Hat jemand ein funktionierendes Beispiel?
David Spector
13

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.

Ian
quelle