jQuery SVG vs Raphael

Sto lavorando su un’interfaccia intertriggers usando SVG e JavaScript / jQuery, e sto cercando di decidere tra Raphael e jQuery SVG . Mi piacerebbe saperlo

  1. Quali sono i trade-off tra i due
  2. Dove sembra essere lo slancio dello sviluppo.

Non ho bisogno del supporto VML / IE in Raphael, o delle capacità di tracciamento di jQuery SVG. Sono principalmente interessato al modo più elegante per creare, animare e manipolare i singoli elementi su un canvas SVG.

Recentemente ho usato sia Raphael che jQuery SVG – e qui ci sono i miei pensieri:

Raphael

Pro: una buona libreria di avvio, facile da fare MOLTE cose con SVG rapidamente. Ben scritto e documentato. Un sacco di esempi e demo. Architettura molto estensibile. Ottimo con l’animazione.

Contro: è uno strato sopra l’effettivo markup SVG, rende difficile fare cose più complesse con SVG – come il raggruppamento (supporta Sets, ma non i gruppi). Non funziona molto bene con la modifica di elementi già esistenti.

jQuery SVG

Pro: un plugin jquery, se stai già utilizzando jQuery. Ben scritto e documentato. Un sacco di esempi e demo. Supporta la maggior parte degli elementi SVG, consente facilmente l’accesso nativo agli elementi

Contro: l’ architettura non è estendibile come Raffaello. Alcune cose potrebbero essere meglio documentate (come configurare l’elemento SVG). Non funziona molto bene con la modifica di elementi già esistenti. Si affida alla semantica SVG per l’animazione, il che non è eccezionale.

SnapSVG come una versione SVG pura di Raphael

SnapSVG è il successore di Raphael. È supportato solo nei browser abilitati per SVG e supporta quasi tutte le funzionalità di SVG.

Conclusione

Se stai facendo qualcosa di semplice e veloce, Raphael è una scelta facile. Se hai intenzione di fare qualcosa di più complesso, ho scelto di usare jQuery SVG perché posso manipolare la marcatura effettiva in modo molto più semplice rispetto a Raphael. E se vuoi una soluzione non jQuery, allora SnapSVG è una buona opzione.

Per i posteri, vorrei sottolineare che ho scelto Raphael, a causa dell’API pulita e del supporto IE “gratuito”, e anche perché lo sviluppo attivo sembra promettente (il supporto eventi è stato appena aggiunto in 0.7, ad esempio). Tuttavia, lascerò la domanda senza risposta e sarei comunque interessato a conoscere le esperienze degli altri utilizzando le librerie Javascript + SVG.

Sono un grande fan di Raffaello e lo slancio dello sviluppo sembra andare forte (la versione 0.85 è stata rilasciata alla fine della scorsa settimana). Un altro grande vantaggio è che il suo sviluppatore, Dmitry Baranovskiy , sta attualmente lavorando a un plug-in di Raphael per la creazione di grafici, g.raphael , il cui aspetto sembra essere piuttosto fluido (ci sono alcuni esempi dell’output delle prime versioni su Flickr ) .

Tuttavia, solo per gettare un altro ansible concorrente nel mix di librerie SVG, il Web SVG di Google sembra davvero molto promettente (anche se non sono un grande fan di Flash, che utilizza per il rendering in browser non compatibili con SVG). Probabilmente da guardare, specialmente con la prossima conferenza SVG Open .

Raphael è decisamente più semplice da configurare e iniziare, ma si noti che ci sono modi per esprimere cose in SVG che non sono possibili in Raffaello. Come notato sopra non ci sono “gruppi”. Ciò implica che non è ansible implementare livelli di Trasf. Coordinate. Invece c’è solo una trasformazione di coordinate disponibile.

Se il tuo disegno dipende da trasformazioni di coordinate nidificate, Raphael non fa per te.

Oh Raphael è andato avanti in modo significativo da giugno. C’è una nuova libreria di grafici che può funzionare con esso e questi sono molto acctriggersnti. Raphael supporta anche la syntax completa del percorso SVG e sta incorporando metodi di percorso veramente avanzati. Vieni a vedere 1.2.8+ sul mio sito (plug Shameless) e poi rimbalzo sul sito di Dmitry da lì. http://www.irunmywebsite.com/raphael/raphaelsource.html

Penso che non sia del tutto estraneo, ma hai considerato la canvas? qualcosa come Process JS può renderlo più semplice.

Dovresti anche dare un’occhiata a svgweb. Usa flash per rendere svg in IE, e facoltativamente su altri browser (nei casi in cui supporta più del browser stesso).

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

Darò il mio voto alle spalle di Raphael: il supporto cross-browser, l’API pulita e gli aggiornamenti coerenti (finora) ne fanno una gioia da usare. Funziona molto bene anche con jQuery. L’elaborazione è interessante, ma è più utile come demo per le cose più attuali al momento.

Come principiante di Javascript, ho trovato che i campioni di Rapahel non sono così facili, consiglio http://cancerbero.mbarreneche.com/raphaeltut , che è un vero tutorial passo dopo passo.

Per quelli a cui non importa di IE6 / IE7, lo stesso tizio che ha scritto Raphael ha costruito un motore svg specifico per i browser moderni: Snap.svg .. hanno un sito davvero carino con buoni documenti: http://snapsvg.io

snap.svg non potrebbe essere più facile da usare immediatamente e può manipolare / aggiornare SVG esistenti o generarne di nuovi. Puoi leggere queste cose sullo snap.io riguardo alla pagina, ma ecco una breve corsa verso il basso:

Contro

  • Per utilizzare le funzionalità di snap, è necessario rinunciare al supporto per i browser più vecchi. Raphael supporta browser come IE6 / IE7, le funzionalità di snap sono supportate solo da IE9 e versioni successive, Safari, Chrome, Firefox e Opera.

Professionisti

  • Implementa tutte le funzionalità di SVG come mascheramento, ritaglio, motivi, gradienti completi, gruppi e altro.

  • Capacità di lavorare con SVG esistenti: i contenuti non devono essere generati con Snap affinché funzioni con Snap, consentendo di creare il contenuto con qualsiasi strumento di progettazione comune.

  • Supporto completo dell’animazione tramite un’API JavaScript semplice e intuitiva

  • Funziona con stringhe di SVG (ad esempio, file SVG caricati tramite Ajax) senza doverli prima renderli effettivamente, come in un contenitore di risorse o sprite sheet.

controllalo se sei interessato: http://snapsvg.io

Dal momento che non è ancora stato menzionato qui: dovresti anche dare un’occhiata a Dojox.drawing , che offre anche buone capacità di disegno SVG. Ha una serie impressionante di funzioni. Sto solo iniziando un progetto con esso, ma mi sembra che sia di gran lunga superiore (almeno in termini di funzionalità) a Raphael e JQuerySVG.

Questa presentazione mi ha convinto a usarlo al posto di Raphael / JQuerySVG: http://www.slideshare.net/elazutkin/dojo-gfx-svg-in-the-real-world-2114082

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

Riferimento su Dojocampus: http://docs.dojocampus.org/dojox/drawing

Scarica Dojo (incluso Dojox): http://dojotoolkit.org/download/

Un’altra libreria svg javascript che potresti voler vedere è d3.js. http://d3js.org/

Preferisco usare RaphaelJS perché ha grandi abilità cross-browser. Tuttavia, alcuni effetti SVG e VML non possono essere raggiunti con RaphaelJS (gradienti complessi …).

Google ha anche sviluppato una propria libreria per abilitare il supporto SVG in IE: http://svgweb.googlecode.com/files/svgweb-2009-08-20-B.zip

Se non hai bisogno del supporto VML e IE8, usa Canvas (ad esempio PaperJS). Guarda le ultime demo di IE10 per Windows 7. Hanno fantastiche animazioni in Canvas. SVG non è in grado di fare nulla vicino a loro. La canvas generale è disponibile su tutti i browser mobili. SVG non funziona nelle prime versioni di Android 2.0- 2.3 (come so)

Sì, Canvas non è scalabile, ma è così veloce che puoi ridisegnare l’intero canvas più velocemente del browser in grado di scorrere la porta di visualizzazione.

Dal mio punto di vista le ottimizzazioni di Microsoft forniscono i mezzi per utilizzare Canvas come motore GDI regolare e implementare applicazioni grafiche come le facciamo ora per Windows.