Sto lavorando su un'interfaccia interattiva usando SVG e JavaScript / jQuery e sto cercando di decidere tra Raphael e jQuery SVG . Mi piacerebbe saperlo
Non ho bisogno del supporto VML / IE in Raphael o delle capacità di tracciamento di jQuery SVG. Sono principalmente interessato al modo più elegante di creare, animare e manipolare singoli oggetti su una tela SVG.
Risposte:
Di recente ho usato sia Raphael che jQuery SVG - ed ecco i miei pensieri:
Pro: una buona libreria di partenza, facile da fare MOLTE cose con SVG rapidamente. Ben scritto e documentato. Molti esempi e demo. Architettura molto estensibile. Ottimo con l'animazione.
Contro: è un livello sopra il markup SVG effettivo, rende difficile fare cose più complesse con SVG - come il raggruppamento (supporta i set, ma non i gruppi). Non funziona bene con la modifica di elementi già esistenti.
Pro: un plug-in jquery, se stai già utilizzando jQuery. Ben scritto e documentato. Molti esempi e demo. Supporta la maggior parte degli elementi SVG, consente un accesso nativo agli elementi facilmente
Contro: architettura non estensibile come Raffaello. Alcune cose potrebbero essere meglio documentate (come configurare l'elemento SVG). Non funziona bene con la modifica di elementi già esistenti. Si affida alla semantica SVG per l'animazione, il che non è eccezionale.
SnapSVG è il successore di Raffaello. È supportato solo nei browser abilitati per SVG e supporta quasi tutte le funzionalità di SVG.
Se stai facendo qualcosa di semplice e veloce, Raphael è una scelta facile. Se hai intenzione di fare qualcosa di più complesso, ho scelto di utilizzare jQuery SVG perché posso manipolare il markup effettivo in modo molto più semplice rispetto a Raphael. E se vuoi una soluzione non jQuery, SnapSVG è una buona opzione.
Per i posteri, vorrei notare che ho finito per scegliere Raphael, a causa dell'API pulita e del supporto IE "gratuito", e anche perché lo sviluppo attivo sembra promettente (il supporto per gli 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 che utilizzano le librerie Javascript + SVG.
Sono un grande fan di Raphael e lo slancio di 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 su un plugin per grafici di Raphael, g.raphael , che sembra modellarsi per essere piuttosto fluido (ci sono alcuni esempi dell'output delle prime versioni su Flickr ) .
Tuttavia, solo per aggiungere un altro possibile contendente al 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 nei browser non conformi a SVG). Probabilmente uno da guardare, in particolare con la prossima conferenza SVG Open .
Raphael è sicuramente più facile da impostare e iniziare, ma nota che ci sono modi di esprimere cose in SVG che non sono possibili in Raphael. Come notato sopra non ci sono "gruppi". Ciò implica che non è possibile implementare livelli di Trasfomazioni di coordinate. Invece è disponibile una sola trasformazione di coordinate.
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 essa e questi sono molto accattivanti. Raphael supporta anche la sintassi completa del percorso SVG e sta incorporando metodi di percorso davvero avanzati. Vieni a vedere 1.2.8+ sul mio sito (spina Shameless) e poi rimbalza sul sito di Dmitry da lì. http://www.irunmywebsite.com/raphael/raphaelsource.html
Penso che non sia del tutto estraneo ma hai considerato la tela? qualcosa come Process JS può renderlo più semplice.
Dovresti anche dare un'occhiata a svgweb. Utilizza flash per eseguire il rendering di svg in IE e facoltativamente su altri browser (nei casi in cui supporta più del browser stesso).
Darò il mio voto dietro Raphael: il supporto cross-browser, l'API pulita e gli aggiornamenti coerenti (finora) lo rendono un piacere da usare. Funziona molto bene anche con jQuery. L'elaborazione è interessante, ma al momento è più utile come demo per roba all'avanguardia.
Come un principiante di Javascript, ho trovato i campioni di Rapahel non così facili, raccomando http://cancerbero.mbarreneche.com/raphaeltut , che è un vero tutorial passo dopo passo.
Per coloro a cui non interessa IE6 / IE7, lo stesso ragazzo che ha scritto Raphael ha creato un motore svg appositamente 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 questa roba sulla pagina snap.io di ma ma ecco un breve riassunto:
Contro
Professionisti
Implementa le funzionalità complete di SVG come mascheramento, ritaglio, motivi, gradienti completi, gruppi e altro ancora.
Capacità di lavorare con SVG esistenti: il contenuto non deve essere generato con Snap perché funzioni con Snap, consentendo di creare il contenuto con strumenti di progettazione comuni.
Supporto completo per l'animazione utilizzando un'API JavaScript semplice e di facile implementazione
Funziona con stringhe di SVG (ad esempio, file SVG caricati tramite Ajax) senza dover prima renderli effettivamente, in modo simile a un contenitore di risorse o foglio di sprite.
dai un'occhiata se sei interessato: http://snapsvg.io
Dato che non è ancora menzionato qui: dovresti anche dare un'occhiata a Dojox.drawing , che offre anche buone capacità di disegno SVG. Ha un set di funzionalità piuttosto impressionante. 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 guardare è d3.js. http://d3js.org/
Preferisco usare RaphaelJS perché ha ottime capacità cross-browser. Tuttavia, alcuni effetti SVG e VML non possono essere raggiunti con RaphaelJS (gradienti complessi ...).
Google ha inoltre 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 (PaperJS per esempio). Guarda le ultime demo di IE10 per Windows 7. Hanno incredibili animazioni in Canvas. SVG non è in grado di fare nulla vicino a loro. Canvas globale è 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'intera tela più velocemente del browser in grado di scorrere la porta di visualizzazione.
Dal mio punto di vista, le ottimizzazioni di Microsoft forniscono mezzi per usare Canvas come normale motore GDI e implementare applicazioni grafiche come le facciamo ora per Windows.