jQuery SVG gegen Raphael [geschlossen]

254

Ich arbeite an einer interaktiven Oberfläche mit SVG und JavaScript / jQuery und versuche, mich zwischen Raphael und jQuery SVG zu entscheiden . Ich würde gerne wissen

  1. Was sind die Kompromisse zwischen den beiden
  2. Wo die Entwicklungsdynamik zu sein scheint.

Ich benötige weder die VML / IE-Unterstützung in Raphael noch die Plotfunktionen von jQuery SVG. Ich interessiere mich hauptsächlich für die eleganteste Art, einzelne Elemente auf einer SVG-Leinwand zu erstellen, zu animieren und zu bearbeiten.

Luke Dennis
quelle

Antworten:

194

Ich habe kürzlich sowohl Raphael als auch jQuery SVG verwendet - und hier sind meine Gedanken:

Raphael

Vorteile: Eine gute Starterbibliothek, mit der Sie einfach viele Dinge schnell mit SVG erledigen können. Gut geschrieben und dokumentiert. Viele Beispiele und Demos. Sehr erweiterbare Architektur. Großartig mit Animation.

Nachteile: ist eine Ebene über dem eigentlichen SVG-Markup und macht es schwierig, komplexere Dinge mit SVG zu tun - wie z. B. Gruppieren (es unterstützt Sets, aber keine Gruppen). Funktioniert nicht gut mit der Bearbeitung bereits vorhandener Elemente.

jQuery SVG

Vorteile : Ein JQuery-Plugin, wenn Sie bereits jQuery verwenden. Gut geschrieben und dokumentiert. Viele Beispiele und Demos. Unterstützt die meisten SVG-Elemente und ermöglicht den einfachen Zugriff auf Elemente

Nachteile: Architektur nicht so erweiterbar wie Raphael. Einige Dinge könnten besser dokumentiert werden (wie das Konfigurieren des SVG-Elements). Funktioniert nicht gut mit der Bearbeitung bereits vorhandener Elemente. Verlässt sich bei der Animation auf die SVG-Semantik - was nicht so toll ist.

SnapSVG als reine SVG-Version von Raphael

SnapSVG ist der Nachfolger von Raphael. Es wird nur in SVG-fähigen Browsern unterstützt und unterstützt fast alle Funktionen von SVG.

Fazit

Wenn Sie schnell und einfach etwas tun, ist Raphael eine einfache Wahl. Wenn Sie etwas Komplexeres tun möchten, habe ich mich für jQuery SVG entschieden, da ich das eigentliche Markup wesentlich einfacher bearbeiten kann als mit Raphael. Und wenn Sie eine Nicht-jQuery-Lösung wünschen, ist SnapSVG eine gute Option.

Anatoly G.
quelle
15
Die Dokumentation von RaphaelJS ist auch nicht so gut, sie ist begrenzt und manchmal muss man in die SVG- oder jQuery-Dokumentation gehen, um alle Informationen zu erhalten. Trotzdem kann ich mit den verfügbaren Demos (Quellcode) sowie dem Forum und vielen Benutzern die Antworten erhalten, die ich brauche.
Roalt
11
Ich habe gerade angefangen, Raphael zu verwenden, und fand, dass die Dokumentation eine der besten ist, die mir für eine Javascript-API
begegnet ist
71
Vergessen Sie nicht, dass RaphaelJS abwärtskompatibel mit VML für Internet Explorer ist. Das ist RIESIG, weil SVG in den älteren Browsern nicht funktioniert.
Strongriley
3
Die Frage betraf speziell SVG und nicht die Abwärtskompatibilität. Wenn es sich bei dem Wunsch um browserübergreifende Vektorgrafiken handelt, sind Sie richtig.
Anatoly G
4
Ein weiterer Nachteil von jQuery SVG ist, dass das Projekt, obwohl es sich um ein OpenSoucer-Projekt (GPL und MIT) handelt, von seinem Entwickler aufgegeben zu werden scheint (Version 1.4.5, letztes Update, 28. April 2012). jquery.svg.dom verursacht einige Konflikte mit jQuery 1.8. Im Idealfall würde ich darauf warten, dass jemand das Projekt übernimmt und es hoffentlich in Github einfügt
Hoffmann
53

Für die Nachwelt möchte ich darauf hinweisen, dass ich mich letztendlich für Raphael entschieden habe, wegen der sauberen API und der "kostenlosen" IE-Unterstützung und auch, weil die aktive Entwicklung vielversprechend aussieht (Event-Unterstützung wurde beispielsweise gerade in 0.7 hinzugefügt). Ich werde die Frage jedoch unbeantwortet lassen und wäre immer noch daran interessiert, von den Erfahrungen anderer mit Javascript + SVG-Bibliotheken zu hören.

Luke Dennis
quelle
1
Die nette IE-Unterstützung für Raphael ist großartig. Quadrate mit abgerundeten Ecken im IE? ... kein Problem;)
Peter Ajtai
26

Ich bin ein großer Fan von Raphael und die Entwicklungsdynamik scheint stark zu sein (Version 0.85 wurde Ende letzter Woche veröffentlicht). Ein weiteres großes Plus ist, dass sein Entwickler, Dmitry Baranovskiy , derzeit an einem Raphael-Chart-Plugin, g.raphael , arbeitet , das sich als ziemlich schick herausstellt (es gibt einige Beispiele für die Ausgabe der frühen Versionen auf Flickr ). .

Um jedoch einen weiteren möglichen Konkurrenten in den SVG-Bibliotheksmix einzubeziehen, sieht das SVG-Web von Google in der Tat sehr vielversprechend aus (auch wenn ich kein großer Fan von Flash bin, das zum Rendern in nicht SVG-kompatiblen Browsern verwendet wird). Wahrscheinlich eine, die man sich ansehen sollte, besonders bei der bevorstehenden SVG Open-Konferenz .

Reicher Pollock
quelle
1
Im Moment ist es Raphael v. 1.5.2.
topright gamedev
3
Es ist keine große Sache zu bemerken, dass die aktuelle Version 2.1.2 ist. Dieser Kommentar wartet darauf, in ein paar Jahren von einem anderen Mann korrigiert zu werden ...
Tebe
Kopat 'Sho Ya Nashel, ein paar Jahre später ... Es ist jetzt Raphael v2.2.1
Nathangrad
12

Raphael ist definitiv einfacher einzurichten und in Betrieb zu nehmen. Beachten Sie jedoch, dass es in SVG Möglichkeiten gibt, Dinge auszudrücken, die in Raphael nicht möglich sind. Wie oben erwähnt, gibt es keine "Gruppen". Dies bedeutet, dass Sie keine Ebenen von Koordinatentransfomationen implementieren können. Stattdessen ist nur eine Koordinatentransformation verfügbar.

Wenn Ihr Design von verschachtelten Koordinatentransformationen abhängt, ist Raphael nichts für Sie.

djsadinoff
quelle
11

Oh, Raphael hat sich seit Juni deutlich weiterentwickelt. Es gibt eine neue Diagrammbibliothek, die damit arbeiten kann und die sehr auffällig ist. Raphael unterstützt auch die vollständige SVG-Pfadsyntax und enthält wirklich fortschrittliche Pfadmethoden. Besuchen Sie 1.2.8+ auf meiner Website (Shameless Plug) und springen Sie dann von dort zur Website des Dmitry. http://www.irunmywebsite.com/raphael/raphaelsource.html

Chasbeen
quelle
6

Ich denke, es ist nicht völlig unabhängig, aber haben Sie Leinwand in Betracht gezogen? So etwas wie Process JS kann es einfacher machen.

Bharani
quelle
12
Ich habe sowohl die Leinwand im Allgemeinen als auch die Verarbeitung im Besonderen betrachtet. Das Problem ist, dass (soweit ich weiß) Mausereignisse nicht einfach an einzelne Elemente auf der Leinwand angehängt werden können, für Funktionen wie Drag & Drop im Gegensatz zu SVG, das vollständig dem DOM ausgesetzt ist.
Luke Dennis
1
Ich habe nicht viel mit Canvas gearbeitet, aber ich schaue mir das Flot - jquery Plugin an, das Canvas für Diagramme verwendet. Es handhabt Mausklicks ziemlich gut.
Bharani
4
Mausklicks ja, aber keine Dom-Ereignisse für Elemente auf der Leinwand. Tatsächlich können Sie für Canvas den Ereignishandler nicht auf der Zeichenfläche ablegen (aufgrund von IE), obwohl Sie ihn auf einem Div platzieren können, der die Zeichenfläche enthält.
Nosredna
3
Leinwand eignet sich hervorragend für Bitmaps, SVG eignet sich hervorragend für Vektorgrafiken. Die Skalierbarkeit von SVG ist dafür fantastisch. Ich denke, Canvas und SVG sind komplementäre Technologien.
Anatoly G
Informationen zu Mausereignissen für Canvas finden Sie in Easel.js, das all dies für Sie erledigt.
Neil
6

Sie sollten sich auch svgweb ansehen. Es verwendet Flash zum Rendern von SVG im IE und optional in anderen Browsern (in den Fällen, in denen es mehr unterstützt als der Browser selbst).

http://code.google.com/p/svgweb/

Sroussey
quelle
5

Ich werde meine Stimme hinter Raphael werfen - die browserübergreifende Unterstützung, die saubere API und die (bisher) konsistenten Updates machen die Verwendung zu einer Freude. Es spielt sich auch sehr gut mit jQuery. Die Verarbeitung ist cool, aber im Moment als Demo für hochmoderne Inhalte nützlicher.

George Mandis
quelle
5

Für diejenigen, die sich nicht für IE6 / IE7 interessieren, hat derselbe Typ, der Raphael geschrieben hat, eine SVG-Engine speziell für moderne Browser entwickelt: Snap.svg . Sie haben eine wirklich schöne Seite mit guten Dokumenten: http://snapsvg.io

snap.svg könnte nicht einfacher zu verwenden sein und kann vorhandene SVGs bearbeiten / aktualisieren oder neue generieren. Sie können dieses Zeug auf der Seite snap.io about about lesen, aber hier ist ein kurzer Überblick:

Nachteile

  • Um die Funktionen von snap nutzen zu können, müssen Sie auf die Unterstützung älterer Browser verzichten. Raphael unterstützt Browser wie IE6 / IE7, Snap-Funktionen werden nur von IE9 und höher, Safari, Chrome, Firefox und Opera unterstützt.

Vorteile

  • Implementiert die vollständigen Funktionen von SVG wie Maskieren, Ausschneiden, Muster, vollständige Verläufe, Gruppen und mehr.

  • Möglichkeit, mit vorhandenen SVGs zu arbeiten: Inhalte müssen nicht mit Snap generiert werden, damit sie mit Snap funktionieren. So können Sie den Inhalt mit allen gängigen Designtools erstellen.

  • Volle Animationsunterstützung mit einer unkomplizierten, einfach zu implementierenden JavaScript-API

  • Funktioniert mit SVG-Zeichenfolgen (z. B. über Ajax geladene SVG-Dateien), ohne dass diese zuerst gerendert werden müssen, ähnlich wie bei einem Ressourcencontainer oder einem Sprite-Sheet.

Probieren Sie es aus, wenn Sie interessiert sind: http://snapsvg.io

Stall
quelle
3

Da es hier noch nicht erwähnt wird: Sie sollten sich auch Dojox.drawing ansehen , das auch gute SVG-Zeichenfunktionen bietet. Es hat eine ziemlich beeindruckende Reihe von Funktionen. Ich beginne gerade ein Projekt damit, aber es scheint mir, dass es Raphael und JQuerySVG (zumindest in Bezug auf die Funktionen) weit überlegen ist.

Diese Präsentation überzeugte mich, sie anstelle von Raphael / JQuerySVG zu verwenden: http://www.slideshare.net/elazutkin/dojo-gfx-svg-in-the-real-world-2114082

Referenz: http://dojotoolkit.org/reference-guide/dojox/index.html

Referenz zum Dojocampus: http://docs.dojocampus.org/dojox/drawing

Laden Sie Dojo (einschließlich Dojox) herunter: http://dojotoolkit.org/download/

Ingo Fischer
quelle
3

Eine andere Svg-Javascript-Bibliothek, die Sie sich ansehen möchten, ist d3.js. http://d3js.org/

Thaddeus Albers
quelle
2

Ich bevorzuge die Verwendung von RaphaelJS, da es über hervorragende browserübergreifende Fähigkeiten verfügt. Einige SVG- und VML-Effekte können mit RaphaelJS jedoch nicht erzielt werden (komplexe Gradienten ...).

Google hat außerdem eine eigene Bibliothek entwickelt, um die SVG-Unterstützung im IE zu aktivieren: http://svgweb.googlecode.com/files/svgweb-2009-08-20-B.zip

Mathieu Rodic
quelle
0

Wenn Sie keine VML- und IE8-Unterstützung benötigen, verwenden Sie Canvas (z. B. PaperJS). Schauen Sie sich die neuesten IE10-Demos für Windows 7 an. Sie haben erstaunliche Animationen in Canvas. SVG ist nicht in der Lage, etwas in ihrer Nähe zu tun. Insgesamt ist Canvas in allen mobilen Browsern verfügbar. SVG funktioniert nicht in früheren Versionen von Android 2.0- 2.3 (wie ich weiß)

Ja, Canvas ist nicht skalierbar, aber so schnell, dass Sie die gesamte Leinwand schneller neu zeichnen können als der Browser, der den Ansichtsport scrollen kann.

Aus meiner Sicht bieten die Optimierungen von Microsoft die Möglichkeit, Canvas als reguläre GDI-Engine zu verwenden und Grafikanwendungen so zu implementieren, wie wir sie jetzt für Windows ausführen.

Grundlegende Unterstützung für Grundelemente
quelle
1
Für das reine Grafik-Rendering stimme ich absolut zu. Das einzige, was SVG / VML bietet, was Canvas nicht bietet, ist ein DOM und eine Ereignishierarchie, da gezeichnete Elemente eher vollständige DOM-Objekte als eine rohe Bitmap sind. Mit Canvas sind X / Y-Klickkoordinaten die besten, als dies möglich ist. Auf jeden Fall ist das Projekt längst vorbei, daher ist es derzeit nicht relevant, aber danke für Ihre Antwort. :)
Luke Dennis