Il formato di file SVG spiegato: cos'è, come funziona e quando utilizzarlo

I file SVG sono ovunque online, alimentano silenziosamente le icone, i loghi, i grafici e le illustrazioni che rendono i siti web di oggi nitidi e moderni. Sono il motivo per cui un'icona appare nitida su un display retina. Sono il motivo per cui il logo di un'azienda rimane perfetto indipendentemente da quanto lo ingrandisci. Eppure, a meno che tu non lavori nel design o nello sviluppo, SVG potrebbe essere ancora uno di quei misteriosi formati di file di cui hai sentito parlare ma che non hai mai compreso del tutto.

Rimediamo subito.

Quindi… cos'è davvero un file SVG?

SVG sta per Scalable Vector Graphics. È un formato grafico basato non sui pixel ma sulla matematica. Invece di memorizzare un'immagine come una griglia di punti colorati come fanno PNG o JPG, un SVG descrive delle forme. Linee, curve, cerchi, tracciati. Il tuo browser legge queste istruzioni e disegna l'immagine sullo schermo, in modo perfetto e pulito, ogni volta.

Questo semplice cambiamento – dai pixel alle formule – cambia tutto. Significa che un SVG può essere ridimensionato a qualsiasi dimensione senza mai diventare sfocato. Un'icona da 16 pixel, un logo da 300 pixel, una stampa larga 2 metri – lo stesso file gestisce tutto. Per loghi, illustrazioni ed elementi UI, SVG è difficile da battere.

Perché esiste SVG

Prima di SVG, il web era costruito principalmente con immagini basate sui pixel. I designer esportavano le icone in una dozzina di dimensioni per supportare i diversi schermi. I loghi si sfocavano sui display retina. Gli elementi UI dovevano essere suddivisi in PNG statici. Tutto sembrava più pesante di quanto dovesse essere.

SVG ha risolto l'intero problema in una sola mossa. Un solo file. Dimensioni infinite. Sempre nitido.

E poiché SVG si basa su standard web aperti, puoi personalizzarlo con CSS, animarlo, gestirlo tramite script o incorporarlo direttamente nell'HTML. È uno dei pochi formati che si adatta comodamente sia al mondo del design che a quello dello sviluppo.

SVG vs PNG

PNG è un formato bitmap. Memorizza i pixel. È fantastico per screenshot, asset UI, grafiche ricche di testo o qualsiasi cosa in cui desideri una nitidezza perfetta a una dimensione specifica. Supporta la trasparenza e gestisce le grafiche piatte in modo molto pulito.

SVG, invece, è composto da tracciati vettoriali. Non è legato a una risoluzione. Puoi zoomare all'infinito senza mai vedere un bordo sfocato. E per grafiche semplici come icone o loghi, i file SVG tendono a essere molto più piccoli dei PNG.

Per illustrazioni complesse, PNG potrebbe comunque essere migliore. Per qualsiasi cosa geometrica o simbolica, SVG è il re.

SVG vs JPG

JPG è ottimo per le fotografie del mondo reale: volti, paesaggi, cibo, ombre, tramonti. Comprime in modo aggressivo pur mantenendo un buon aspetto, ed è per questo che è ovunque online.

Ma JPG è sempre basato sui pixel. Zooma abbastanza e vedrai bordi a blocchi e artefatti disturbati. JPG inoltre non supporta la trasparenza, il che lo rende inadatto per loghi o elementi UI.

SVG è l'opposto. Non è affatto pensato per le foto, ma è perfetto per line art, forme piatte e grafiche pulite.

A cosa servono i file SVG

Una volta riconosciuti i punti di forza di SVG, inizi a vederlo ovunque.
Ogni icona su un sito web ben progettato? Probabilmente un SVG.
Un logo di marca nitido che appare perfetto su un display 4K? SVG.
Una mappa, un diagramma o una grafica illustrata che si anima mentre scorri? Anche questo è SVG.

SVG è lo standard moderno per grafiche pulite e scalabili nel web design e nel lavoro sulle UI. I designer lo adorano perché rimane nitido. Gli sviluppatori lo adorano perché si comporta come parte della pagina.

Come aprire o modificare un file SVG

Aprire un file SVG è facile. Qualsiasi browser moderno può visualizzarne uno. Trascina un SVG in Chrome, Safari, Firefox o Edge e vedrai l'immagine all'istante.

La modifica è dove le cose si fanno interessanti. Poiché SVG è un formato vettoriale, hai bisogno di un software di editing vettoriale. Strumenti come Adobe Illustrator, Figma, Affinity Designer o Inkscape possono tutti aprire e modificare i file SVG. Puoi modificare le curve, cambiare i colori, aggiungere forme o riscrivere completamente il disegno.

E poiché sotto il cofano SVG non è altro che testo XML, tecnicamente puoi aprirlo anche con un editor di testo semplice. Non è il modo più comodo di lavorare, ma tutto ciò che c'è all'interno del file è leggibile.

Su iPhone o iPad, gli SVG vengono visualizzati in anteprima nell'app File, ma la gestione più approfondita è limitata. Se vuoi archiviare, visualizzare in anteprima e organizzare gli SVG insieme agli altri tuoi file, Documents by Readdle ti offre un vero e proprio file manager che gestisce grafiche, documenti, ZIP e tutto il resto del tuo flusso di lavoro.

Tutti i browser supportano SVG

Sì. Il supporto dei browser è di fatto universale. Chrome, Firefox, Safari, Edge e i browser mobili moderni comprendono tutti SVG in modo nativo. Se un sito nel 2025 utilizza ancora icone basate sui pixel, si tratta di una scelta di design, non di un limite tecnico.

Si può animare SVG

Sì. SVG è uno dei formati immagine più adatti alle animazioni mai creati. I designer possono animare tratti, forme, colori, rotazioni o interi disegni utilizzando CSS o JavaScript. È così che molti siti web moderni creano quelle sottili animazioni di disegno a linee o quelle icone che pulsano o si trasformano delicatamente mentre scorri.

Non puoi farlo con PNG o JPG.

Come convertire un'immagine SVG in JPG

A volte hai bisogno di una versione a pixel della tua grafica. Magari un sito web richiede il caricamento di un JPG. Magari hai bisogno di un'immagine appiattita per una newsletter o un post sui social. Magari uno strumento più vecchio non supporta affatto SVG.

Convertire SVG in JPG è facile. In Illustrator, Figma o Inkscape puoi esportare l'SVG come JPG alla risoluzione che desideri. Su macOS puoi persino aprire l'SVG in Preview ed esportare da lì.

Se non vuoi installare software, i convertitori online rendono il processo ancora più veloce. Puoi caricare un SVG su documents.io, scegliere JPG come formato di output e scaricare una versione pulita e appiattita in pochi secondi. È l'ideale quando hai bisogno di una conversione rapida senza toccare i tuoi strumenti di design. Puoi provare gratuitamente il convertitore SVG. 

Ricorda solo: JPG non supporta la trasparenza e sarà sempre basato sui pixel, quindi l'immagine non sarà più scalabile all'infinito. Per bordi nitidi, PNG è spesso un'alternativa migliore rispetto a JPG.

Cosa rende SVG unico

SVG è uno di quei rari formati che appare al tempo stesso futuristico e senza tempo. È matematico, modificabile, gestibile tramite script e indipendente dalla risoluzione. Funziona alle dimensioni di un'icona e a quelle di un cartellone pubblicitario. Si comporta come codice ma appare come design. E riesce a rimanere leggero facendo tutto questo.

Una volta che inizi a riconoscere il superpotere di SVG – grafiche nitide a qualsiasi dimensione – lo noti ovunque. I siti web si caricano più velocemente. I loghi non si sfocano mai. Le icone UI sembrano fatte a mano. Persino le animazioni diventano più facili.

SVG è più di un formato di file. È uno standard di design moderno.

In conclusione

SVG è la risposta del web alle grafiche nitide e scalabili. Se la tua immagine deve rimanere nitida indipendentemente da quanto diventa grande, SVG è la scelta giusta. Usalo per icone, loghi, diagrammi, illustrazioni e asset UI. Usa PNG o JPG per le fotografie. E quando hai bisogno di convertire o gestire questi file su mobile o desktop, strumenti come documents.io e Documents by Readdle rendono l'intero processo semplicissimo.