jQuery SVG gegen Raphael [geschlossen]

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.

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.

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.

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 .

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.

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

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.

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/

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.

Als Javascript-Anfänger fand ich Rapahel-Beispiele nicht so einfach. Ich empfehle http://cancerbero.mbarreneche.com/raphaeltut , ein echtes Schritt-für-Schritt-Tutorial.

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

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/

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

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

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.