Cos'è un file SVG e come lo usiamo nel web?

Cos'è un file SVG? Con la diffusione di internet e l'uso del web per la promozione di attività e imprese professionali, anche le persone comuni si trovano alle prese con problemi di natura tecnica propri della piattaforma. Vediamo di rispondere insieme a questa domanda.

Il formato SVG

Il formato SVG nasce nel settembre del 2001. Si tratta di un formato standard aperto, sviluppato nell'ambito del W3C (World Wide Web Consortium). Il termine è un acronico che sta per Scalable Vector Graphics.

Con questa tecnologia possiamo visualizzare sul web degli elementi di grafica vettoriale. La grafica vettoriale è un sistema di composizione dell'immagine basato su formule matematiche che definiscono figure geometriche, punti, linee, curve e poligoni ai quali possiamo applicare colori e sfumature. Addirittura è possibile applicare delle animazioni alla grafica.

È un formato che si basa su un linguaggio XML, questo tipo di codice permette la ricerca, l'indicizzazione, la compressione e lo script dei file SVG.

Come utilizziamo la Scalable Vector Graphics

Di solito ci accontentiamo di soluzioni bitmap per le immagini che usiamo sul web, come PNG e JEPG, oppure GIF per le animazioni. Ma non è sempre la scelta ideale.

Andiamo ad approfondire le qualità di uno dei formati più utili.

La natura vettoriale di questo tipo di immagini permette di ridimensionare l'elemento grafico a piacimento senza perdere la qualità dei dettagli, senza sfocature. Questo perché, a differenza di una immagine bitmap, basata su pixel rigidi, qui abbiamo a che fare con geometria su base matematica. L'immagine può essere così riprodotta su differenti formati, come schermi desktop, cellulari, stampa, plotter, ecc... Senza perdere di definizione.

Il peso dell'immagine è un altro punto di forza. La compressione del codice SVG ci offre buoni risultati anche in termine di ottimizzazione SEO del sito, immagini leggere e agili, ideali per caricamenti rapidi delle nostre pagine web.

Google accetta e indicizza senza problemi questo tipo di formato, il codice XML integrato in quello HTML del nostro sito viene letto dal motore di ricerca e il contenuto indicizzato. Soltanto, come avviene per tutti i contenuti web, potrebbero volerci i consueti tempi tecnici degli spider di Google.

Le figure espresse con il codice contenuto nel file SVG possono essere anche dinamiche e interattive. Il modello supportato da questo tipo di codice consente la gestione delle animazioni degli oggetti grafici e addirittura eventi che rispondono a differenti tipi di sollecitazioni dell'utente.

Quando non utilizzare le immagini SVG

Come abbiamo detto, i file in SVG sono ideali per tutte quelle immagini che devono essere scalabili, ad esempio sfondi o loghi. Questo formato, però, non è in grado di restituire immagini complesse di qualità.

Quindi, quando ci troviamo di fronte a fotografie o progettazione grafica che l'utente deve essere in grado di fruire, evitiamo la grafica vettoriale. Meglio utilizzare un tipo di formato più tradizionale facendo sempre attenzione però a ottimizzare la sua usabilità per il web.

Creare o modificare un file SVG

Per visualizzare un file in formato SVG basta avere a disposizione un browser, oggi tutti hanno un supporto per il rendering di questo formato. Il discorso cambia radicalmente, invece, quando parliamo di creare o modificare una immagine di questo tipo.

Aprendo uno di questi files con un qualsiasi programma testuale, ci troveremmo di fronte al codice XML che compone l'immagine. Una serie di dati intellegibili che forniscono ai browser le istruzioni su come gestire la nostra immagine.

L'unico modo che abbiamo per creare o gestire una immagine SVG è attraverso specifici programmi di grafica vettoriale, molti dei quali a pagamento. Online potrete trovare, per grafiche più semplici, anche tool gratuiti per la conversione di immagini da bitmap a vettoriale.