Se hai già provato ad ingrandire un logo e hai visto l'immagine diventare sfocata e pixelata, sai quanto sia frustrante questo problema. L'SVG esiste per risolvere esattamente questo. È un formato di immagine che funziona in modo completamente diverso da JPG e PNG — e capire questa differenza è essenziale per usare il formato giusto in ogni situazione.
Cosa significa SVG?
SVG significa Scalable Vector Graphics — "grafica vettoriale scalabile". È un formato di immagine aperto, standardizzato dal W3C (lo stesso consorzio che definisce le specifiche di HTML e CSS), e supportato nativamente da tutti i browser moderni.
A differenza di JPG e PNG, che memorizzano le immagini come una griglia di pixel colorati, l'SVG descrive l'immagine in formato testo, usando coordinate matematiche per rappresentare forme, linee, curve e colori. Un file SVG è, in pratica, un file di testo — e può essere aperto e modificato in qualsiasi editor di codice.
Come funziona l'SVG internamente?
Un file SVG è scritto in XML, un linguaggio di markup simile all'HTML. Ad esempio, un cerchio rosso in SVG viene descritto così:
Il browser legge queste istruzioni matematiche e renderizza l'immagine direttamente sullo schermo, calcolando i pixel in tempo reale. Per questo l'SVG può essere visualizzato a qualsiasi dimensione — da una favicon di 16x16 pixel fino a un cartellone pubblicitario di 10 metri — senza alcuna perdita di qualità.
Quali sono i vantaggi dell'SVG?
- Scalabile senza perdita di qualità: ingrandisci o riduci a piacere — l'immagine rimane nitida a qualsiasi risoluzione, incluse le schermate Retina e 4K.
- File leggeri: loghi e icone semplici in SVG sono generalmente molto più piccoli rispetto al PNG, specialmente a dimensioni grandi.
- Modificabile con il codice: è possibile cambiare colori, dimensioni e animazioni direttamente tramite CSS o JavaScript, senza bisogno di un editor di immagini.
- Indicizzabile dai motori di ricerca: poiché il contenuto è testo, Google riesce a leggere e indicizzare il testo all'interno di un SVG.
- Supporto alle animazioni: è possibile creare animazioni CSS e SMIL direttamente in SVG, senza dipendere da GIF o video.
- Accessibilità: titoli e descrizioni possono essere aggiunti all'SVG per i lettori di schermo.
Quali sono i limiti dell'SVG?
- Non adatto per le foto: le fotografie hanno milioni di variazioni di colore e gradienti complessi. Rappresentare questo in vettori genererebbe file enormi e poco efficienti — il JPG è sempre la scelta giusta per le foto.
- Le immagini complesse diventano pesanti: illustrazioni molto dettagliate, con molte forme e gradienti, possono generare SVG grandi e lenti da renderizzare.
- Curva di apprendimento per la modifica manuale: modificare l'SVG direttamente nel codice richiede conoscenza di XML e matematica vettoriale. Strumenti come Illustrator o Figma facilitano questo processo.
💡 Regola pratica: usa l'SVG per loghi, icone, illustrazioni, grafici, mappe e qualsiasi arte che debba essere visualizzata in più dimensioni. Usa JPG o WebP per fotografie e immagini con molti dettagli e gradienti complessi.
SVG vs PNG vs JPG — quando usare ciascuno?
| Caratteristica | SVG | PNG | JPG |
|---|---|---|---|
| Tipo | Vettoriale | Raster (pixel) | Raster (pixel) |
| Scalabile senza perdita | Sì | No | No |
| Trasparenza | Sì | Sì | No |
| Ideale per foto | No | No | Sì |
| Ideale per loghi e icone | Sì | Sì | No |
| Modificabile via CSS/JS | Sì | No | No |
| Supportato nei browser | Sì | Sì | Sì |
Come usare l'SVG in siti e applicazioni
Ci sono tre modi principali per includere un SVG in una pagina web:
- Come tag <img>: il modo più semplice. L'SVG viene trattato come qualsiasi altra immagine, ma non può essere manipolato tramite CSS o JavaScript.
- Inline nell'HTML: il codice SVG viene inserito direttamente nell'HTML della pagina. Permette controllo totale tramite CSS e JS — colori, animazioni e interazioni. È l'approccio preferito per le icone interattive.
- Come background CSS: usando
background-image: url('icona.svg'). Utile per icone decorative, ma con accesso limitato tramite JavaScript.
Come convertire immagini in SVG?
Convertire una foto o un PNG in SVG è possibile attraverso un processo chiamato vettorizzazione, che trasforma i pixel in forme geometriche. Il risultato è migliore per immagini semplici, con pochi colori e bordi ben definiti — come loghi con sfondo bianco. Il convertitore di immagini di ImageTools permette di convertire file tra i principali formati, inclusi PNG e JPG verso altri formati compatibili con il web.
Converti le tue immagini ora
Trasforma i file tra i principali formati di immagine in modo rapido e gratuito, direttamente nel browser.
Converti immagineL'SVG è buono per la SEO?
Sì. Poiché l'SVG è un formato basato su testo, Google riesce a scansionare e indicizzare il suo contenuto. Inoltre, loghi e icone in SVG sono generalmente più piccoli rispetto al PNG, contribuendo a pagine più veloci — un fattore diretto di ranking su Google dall'implementazione dei Core Web Vitals.
Per ottimizzare gli SVG per la SEO, aggiungi gli attributi title e desc all'interno del codice SVG, che funzionano come testo alternativo per i lettori di schermo e i motori di ricerca.