Il termine SVG è un acronimo e sta per Scalable Vector Graphics, in italiano: Grafica Scalabile Vettoriale. Si tratta quindi di un formato utilizzato per creare immagini vettoriali, un formato che sta prendendo sempre più piede nella grafica web.
Le immagini vettoriali
Innanzitutto andiamo a spiegare cosa è la grafica vettoriale.
In grafica vettoriale una immagine è espressa tramite una serie di formule matematiche che vanno a disegnare curve, linee, punti e poligoni. A questi elementi possono essere associati colori e sfumature. La grafica vettoriale si differenzia dal formato raster (che genera immagini in bitmap) proprio per l'utilizzo di queste formule.
Grazie a questa caratteristica è possibile ridimensionare a piacere qualsiasi immagine realizzata in grafica vettoriale senza che questa perda di definizione. Una immagine del genere non è solo adatta ad essere stampata su grandi formati ma anche a essere visualizzata su schermi di diverse dimensioni.
La storia del formato SVG
Il formato immagine SVG è stato lanciato nel settembre del 2001 dal World Wide Web Consortium (W3C). Si tratta di un organismo non governativo internazionale che coordina l'attività sul web, fissa delle linee guida standard per migliorare l'accessibilità alla rete e promuove la sua evoluzione.
I file SVG si basano sul linguaggio XML, questo linguaggio di markup (come l'HTML) è stato sviluppato appunto dal W3C perché fosse fruibile sia dagli umani che dalle macchine. Il codice del file SVG contiene le coordinate per la struttura dell'immagine.
La rilevanza di questo formato per le immagini è cresciuta negli ultimi anni grazie al supporto ricevuto nei maggiori browser e nelle app.
Quali sono i vantaggi del suo utilizzo?
Il formato SVG è particolarmente consigliato per il web, soprattutto per ottimizzare i siti internet in ottica SEO.
A parte il vantaggio della scalabilità offerto dalla grafica vettoriale, il file ha un peso minore delle immagini bitmap anche quando queste sono ottimizzate. In più, i motori di ricerca come Google, possono effettuare l'indicizzazione del codice questo tipo di contenuti. In particolare Google riporta:
Per creare icone più complesse, SVG offre un risultato più leggero, intuitivo e personalizzabile con CSS. SVG offre diversi vantaggi rispetto alle immagini raster.
In particolare il formato si adatta perfettamente per l'inserimento di loghi, clipart o marchi.
Le possibili controindicazioni del SVG
Essendo un formato vettoriale, le immagini prodotte con questo codice sono adatte per elementi semplici. I loghi sono un tipico esempio, come dicevamo prima.
Non è adatto alle fotografie: immagini più complesse non sono rese in maniera efficace. In quei casi conviene utilizzare sempre immagini raster con la più classica estensione jpg o la più recente webp.
Il codice SVG in un sito è potenzialmente vulnerabile. Come anticipato si tratta di un linguaggio di markup XML e, se il codice non è creato da una fonte affidabile, può contenere codice malevolo.
È sempre saggio limitare il caricamento di file in SVG a utenti affidabili.
Come creare un file SVG
In rete esistono alcuni programmi specifici per la conversione di un file bitmap in un svg, tuttavia è sempre meglio procedere alla creazione con un software specifico per le immagini vettoriali.
Inkscape (gratuito) o Adobe Illustrator e CorelDraw (a pagamento) sono programmi pensati per la creazione e la modifica di questi file utilizzati da web e graphic designer esperti.