SVG: cos'è e quando usarlo
Cos'è l'SVG spiegato semplice: come funziona il formato vettoriale, i vantaggi rispetto alle immagini raster, quando usarlo per loghi e icone e i suoi limiti.
L'SVG è un formato immagine speciale e potentissimo per il web, perfetto per loghi e icone, ma spesso poco compreso. La sua particolarità è che non è fatto di pixel, ma di matematica. In questo articolo ti spiego cos'è l'SVG, come funziona e quando usarlo.
Cos'è l'SVG in parole semplici
L'SVG (Scalable Vector Graphics) è un formato di immagine vettoriale: invece di essere composto da pixel, descrive l'immagine attraverso forme geometriche (linee, curve, punti) definite matematicamente. Questo gli dà una proprietà magica: può essere ingrandito a qualsiasi dimensione senza mai perdere qualità.
La differenza chiave rispetto a formati come JPEG o PNG (immagini "raster", fatte di pixel) è proprio questa: un'immagine raster ingrandita diventa sgranata, un SVG resta perfettamente nitido a qualsiasi dimensione.
Raster vs vettoriale
| Aspetto | Raster (JPEG, PNG) | Vettoriale (SVG) |
|---|---|---|
| Composto da | Pixel | Forme matematiche |
| Ingrandimento | Si sgrana | Resta nitido |
| Peso | Dipende dalle dimensioni | Spesso leggerissimo |
| Ideale per | Foto | Loghi, icone, illustrazioni |
I vantaggi dell'SVG
- Scalabilità infinita: nitido a ogni dimensione, perfetto per schermi di ogni risoluzione.
- Leggerezza: per grafiche semplici, è spesso molto più leggero di un'immagine raster.
- Modificabile via codice: essendo testo, puoi cambiarne colori e forme con CSS e JavaScript.
- Animabile: puoi animare gli elementi di un SVG.
- Ottimo per il responsive: si adatta a qualsiasi dimensione senza versioni multiple.
Quando usare l'SVG
L'SVG è la scelta ideale per:
- Loghi: restano nitidi ovunque, a ogni dimensione.
- Icone: leggere e perfette su ogni schermo.
- Illustrazioni con forme definite (non foto).
- Grafici e diagrammi.
- Elementi decorativi semplici.
In pratica, per tutto ciò che è "grafica" piuttosto che "fotografia".
Quando NON usare l'SVG
L'SVG ha un limite preciso: non è adatto alle fotografie. Le foto, con le loro infinite sfumature e dettagli, non si descrivono bene con forme geometriche; un SVG di una foto sarebbe enorme e impreciso. Per le foto, usa i formati raster moderni come WebP o AVIF.
In sintesi: SVG per grafica e vettoriale, raster per le foto.
SVG e performance
Per loghi e icone, l'SVG è ottimo per le performance: leggero, scalabile, senza bisogno di versioni multiple per schermi diversi. Sostituire icone in PNG con SVG è spesso un piccolo miglioramento di velocità e qualità. È uno degli accorgimenti dell'ottimizzazione delle immagini.
Una nota sulla sicurezza
Poiché l'SVG è codice (può contenere script), va trattato con un minimo di attenzione quando provieni da fonti non fidate (ad esempio, SVG caricati da utenti). Per i tuoi loghi e icone non c'è problema; per SVG da terze parti, è bene "sanitizzarli". È un dettaglio tecnico, ma vale la pena saperlo.
In sintesi
L'SVG è un formato immagine vettoriale che descrive le immagini con forme matematiche invece che con pixel, permettendo di ingrandirle a qualsiasi dimensione senza perdere qualità. È leggero, modificabile via codice e animabile, ideale per loghi, icone, illustrazioni e grafici. Non è adatto alle fotografie, per cui servono formati raster come WebP o AVIF. Per le grafiche del web, l'SVG è spesso la scelta migliore per qualità e performance.
Per il contesto, vedi i migliori formati immagine per il web e come ottimizzare le immagini.
Contenuto redatto con l'assistenza di strumenti di intelligenza artificiale e rivisto dalla redazione di Codegrind, che ne è responsabile. Hai trovato un errore? Scrivici.