File SVG: guida completa e download gratuito

Hai mai notato che i loghi dei grandi marchi sono sempre perfetti? Sullo schermo di uno smartwatch come su un cartellone di sei metri. Il segreto non è un software costoso, ma un formato di file che usi ogni giorno senza saperlo: l’SVG.

Un SVG non è una foto. Non è fatto di puntini colorati, ma di istruzioni che dicono al browser cosa disegnare. Per questo puoi ingrandirlo quanto vuoi senza che si sgrani.

In questa guida ti mostro come funziona, quando conviene usarlo al posto di PNG e JPG, come modificarlo e come metterlo sul tuo sito. In fondo trovi SVG gratuiti da copiare o scaricare. Ma prima c’è un dettaglio nascosto che può rovinare un file senza che tu te ne accorga. Ci arriviamo tra poco.

Cos’è un file SVG

Un file SVG (Scalable Vector Graphics, cioè “grafica vettoriale scalabile”) è un’immagine fatta di istruzioni invece che di pixel. Non contiene migliaia di puntini colorati, ma indicazioni come “disegna un cerchio qui, di questa misura, di questo colore”. Per questo resta nitido a qualsiasi dimensione.

Prova a immaginare la differenza. Se ingrandisci la foto di un cerchio, prima o poi vedi i quadratini. Se ingrandisci un SVG, il cerchio resta perfetto, perché il browser lo ridisegna ogni volta alla misura giusta.

E c’è di più: dato che è fatto di istruzioni, un SVG si può aprire, modificare e perfino animare. È uno standard del W3C, l’ente che scrive le regole del web, e tutti i browser moderni lo leggono senza bisogno di nient’altro.

SVG, PNG o JPG: quale scegliere

Non esiste il formato migliore in assoluto. Esiste quello giusto per ogni immagine. La regola pratica è semplice: se l’immagine si può disegnare, usa l’SVG; se si può solo fotografare, usa un formato a pixel.

Un logo in SVG pesa spesso pochi kilobyte e resta perfetto su ogni schermo, anche su quelli ad alta densità dei telefoni. Lo stesso logo in PNG dovresti salvarlo in più dimensioni, e ognuna peserebbe di più.

Al contrario, una foto in SVG non ha senso: per descrivere ogni sfumatura servirebbero milioni di istruzioni. Per le foto resta il JPG, o i formati più moderni come WebP e AVIF.

Com’è fatto un SVG dentro

Ecco la parte che quasi nessuno ti racconta: un SVG è un file di testo. Se lo apri con il Blocco note, invece di caratteri strani trovi codice che puoi leggere. Questo, per esempio, è un cerchio dorato completo:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="96" height="96">
  <!-- un cerchio al centro di una tela 24 × 24 -->
  <circle cx="12" cy="12" r="9" fill="#e2b04e" />
</svg>

Si legge quasi come una frase. cx e cy sono il centro, r è il raggio e fill è il colore di riempimento. Cambia #e2b04e con red, salva, e il cerchio diventa rosso.

Il viewBox: il dettaglio nascosto

Ricordi il dettaglio di cui ti parlavo all’inizio? È lì, nella prima riga: viewBox="0 0 24 24". Sono quattro numeri che dicono al browser “il mio disegno vive in uno spazio largo 24 e alto 24, a partire dall’angolo in alto a sinistra”.

Grazie al viewBox, il browser sa come adattare il disegno a qualsiasi dimensione. Gli dici width="96" e lui ingrandisce tutto quattro volte, in proporzione. Senza viewBox, invece, cambiare larghezza e altezza allarga solo la tela: il disegno resta piccolo nell’angolo, oppure viene tagliato.

Come aprire e modificare un SVG

Per guardarlo basta il browser: trascina il file in una finestra di Chrome, Firefox, Safari o Edge e lo vedi subito, a tutto schermo e nitido. Per modificarlo hai tre strade, dalla più semplice alla più completa.

• Un editor di testo, come il Blocco note o Visual Studio Code. Perfetto per piccoli ritocchi: cambiare un colore, controllare il viewBox, togliere un elemento.
• Inkscape, gratuito e open source. Usa l’SVG come formato principale, quindi è la scelta più naturale per disegnare e modificare.
• Figma o Illustrator. Aprono gli SVG come qualsiasi disegno vettoriale e li esportano di nuovo in SVG quando hai finito.

Un consiglio pratico: quando esporti da un programma di grafica, cerca l’opzione per salvare un SVG “per il web” o “ottimizzato”. Il file sarà più pulito e più leggero.

Come usare un SVG nel tuo sito

Hai il tuo SVG pronto. Ora devi metterlo in pagina, e qui hai tre modi. Ognuno ha un punto forte, quindi la scelta dipende da cosa ti serve.

Con il tag img

È il modo più semplice, identico a quello che usi per una foto:

<img src="logo.svg" alt="Logo di Studio Rossi" width="160" height="40">

Il browser lo mette in memoria come un’immagine qualsiasi, ed è anche il modo più sicuro: un eventuale codice nascosto nel file non viene eseguito. Il limite è che non puoi cambiarne i colori dal CSS della pagina.

Direttamente nel codice della pagina

Puoi incollare il codice dell’SVG dentro l’HTML. Così fa parte della pagina, e puoi colorarlo, animarlo e cambiarlo al passaggio del mouse con il CSS.

<button type="button">
  <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
    <path d="M4 12h16" stroke="currentColor" stroke-width="2" />
  </svg>
  Riduci
</button>

Qui aria-hidden="true" dice ai lettori di schermo di ignorare il disegno: il testo “Riduci” spiega già il pulsante. Se invece l’SVG è l’unica cosa che comunica il significato, aggiungi role="img" e un’etichetta con aria-label.

Come sfondo nel CSS

Per un motivo decorativo che si ripete, una texture o una forma dietro al testo, usalo come sfondo:

.sezione {
  background-image: url("motivo-a-pois.svg");
  background-size: 40px;
}

Il trucco di currentColor

Nell’esempio del pulsante hai visto stroke="currentColor". Vuol dire “usa il colore del testo che mi circonda”. Così l’icona cambia colore insieme al testo, anche quando passi dal tema chiaro a quello scuro, senza toccare il file.

È il motivo per cui quasi tutte le icone professionali sono scritte così. Funziona solo quando l’SVG è nel codice della pagina, non dentro un tag img. Se vuoi una raccolta di icone già pronte in questo modo, le trovi nella libreria di icone SVG gratuite, il prossimo articolo della serie.

Come rendere un SVG più leggero

Un SVG esportato da un programma di grafica porta spesso con sé informazioni che al browser non servono: il nome del programma, livelli nascosti, commenti, numeri con sei decimali. Toglierle può dimezzare il peso del file senza cambiare di un pixel il disegno.

• SVGOMG, gratuito e nel browser: trascini il file, scegli cosa togliere e vedi subito il risultato prima di scaricarlo.
• SVGO, lo strumento a riga di comando su cui si basa SVGOMG: comodo se hai molti file o se lavori già con Node.js.
• A mano, per i file piccoli: togli i commenti e i metadati, e arrotonda i numeri a uno o due decimali.

Due accortezze. Controlla che dopo l’ottimizzazione il viewBox ci sia ancora, e non esagerare con l’arrotondamento: con troppi pochi decimali le curve si deformano. C’è poi un vantaggio che arriva gratis: essendo testo, un SVG si comprime benissimo, e molti server lo spediscono già compresso.

SVG gratuiti da copiare e scaricare

Ecco la raccolta promessa. Icone per interfacce, sigilli, pattern ripetibili, divisori e un monogramma di esempio: tutti con il viewBox, puliti e leggeri. Tutti usano currentColor, quindi prendono il colore del testo intorno quando li incolli nel codice. Con “Copia” prendi il codice, con “Scarica” il file.

• 

  Scarica

• 

  Scarica

• 

  Scarica

• 

  Scarica

• 

  Scarica

• 

  Scarica

• 

  Scarica

• 

  Scarica

• 

  Scarica

• 

  Scarica

• 

  Scarica

• 

  Scarica

Tutti gli SVG di questa raccolta li ho creati e curati per questo sito, e sono tuoi da usare: in progetti personali e commerciali, per te o per i tuoi clienti, modificati come preferisci. Non serve citarmi, anche se mi fa piacere. L’unica cosa che ti chiedo è di non rivenderli o ridistribuirli così come sono, da soli o in raccolte. E il monogramma «AM» è solo un esempio: usalo per fare pratica, non come marchio registrato.

Domande frequenti

Come si apre un file SVG?

Con il browser: trascinalo in una finestra di Chrome, Firefox, Safari o Edge. Per modificarlo usa un editor di testo per i piccoli ritocchi, oppure Inkscape (gratuito), Figma o Illustrator per lavorare sul disegno.

Meglio SVG o PNG per un logo?

SVG, quasi sempre. Resta nitido a ogni dimensione, pesa poco e puoi cambiarne i colori. Tieni una versione PNG solo per i posti che non accettano SVG, come alcune piattaforme di email o di social.

Si può trasformare un SVG in PNG o JPG?

Sì, ed è facile: Inkscape, Figma e Illustrator lo esportano nella dimensione che vuoi. Il contrario invece non funziona bene, perché un’immagine a pixel non contiene le istruzioni per ridisegnarsi: va ricalcata.

Un file SVG si può stampare?

Sì, e viene benissimo proprio perché è vettoriale. Molte tipografie però chiedono un PDF: aprilo in Inkscape o Illustrator e salvalo in PDF, il disegno resta vettoriale anche lì.

Perché il mio SVG viene tagliato o resta piccolissimo?

Quasi sempre manca il viewBox, oppure non corrisponde al disegno. Apri il file con un editor di testo e controlla la prima riga: senza viewBox il browser non sa come adattare il disegno alla nuova dimensione.

Gli SVG sono sicuri?

Essendo codice, un SVG può contenere script. Dentro un tag img il browser non li esegue, quindi sei al sicuro. Fai attenzione invece agli SVG di provenienza sconosciuta da incollare nel codice della pagina: aprili prima e controlla che non ci siano tag script. Quelli della raccolta qui sopra li ho ripuliti uno per uno.

Fonti e approfondimenti

• MDN Web Docs: SVG
• MDN Web Docs: l’attributo viewBox
• W3C: specifica SVG 2
• SVGOMG, ottimizzatore di SVG nel browser
• SVGO su GitHub
• Inkscape

Ora sai come funziona un SVG, come sceglierlo e come metterlo nel tuo sito. Ma la cosa che userai più spesso, in ogni sito e in ogni app, sono le icone. Nel prossimo articolo trovi una libreria di icone SVG gratuite e ti spiego come sceglierle, ricolorarle e inserirle, anche senza scrivere codice.