Scalable Vector Graphics, abbreviato comunemente in SVG, è un formato di file basato su linguaggio di marcatura per la descrizione di immagini vettoriali bidimensionali. A differenza dei formati raster, che rappresentano un’immagine come una griglia di pixel, SVG descrive le figure tramite elementi geometrici quali linee, curve, poligoni e testi, definiti attraverso coordinate matematiche. Questa caratteristica consente di ingrandire o ridurre l’immagine senza alcuna perdita di qualità, poiché la resa viene ricalcolata dal programma di visualizzazione a partire dalle istruzioni originali.
Il formato è uno standard aperto sviluppato dal World Wide Web Consortium, noto anche come W3C, e si integra naturalmente con le tecnologie del web. Essendo basato su testo, un file SVG può essere letto, modificato e ottimizzato con strumenti comuni, oltre che stilizzato tramite fogli di stile e reso dinamico attraverso le normali tecnologie di programmazione lato client. Per queste ragioni è ampiamente utilizzato in ambito SEO e nello sviluppo front-end, dove la leggerezza e la nitidezza dei contenuti grafici incidono sulle prestazioni e sull’esperienza di navigazione.
Caratteristiche tecniche del formato
Un documento SVG è un file di testo strutturato secondo una sintassi di tipo XML. Gli elementi che lo compongono descrivono primitive geometriche come rettangoli, cerchi, ellissi, linee e tracciati, oltre a testi e immagini esterne incorporate. A ciascun elemento possono essere applicati attributi di stile, trasformazioni, gradienti e filtri, consentendo di ottenere risultati visivi complessi mantenendo il file relativamente leggero.
Poiché le istruzioni sono vettoriali, il formato non dipende da una risoluzione fissa. Lo stesso file può essere visualizzato su uno schermo di piccole dimensioni o stampato in grande formato senza deterioramento. Questa indipendenza dalla risoluzione rappresenta il principale vantaggio rispetto ai formati raster tradizionali, che invece richiedono versioni multiple per adattarsi a densità di pixel differenti.
Differenze rispetto ai formati raster
I formati raster, come JPEG e PNG, memorizzano l’immagine come una mappa di pixel colorati. Ingrandendo oltre la dimensione nativa, i bordi e i dettagli diventano sfocati o mostrano artefatti visibili. SVG, al contrario, conserva la descrizione matematica della figura e la ridisegna a ogni scala, mantenendo contorni netti e definiti. Di conseguenza, per loghi, icone e illustrazioni geometriche il vettoriale risulta generalmente preferibile.
Supporto nei browser e negli strumenti
I principali browser moderni supportano la visualizzazione nativa di SVG, sia come file autonomo sia incorporato all’interno di una pagina web. Analogamente, la maggior parte dei programmi di grafica vettoriale e degli editor di codice permette di creare e modificare questi file. La diffusione del supporto ha reso il formato una scelta consolidata per icone, interfacce e illustrazioni destinate al web.
Vantaggi per la SEO e le prestazioni
Dal punto di vista dell’ottimizzazione per i motori di ricerca, SVG offre diversi benefici. Essendo basato su testo, il suo contenuto può includere elementi descrittivi leggibili dalle tecnologie assistive e dai crawler, migliorando l’accessibilità e la comprensione del contenuto grafico. Inoltre, la possibilità di comprimere efficacemente il file riduce il peso della pagina e contribuisce a tempi di caricamento più rapidi.
Un ulteriore vantaggio riguarda la scalabilità: un singolo file può servire schermi a bassa e alta densità senza necessità di versioni multiple. Questo semplifica la gestione delle risorse grafiche e riduce il numero di richieste al server, con effetti positivi sulle metriche di velocità percepite dagli utenti.
Accessibilità e testo ricercabile
Poiché il testo all’interno di un’immagine SVG rimane testo e non viene convertito in pixel, esso può essere selezionato, copiato e letto dai dispositivi di assistenza. Aggiungendo titoli e descrizioni appropriate, si migliora la comprensione del contenuto grafico anche in assenza di visualizzazione.
Ambiti di utilizzo
SVG trova impiego in numerosi contesti: loghi aziendali, icone di interfaccia, mappe interattive, grafici e diagrammi, animazioni leggere e illustrazioni tecniche. La sua natura vettoriale lo rende adatto ogni volta che la nitidezza e la scalabilità siano requisiti importanti, mentre risulta meno indicato per fotografie e immagini con sfumature tonali molto ricche.
Nel web design moderno il formato è spesso preferito per gli elementi grafici dell’interfaccia, poiché consente di modificare colori e dimensioni direttamente tramite fogli di stile. Questa flessibilità facilita la creazione di temi coerenti e l’adattamento dei contenuti a contesti diversi.
Confronto con altri formati grafici
| Formato | Tipo | Scalabilità | Uso tipico |
|---|---|---|---|
| SVG | Vettoriale | Illimitata | Loghi, icone, diagrammi |
| PNG | Raster | Limitata | Immagini con trasparenza |
| JPEG | Raster | Limitata | Fotografie |
| GIF | Raster | Limitata | Animazioni semplici |
| WebP | Raster | Limitata | Immagini web compresse |
Buone pratiche di ottimizzazione
- Ridurre il numero di elementi e di attributi superflui all’interno del file.
- Eliminare i metadati non necessari generati dagli strumenti di editing.
- Comprimere il file con algoritmi di compressione lossless prima della pubblicazione.
- Utilizzare simboli e riferimenti per riutilizzare forme ripetute.
- Impostare dimensioni e area di visualizzazione coerenti con l’uso previsto.
- Aggiungere titoli e descrizioni per migliorare l’accessibilità.
- Evitare di incorporare immagini raster all’interno del file vettoriale.
- Servire il file con le corrette intestazioni di tipo e di cache.
Domande frequenti
Che cosa significa Scalable Vector Graphics?
L’espressione indica grafica vettoriale scalabile, ovvero un formato che descrive le immagini tramite elementi geometrici anziché pixel, permettendo di ridimensionarle senza perdita di qualità.
SVG è adatto alle fotografie?
In genere no. Le fotografie contengono moltissime sfumature e dettagli che il vettoriale gestisce in modo inefficiente, risultando in file pesanti e poco pratici rispetto ai formati raster.
SVG può essere animato?
Sì, il formato supporta animazioni dichiarative e può essere animato anche tramite fogli di stile e tecnologie di programmazione lato client, mantenendo la scalabilità delle figure.
SVG è indicizzato dai motori di ricerca?
Il contenuto testuale e gli elementi descrittivi possono essere letti dai crawler, contribuendo all’accessibilità e alla comprensione del contenuto grafico all’interno di una pagina.
Quali programmi permettono di creare file SVG?
Esistono editor vettoriali dedicati e strumenti di grafica generalisti che esportano in questo formato, oltre alla possibilità di scrivere o modificare il file direttamente come testo.
SVG influisce sulla velocità di caricamento?
Se ottimizzato correttamente, un file SVG è leggero e riduce il numero di richieste, favorendo tempi di caricamento rapidi e una buona esperienza di navigazione.