jQuery SVG gegen Raphael
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
- Was sind die Kompromisse zwischen den beiden
- Wo die Entwicklungsdynamik zu sein scheint.
Ich benötige weder die VML/IE-Unterstützung in Raphael noch die Plotfähigkeiten von jQuery SVG. Ich interessiere mich in erster Linie 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 Starter-Bibliothek, mit der man mit SVG schnell eine Menge Dinge erledigen kann. Gut geschrieben und dokumentiert. Viele Beispiele und Demos. Sehr erweiterbare Architektur. Großartig mit Animation.
Nachteile: ist eine Ebene über dem eigentlichen SVG-Markup. Dies macht es schwierig, komplexere Dinge mit SVG zu tun - wie das Gruppieren (es unterstützt Sets, aber nicht Gruppen). Funktioniert nicht besonders gut bei 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 nativen Zugriff auf Elemente
Nachteile: Architektur nicht so erweiterbar wie Raphael. Einige Dinge könnten besser dokumentiert werden (wie die Konfiguration des SVG-Elements). Funktioniert nicht besonders gut bei der Bearbeitung bereits vorhandener Elemente. Verlässt sich auf die SVG-Semantik für Animationen - 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 etwas schnell und einfach tun, ist Raphael eine einfache Wahl. Wenn Sie komplexere Aufgaben ausführen möchten, habe ich mich für jQuery SVG entschieden, da ich das eigentliche Markup erheblich 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 festhalten, dass ich mich wegen der sauberen API und der "freien" IE Unterstützung und auch wegen der aktiven Entwicklung für Raphael entschieden habe Sieht vielversprechend aus (Ereignisunterstützung wurde gerade in Version 0.7 hinzugefügt.) Ich werde die Frage jedoch unbeantwortet lassen und wäre immer noch daran interessiert, über die 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 , was so aussieht, als würde es sich ziemlich glatt entwickeln (es gibt ein paar Beispiele für die Ausgabe der frühen Versionen von Flickr ).
Um einen weiteren möglichen Konkurrenten in den SVG-Bibliotheksmix zu werfen, sieht Googles SVG-Web in der Tat sehr vielversprechend aus (auch wenn ich kein großer Fan von bin Flash, das zum Rendern in nicht SVG-kompatiblen Browsern verwendet wird). Wahrscheinlich eine, die man sich ansehen sollte, besonders bei der anstehenden SVG Open-Konferenz .
Raphael ist auf jeden Fall 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 Koordinatentransformationen implementieren können. Stattdessen steht nur eine Koordinatentransformation zur Verfügung.
Wenn Ihr Design von verschachtelten Koordinatentransformationen abhängt, ist Raphael nichts für Sie.
Oh Raphael ist seit Juni deutlich weitergezogen. 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. Kommt und seht euch 1.2.8+ auf meiner Seite an (Shameless Plug) und hüpft dann von dort zur Seite von Dmitry. http://www.irunmywebsite.com/raphael/raphaelsource.html
Ich denke, es ist nicht völlig unabhängig, aber hast du 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 Internet Explorer und optional in anderen Browsern (in den Fällen, in denen es mehr unterstützt als der Browser selbst).
Als Anfänger in Javascript empfand ich Rapahel-Beispiele als nicht so einfach. Ich empfehle http://cancerbero.mbarreneche.com/raphaeltut , was ein echtes Schritt-für-Schritt-Tutorial ist.
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 erstellt: Snap.svg .. Sie haben eine wirklich schöne Seite mit guten Dokumenten: http://snapsvg.io
snap.svg könnte nicht einfacher zu benutzen sein und kann bestehende SVGs manipulieren/aktualisieren oder neue generieren. Sie können dieses Zeug auf der snap.io-About-Seite 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, Fangfunktionen werden nur von IE9 und höher, Safari, Chrome, Firefox und Opera unterstützt.
Profis
Implementiert alle Funktionen von SVG wie Maskieren, Ausschneiden, Muster, Farbverlä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 Inhalte mit gängigen Entwurfstools erstellen.
Volle Animationsunterstützung mit einer unkomplizierten, einfach zu implementierenden JavaScript-API
Funktioniert mit SVG-Zeichenfolgen (z. B. SVG-Dateien, die über Ajax geladen wurden), ohne dass diese wie bei einem Ressourcencontainer oder einem Sprite-Blatt gerendert werden müssen.
probieren Sie es aus, wenn Sie interessiert sind: http://snapsvg.io
Ich werde meine Stimme hinter Raphael abgeben - 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 nützlicher als Demo für hochaktuelle Dinge.
Eine andere Svg-Javascript-Bibliothek, die Sie sich ansehen möchten, ist d3.js. http://d3js.org/
Da es hier noch nicht erwähnt wird: Schauen Sie sich auch Dojox.drawing an, 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 weit überlegen ist (zumindest in Bezug auf die Funktionen).
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
Verweis auf Dojocampus: http://docs.dojocampus.org/dojox/drawing
Laden Sie Dojo (einschließlich Dojox) herunter: http://dojotoolkit.org/download/
Ich bevorzuge die Verwendung von RaphaelJS, da es über hervorragende browserübergreifende Fähigkeiten verfügt. Einige SVG- und VML-Effekte können jedoch mit RaphaelJS (komplexe Verläufe ...) nicht erzielt werden.
Google hat auch eine eigene Bibliothek entwickelt, um die SVG-Unterstützung im IE zu ermöglichen: 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. Overall Canvas ist 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 es ist so schnell, dass Sie das gesamte Canvas schneller neu zeichnen können als der Browser, der den Bildlauf des Ansichtsfensters unterstützt.
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.