Guida
Cos'è un file SVG?
SVG sta per Scalable Vector Graphics. Un file SVG descrive un'immagine con forme e coordinate invece che con pixel, quindi resta nitido a qualsiasi dimensione.
File SVG: cosa sono e come funzionano
Un SVG è un file di testo scritto in XML. Invece di memorizzare il colore di ogni pixel, memorizza istruzioni: disegna un cerchio qui, un tracciato che passa per questi punti, riempilo con questo colore. Il browser o l'editor legge queste istruzioni e disegna l'immagine alla dimensione in cui viene mostrata.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="#C8F031"/>
</svg>Questo frammento è un SVG completo: un cerchio verde lime in un'area di 100 per 100 unità. Dato che è testo, un SVG si può aprire in un editor di codice, cercare, comprimere e modificare a mano.
SVG è uno standard aperto del World Wide Web Consortium, pubblicato per la prima volta nel 2001 (W3C). Tutti i browser moderni lo mostrano senza plugin.
SVG che formato è: estensione e tipo MIME
I file SVG usano l'estensione .svg e il tipo MIME image/svg+xml. Una variante compressa, .svgz, è lo stesso file compresso con gzip. Anche alcuni software per plotter da taglio e strumenti per font usano l'SVG, ma il formato è lo stesso.
A cosa serve il formato SVG
- Loghi e icone su siti web e app, perché un solo file appare nitido su ogni densità di schermo.
- Illustrazioni, grafici e mappe che devono essere ingranditi o stampati in grande.
- Animazioni e grafica interattiva, dato che ogni forma si può stilizzare con CSS o modificare con JavaScript.
- Plotter da taglio e macchine per il taglio laser, che seguono i contorni delle forme.
- Favicon nei browser moderni.
L'SVG non è adatto alle foto. Una foto ha toni continui che richiederebbero milioni di forme minuscole; JPG e WebP la memorizzano in modo molto più efficiente.
Come aprire un file SVG
Qualsiasi browser apre un SVG: trascina il file in una finestra di Chrome, Firefox, Safari o Edge. Per vedere il codice accanto all'immagine, usa il nostro visualizzatore SVG. Per modificare il disegno, usa un editor vettoriale come Inkscape (gratuito), Figma o Adobe Illustrator. Su Windows, Esplora file può mostrare le miniature degli SVG con un'estensione; su Mac, Visualizzazione rapida li mostra premendo la barra spaziatrice.
SVG è vettoriale: le differenze con il PNG
| SVG | PNG | |
|---|---|---|
| Composto da | Forme e coordinate | Pixel |
| Ridimensionamento | Nitido a qualsiasi dimensione | Sfocato se ingrandito |
| Trasparenza | Sì | Sì |
| Modificabile come testo | Sì | No |
| Ideale per | Loghi, icone, diagrammi | Screenshot, immagini dettagliate, piattaforme che non accettano SVG |
Puoi convertire in entrambe le direzioni: il convertitore da PNG a SVG traccia i pixel in forme, e il convertitore SVG in PNG trasforma le forme in pixel alla dimensione che scegli.