SVG per sviluppatori: comprensione delle basi, vantaggi e svantaggi

La grafica porta espressioni uniche sui siti Web e aiuta anche gli sviluppatori a comunicare senza sforzo idee e concetti profondi agli utenti. È un elemento chiave su Internet e dal 1999 è diventato scriptable, il che consente una presentazione più complessa delle immagini sul web.

Potresti avere molta familiarità con l'uso dei diversi tipi di file di immagini raster: JPG, PNG e GIF. Ricordiamo un po'. Con il supporto per 256 colori (8 bit), GIF (Graphic Interchange Format) è un formato eccezionale per l'animazione e la trasparenza, esclusa la trasparenza alfa. Il formato PNG (Portable Network Graphic) è molto migliore con il supporto per oltre 16 milioni di colori (24 bit) e tutti i tipi di trasparenza, a condizione che non siano necessarie animazioni.

Il formato immagine più diffuso sul web JPG o JPEG (Joint Photographic Experts Group), principalmente perché comprimibile, supporta oltre 16 milioni di colori; 24 bit o 8 bit per pixel per la scala di grigi, ma nessun supporto per l'animazione o la trasparenza. Quindi, JPG è il principale formato grafico utilizzato dagli sviluppatori per le fotografie statiche. Non ho menzionato Bitmap (BMP) poiché in genere non è un formato immagine per il Web. BMP memorizza dati precisi di ogni pixel in un'immagine, il che rende i file davvero grandi (oltre 150 volte le dimensioni dei JPG con la stessa risoluzione) e non ideali per la grafica di siti Web.

Questi formati grafici dipendenti dalla risoluzione sono ottimi, soprattutto se usati in modo appropriato. Tuttavia, condividono tutti un difetto comune, che ha portato all'introduzione di SVG, l'unico formato di immagine vettoriale per il web.

Cos'è SVG?

Scalar Vector Graphics (SVG) è un formato immagine basato su Extensible Markup Language (XML) che descrive grafica bidimensionale come percorsi, linee, cerchi, motivi, colori del testo, ecc. In una definizione più semplice, si riferisce a un formato immagine con supporto per la bidimensionalità, il cui intero comportamento e la cui esistenza sono controllati da un file di testo XML.

Un'altra caratteristica interessante è la sua scalabilità; puoi portare le immagini SVG su qualsiasi scala senza perdere la loro risoluzione. Questo perché gli SVG rendono le immagini con forme, numeri e coordinate, non con i pixel come nei formati di immagini raster che rendono le immagini definendo di che colore deve essere dipinto ogni pixel.

Vediamo come creare immagini SVG e alcuni dei motivi per cui dovresti considerare l'utilizzo di SVG nei tuoi progetti.

Come creare immagini SVG

Puoi creare immagini SVG utilizzando qualsiasi editor di testo, sebbene il processo sia un po' tecnico e richieda alcune conoscenze di progettazione e matematica, soprattutto se stai creando alcune forme complesse. Immagina di disegnare un aeroplano su una tela usando solo linee di codici. C'è un modo più semplice, tuttavia, ma usiamolo per comprendere i concetti di base di SVG.

Usiamo elementi grafici SVG per creare immagini SVG in un editor di testo. Il processo consiste nell'inserire semplicemente i tuoi elementi grafici all'interno dei tag <svg> e </svg>, specificandone coordinate, dimensione, colore, ecc. Ad esempio, l'elemento <rect> può essere utilizzato per disegnare un rettangolo come si vede nella seguente esempio.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="300" width="300">
<rect width="300" height="300" stroke-width="1" fill="rgb(0,0,255)" stroke="rgb(0,0,0)"/>
</svg>

Il codice sopra disegnerà un rettangolo blu di 300x per 300px nell'angolo in alto a sinistra del browser se salvato come file .svg e aperto con un browser. Ora, potresti chiederti perché abbiamo due altezze e larghezze nel documento. Capiamo l'intero codice per vedere perché. Come accennato in precedenza, il tuo codice SVG deve essere scritto all'interno dell'elemento root (<svg> e </svg>) per notificare al tuo browser come interpretare quelle righe.

Proprio come in HTML, SVG richiede una dichiarazione dello spazio dei nomi nell'elemento radice. Nell'esempio sopra, abbiamo fornito il parametro xmlns "http://www.w3.org/2000/svg" e la versione SVG 1.1 consigliata dal W3C all'interno dell'elemento root. La dimensione all'interno dell'elemento radice è chiamata punto di vista SVG, che è la finestra o la tela attraverso la quale apparirà l'immagine SVG disegnata all'interno del tag radice. Il punto di vista deve avere almeno la stessa dimensione con tutti i tuoi oggetti SVG prima che possano apparire nel tuo browser.

La seconda riga è più facile da capire. L'elemento <rect>, utilizzato per disegnare i rettangoli, incorpora i parametri del rettangolo proposto a partire dalla quota. La larghezza del tratto descrive lo spessore della linea mentre i due modelli di colore RGB informano il browser di quale colore riempire rispettivamente il rettangolo e la linea. È abbastanza semplice vero?

Ora possiamo spostare il rettangolo all'interno della pagina dichiarando un valore per xey in questo modo:

<rect width="300" height="300" stroke-width="1" fill="rgb(0,0,255)" stroke="rgb(0,0,0)" x=”15” y=”20”/>

Naturalmente, non dimenticheremo di aumentare la dimensione del punto di vista per accogliere lo spazio extra che ciò richiederebbe.

Il modo più semplice per creare immagini SVG è utilizzare strumenti di disegno come Adobe Illustrator, Inskape e Sketch. Invece di creare da zero, alcune librerie JavaScript come Bonsai.js e D3.js sono buone fonti per immagini SVG se stai cercando icone, forme complesse, ecc.

Aggiunta di immagini SVG

Uno dei vantaggi dell'utilizzo delle immagini SVG è la facilità di integrazione con il progetto. Devi semplicemente fare riferimento a loro nell'attributo src di un tag img. Questo dovrebbe fare riferimento al file .svg salvato nella cartella del tuo sito Web in questo modo:

<img src='example.svg'>

In alternativa, puoi inserire i codici SVG nel tuo documento HTML, con i tag <svg></svg> che iniziano e terminano il codice come già accennato in precedenza.

Puoi anche fare riferimento all'immagine SVG nel tuo CSS per un'immagine di sfondo come questa:

.main-header {
background-image: url(example.svg);
}

Vantaggi dell'utilizzo di SVG per gli sviluppatori

La necessità di SVG nei tuoi successivi progetti web non può essere sottovalutata considerando gli attuali requisiti grafici di Internet. A parte il numero infinito di nuovi dispositivi con risoluzione e dimensioni dello schermo potenti, i siti Web ora offrono così tanta interattività che, senza avere il controllo totale della grafica, potrebbe essere difficile fornire siti Web di livello professionale.

Alcuni dei vantaggi includono:

Scalabilità e reattività

Essendo un formato immagine non dipendente dalla risoluzione, gli SVG possono essere ridimensionati indefinitamente, senza diventare pixelati. Ciò ti consente, come sviluppatore, di fornire immagini grafiche di prim'ordine a tutti gli utenti, indipendentemente dalla forza della risoluzione e dalle dimensioni dello schermo dei loro dispositivi. Puoi combinare diversi percorsi, forme ed elementi di testo per creare immagini straordinarie che saranno nitide e nitide a tutte le dimensioni.

Questo non è disponibile in nessuno dei formati di immagine raster con dimensioni fisse, semplicemente perché non avrebbero mai dati sufficienti per riempire ogni spazio quando sono estremamente ingranditi. SVG calcola la distanza tra i punti per mantenere i percorsi costantemente collegati in modo che l'immagine rimanga nitida su qualsiasi scala.

Estremamente flessibile e supporta l'animazione

A differenza delle immagini raster, che forniscono la copia finale di un'immagine, le immagini SVG sono completamente modificabili regolando i codici utilizzando un editor di testo o speciali strumenti di disegno. Usando i nomi delle classi o gli ID dei tuoi elementi SVG, puoi dare uno stile o animare le tue immagini SVG usando CSS. L'animazione di immagini SVG è possibile anche con Web Animation API, SMIL o WebGL.

Soprattutto, puoi integrare le tue immagini SVG con altre importanti tecnologie e documenti di piattaforme Web aperte. Gli SVG possono essere script con JavaScript e stilizzati con CSS come HTML.

SEO-friendly e di piccole dimensioni del file

Esistendo in un formato di testo, le immagini SVG migliorano l'accessibilità di un sito Web, che è una grande risorsa nel ranking delle pagine. Oltre a ciò, i motori di ricerca sono in grado di indicizzare il testo dell'elemento SVG e ciò consente agli utenti di trovare il tuo sito Web utilizzando parole chiave nel tuo file SVG.

SVG si carica molto più velocemente poiché non ha un file da scaricare e senza la necessità di una richiesta HTTP. Migliorare la risoluzione di un file di immagine raster significa aumentare il numero di punti (pixel). Ciò aumenterà la dimensione dell'immagine, che trascinerà il tempo di caricamento del tuo sito web. Questo è tutt'altro che il caso quando usi SVG. Essendo un'immagine creata utilizzando un insieme di istruzioni e coordinate, le dimensioni dei file SVG sono incredibilmente piccole (se ottimizzate) rispetto a qualsiasi altro tipo di file immagine. Ciò si traduce in tempi di caricamento più rapidi, prestazioni della pagina migliorate, posizionamento più elevato nei motori di ricerca, migliorando allo stesso tempo l'esperienza dell'utente. Per ulteriori informazioni su questo, visita il consulente SEO Londra

SVG ha il proprio modello a oggetti documento

SVG esiste come documento separato, considerato dotato di una propria struttura e posizionato all'interno del normale DOM. Questa reputazione è fondamentale per l'attributo viewBox, che ci consente di creare un punto di vista di qualsiasi dimensione, disegnare immagini su tela di dimensioni variabili e visualizzarle senza aggiornare le proprietà SVG.

SVG è il formato di file immagine del futuro

Senza l'arrivo di dispositivi più potenti con una risoluzione dello schermo follemente magnifica, gli sviluppatori non avrebbero dovuto affrontare il travolgente mal di testa dell'ottimizzazione delle immagini per dispositivi diversi. Ma questo non sarà più facile tra qualche anno, insieme alla crescente fame di maggiore interattività da parte dei siti web.

In qualche modo, la gestione di queste sfide servendo immagini diverse che corrispondano alla dimensione del punto di vista degli utenti non è conveniente. E per motivi di sostenibilità aziendale, risparmiando larghezza di banda, denaro e migliorando l'esperienza dell'utente, gli sforzi per passare al formato immagine SVG stanno inevitabilmente diventando una priorità assoluta. C'è una crescente comunità di sostenitori di SVG.

Prima dell'introduzione da parte del W3C di SVG 1.1 (seconda edizione) il 16 agosto 2011, che è potenzialmente in fase di revisione per una versione più recente, SVG 1.0 e 1.1 (prima edizione) stavano già cambiando il modo in cui gestiamo le immagini su Internet. Questa è una promessa di qualcosa che vale più del normale formato di immagine raster, che è ancora molto utile nel nostro attuale stato di programmazione web. SVG non è il miglior formato di immagine in tutti i casi. Le versioni successive di SVG dovrebbero affrontare alcuni degli svantaggi di SVG; di cui parleremo più avanti in questo articolo.

Quando utilizzare il formato immagine SVG

Naturalmente, i formati immagine dipendenti dalla risoluzione sono ancora i migliori per fotografie e altre immagini ben dettagliate. Ecco un elenco di casi comuni in cui i formati di immagine SVG sono i migliori.

1. Loghi e icone
2. Immagini interattive come grafici, grafici, mappe, infografiche
3. Animazioni
4. Interfacce applicative
5. Schemi e illustrazioni semplici
6. Effetti speciali come appiccicoso o morphing
7. Opere d'arte a bassa intensità e grafica semplice

Svantaggi di SVG per gli sviluppatori

SVG non è supportato da tutti i browser: i vecchi browser trattano gli SVG allo stesso modo in cui un Windows XP obsoleto tratterebbe le unità flash o la tua Canon EOS 5DSr quando tenti di connetterle. In poche parole, SVG non funziona su browser meno recenti; IE8 e inferiori. Tuttavia, considerando che i browser legacy non fanno realmente parte di nessuna causa futura, insieme al fatto che solo una manciata di persone li usa ancora, non è una delle ragioni principali per non usare gli SVG.

SVG non supporta così tanti dettagli: essendo una miscela di percorsi e punti, SVG non ha il framework per visualizzare tutti i dettagli dei formati di immagini raster basati su pixel. SVG non funziona con nulla catturato con una fotocamera. Pertanto, le foto e altre forme di grafica con così tanti dettagli vengono visualizzate al meglio utilizzando formati di immagini raster grazie al supporto per una maggiore densità di colori.

Comprendere il codice SVG: anche se gli sviluppatori possono essere considerati per sapere come utilizzare diversi linguaggi di programmazione Web, aumentare questo onere si è rivelato una sfida. Il modello di codice SVG non è in realtà difficile o totalmente diverso dai linguaggi di programmazione web. Ma creare o manipolare immagini accattivanti richiede un certo sforzo. Questo non è ciò che ogni sviluppatore vorrebbe investire molto tempo quando le immagini bitmap sono a portata di mano e non richiedono alcuno sforzo per l'incorporamento.

Conclusione

Il comportamento della grafica su un sito Web in risposta alla sua vasta gamma di utenti è un aspetto importante dello sviluppo Web di oggi. E il formato immagine SVG è la grande soluzione, invece di eseguire il rendering di immagini di dimensioni multiple, come di solito si vede nei nostri progetti attuali. Questo perché i browser calcolano come l'immagine dovrebbe essere renderizzata utilizzando una serie di istruzioni che garantiscono immagini chiare e nitide su qualsiasi scala.

Le immagini bitmap rimangono le migliori per immagini altamente dettagliate come fotografie, mentre le immagini SVG vengono utilizzate per immagini meno dettagliate come icone, loghi, grafici, infografiche, ecc. Ti consiglio di utilizzare strumenti di disegno come Illustrator o Sketch per creazione di immagini SVG e librerie online per icone e forme popolari. La codifica dovrebbe essere necessaria solo quando vuoi manipolare le tue immagini SVG.

Facci sapere come usi SVG e altri suggerimenti interessanti non condivisi qui.