Share
SVG, o Grafica vettoriale scalabile, è un motore di rendering grafico vettoriale basato su markup in stile XML per il browser. SVG è supportato in tutti i browser, ad eccezione di IE < v9 and Android < v3. The same support is available for canvas (except canvas goes all the way back on Android), so the question often surfaces: which one should you use?
Oggi esamineremo l'SVG e spiegheremo perché la domanda "quale dovrei usare?" di solito viene risposto da "cosa sto cercando di fare?". Per ottenere un elenco completo di elementi che compongono SVG, consulta i documenti di Mozilla sull'argomento. Puoi anche vedere l'API DOM SVG.
Inizieremo illustrando alcuni vantaggi unici di SVG. Quindi, invece di rivedere tutti gli 80 tipi di nodi SVG, spiegheremo come Illustrator può ottenere rapidamente un documento SVG in una pagina web. Daremo anche un'occhiata a D3.js, una potente libreria JavaScript di manipolazione SVG.
"SVG non è pensato per la manipolazione dei pixel."
SVG presenta alcuni vantaggi rispetto alle immagini o ai rendering basati su canvas per alcune applicazioni. SVG non è pensato per la manipolazione dei pixel; tuttavia, gestisce molto bene la grafica vettoriale e la manipolazione vettoriale programmatica.
Nel caso in cui non si sia ascoltato, l'indipendenza dalla risoluzione e l'agnosticismo del browser è un tema scottante nello sviluppo front-end (si pensi al "responsive design") al giorno d'oggi. La maggior parte delle soluzioni esistenti per risolvere i problemi basati sulla risoluzione (ad esempio per gli schermi retina) comportano una grande quantità di dati non necessari scaricati (sostituzione immagine ad alta risoluzione) o compromessi per un browser o l'altro (aumentando tutte le risoluzioni, anche quando lo schermo non mostra la differenza). Questo ci fa affidare alla velocità del collo di bottiglia della velocità di scaricamento dei dati per portare immagini ad alta risoluzione a dispositivi che spesso si trovano su reti di dati wireless. Non ideale.
"SVG offre un modo per realizzare elementi grafici a piena risoluzione, indipendentemente dalla dimensione dello schermo, dal livello di zoom o dalla risoluzione del dispositivo dell'utente".
SVG offre un modo per realizzare elementi grafici a piena risoluzione, indipendentemente dallo schermo delle dimensioni, dal livello di zoom o dalla risoluzione del dispositivo dell'utente. Questo è qualcosa che fino a SVG, abbiamo visto solo con uno stile intelligente degli elementi tramite CSS e rendering del testo. Utilizzo di div e: dopo che gli elementi per creare forme semplici e altri effetti non sono necessari con SVG. Invece, puoi creare forme vettoriali di tutti i tipi.
Quindi scrivi HTML? JavaScript? CSS? Buono. Allora sai già molto di ciò che devi sapere per scrivere SVG. In realtà, SVG utilizza un formato compatibile con XML per definire le sue forme di rendering. Oltre a questo, puoi effettivamente creare forme in CSS e renderle interattive con JavaScript. Esistono più librerie JS per assisterti in questo mondo, come D3.js e Raphael. Ecco un esempio di un gruppo di elementi SVG (la foglia Envato). Puoi anche vedere questo esempio su JSFiddle.
L'API basata su nodo DOM di SVG è già più accessibile rispetto all'API canvas solo lato client. Con questa costruzione puoi:
L'API DOM fornisce un'ulteriore serie di chiari vantaggi per l'utilizzo di SVG.
Quando si usano le immagini in un documento html con
Nonostante le guerre del browser, l'API DOM, attraverso tutti i browser, offre una grande flessibilità in termini di interattività scripting, che si estende agli elementi SVG. Styling SVG avviene tramite CSS. Avere le API degli eventi del browser disponibili per gli elementi SVG rende il comportamento interattivo lo scripting un gioco da ragazzi. Collega semplicemente un gestore a un nodo specifico dell'elemento SVG e sei pronto.
Questo non è vero per gli elementi disegnati sulla tela. Poiché la tela è semplicemente un motore di rendering pixel, gli elementi disegnati non vengono mantenuti in memoria come oggetti. Lo script avrebbe il compito di mantenere raccolti questi elementi e di monitorare tutte le informazioni relative alla posizione e alle dimensioni per cercare e generare eventi in un ciclo di eventi. Oltre a ciò, lo z-indexing dovrebbe essere gestito anche dallo script.
Diamo un'occhiata a un esempio. Supponi di voler rilevare il passaggio del mouse su un cerchio nell'area di disegno. Nota: diremo che l'area di disegno è l'intera larghezza della finestra del browser e utilizzeremo jQuery solo per mantenere l'esempio conciso.
Accentsconagua
var circleCenter = [200, 300], raggio = 50; $ (finestra) .on ("mousemove", function (e) var mx = e.pageX, my = e.pageY; if (mx> circleCenter [0] - raggio && mx < circleCenter[0] + radius && my > circleCenter [1] - raggio && mio < circleCenter[1] + radius) // now we are hovering ); Anche se questo non è necessariamente uno schema di codice difficile o insolito, se sei abituato all'API del browser, sembra un processo frustrante solo per controllare la presenza del passaggio del mouse. Questo è un modello molto comune in altri motori di programmazione di interfaccia di livello inferiore come Unity3D o Processing. Ma nel mondo del web, disponiamo di strumenti a nostra disposizione che gestiscono già molti obiettivi interattivi comuni che potremmo avere. Potresti scrivere una serie di funzioni di convenienza per svolgere compiti comuni, ma non preferiresti arrivare al punto? Al contrario, possiamo vedere la semplicità della stessa attività con SVG.
$ ("svg path # circle"). on ("hover", function (event) // Questo è tutto.); Questo è chiaramente molto più efficiente nel tempo per gli sviluppatori che eseguono script di interattività semplice.
Ci sono un sacco di librerie JavaScript là fuori per la tela (come KineticJS, che ti permetterà di fare cose davvero fantastiche. Ma se sei come me, non stai usando motori fisici completi nelle tue applicazioni web. Spesso ho bisogno di icone scalabili, grafici interattivi e modi dettagliati ed esteticamente stupendi per presentare informazioni ai miei utenti.Più della fisica di cui ho bisogno sono semplici equazioni di andamento.Questi elementi grafici sono facilmente creati con SVG e una moltitudine di semplici elementi fisici le equazioni gestiranno probabilmente il resto dei miei bisogni, quindi diamo un'occhiata ad alcune applicazioni pratiche per SVG.
Ora che abbiamo esaminato alcuni dei vantaggi di SVG, esaminiamo perché molti sviluppatori scelgono ancora di non utilizzare SVG. Ci sono due ragioni principali per cui SVG non viene utilizzato da molti sviluppatori.
Quindi, naturalmente, nessuno vuole davvero sedersi e modificare i punti nell'SVG XML. Fortunatamente, nessuno ha bisogno di! Questa è la parte che le persone spesso non realizzano; ci sono strumenti per modificare SVG, quindi non devi mai farlo a mano.
Se possiedi un editor vettoriale, molto probabilmente puoi salvare il tuo file come un file SVG. Vai avanti e provalo. Apri Illustrator, disegna un cerchio o due, quindi salva il file come SVG. Quindi, apri quel file in Sublime Text o in un altro editor di testo. Vedrai immediatamente che, oltre ad alcuni metadati extra, l'XML di SVG è pronto per essere inserito nel tuo file HTML. Molto probabilmente lo vedrai (il genitore svg) elementi.
Mentre sei totalmente in grado di rilasciare il tuo SVG XML direttamente in un file HTML, e se vuoi che lo SVG venga creato dinamicamente? D3.js è "una libreria JavaScript per manipolare documenti basati su dati". In altre parole, è ottimo per generare elementi SVG come grafici a barre e grafici a linee basati su un set di dati. Abbiamo scelto di mostrare D3 a causa del suo vocabolario corrispondente all'attuale implementazione SVG nel browser; sappi che ci sono altre grandi librerie SVG in circolazione (in particolare, Raphael.js).
Sebbene D3.js faccia più della manipolazione SVG, per brevità, è tutto ciò che useremo per oggi. (Assicurati di dare un'occhiata agli esempi sul sito ufficiale di D3.js, e controlla questo workshop che Mike ha pubblicato sul suo sito personale.)
In questo primo esempio, stiamo semplicemente creando un cerchio pulsante usando Math.sin e un iteratore con un setInterval. Cerchio pulsante
In questo esempio, stiamo aggiornando un grafico a linee tracciato con alcuni valori casuali. Grafico a linee
SVG gestirà molte delle tue esigenze per il rendering delle immagini nel browser. Mentre ci sono molti motivi per usare SVG, come per qualcosa di eccezionale, ci sono cose che non vanno bene.
Ecco alcuni link utili per farti trincerare ulteriormente in SVG!
Quali altri usi hai trovato per SVG? Fateci sapere nella sezione commenti e grazie mille per la lettura.
