SVG vs PNG: Guida Completa per Scegliere il Formato Giusto
Scopri le differenze fondamentali tra SVG e PNG e impara quando usare ciascun formato per ottimizzare i tuoi progetti grafici.
Founder of VectoSolve
Self-taught developer, founder and sole developer of VectoSolve since 2024. He builds the conversion engine and the cutting, embroidery and 3D printing exports.
How this article was made: drafted with AI assistance, then edited and fact-checked before publication. About the author
Perché la scelta del formato immagine conta davvero
SVG o PNG? Scegli male e la tua sezione hero carica un file raster da 2 MB che diventa sfocato su display Retina. O passi ore a convertire una foto in tracciati vettoriali che esplodono a 14 MB di XML.
SVG e PNG non sono in competizione — sono strumenti complementari per lavori fondamentalmente diversi. Capire questa distinzione è la cosa più impattante che puoi fare per performance, accessibilità e qualità visiva del tuo sito.
Come funziona SVG sotto il cofano
SVG (Scalable Vector Graphics) è un linguaggio di markup basato su XML. Invece di memorizzare valori di colore per ogni pixel, memorizza istruzioni: «disegna un cerchio a (50, 50) con raggio 40 e riempilo di blu.» Il browser esegue queste istruzioni al momento del rendering, rendendo l'output indipendente dalla risoluzione per design.
<!-- Un'icona SVG semplice — 247 byte -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="#4F46E5" />
<path d="M35 50 L45 60 L65 40" stroke="#fff" stroke-width="6"
fill="none" stroke-linecap="round" stroke-linejoin="round"/>
</svg>Poiché SVG vive nel DOM, puoi stilizzarlo con CSS, animarlo con JavaScript e renderlo interattivo — una potenza unica per visualizzazioni e interfacce dinamiche.
- Rendering matematico — nitido dalla favicon di 16 px al cartellone di 3 metri.
- Il testo resta testo — indicizzabile dai motori di ricerca, leggibile dagli screen reader.
- Stilizzabile e scriptabile — cambia colori dinamicamente, aggiungi effetti hover, crea animazioni.
- Compressione eccellente — gzip riduce SVG del 60-80% perché XML è ripetitivo.
Come funziona PNG sotto il cofano
PNG (Portable Network Graphics) è un formato raster lossless che memorizza il colore esatto di ogni pixel. Visualizza un PNG 1000×1000 e il browser mappa quei milioni di valori sui pixel dello schermo. Se l'area di visualizzazione è più grande, il browser interpola — è lì che appare la sfocatura.
- Fedeltà pixel-perfect — ogni valore di colore preservato esattamente.
- Trasparenza alfa completa — bordi lisci su qualsiasi sfondo.
- Supporto universale — ogni browser, client email e OS gestisce PNG.
- Rendering prevedibile — nessuna analisi complessa dei percorsi.
Tabella comparativa definitiva
| Caratteristica | SVG | PNG | Vincitore |
|---|---|---|---|
| Scalabilità | Infinita — nitido a qualsiasi risoluzione | Fissa — sfocato all'ingrandimento | SVG |
| Dimensione (semplice) | Minuscola (spesso < 1 KB per icone) | Maggiore (spesso 5-50 KB) | SVG |
| Dimensione (complessa) | Enorme (milioni di tracciati) | Ragionevole con compressione | PNG |
| Animazione | CSS, SMIL, JS, Lottie, GreenSock | Non nativamente (serve APNG) | SVG |
| Accessibilità | Title/desc/aria-labels nel markup | Solo attributo alt | SVG |
| Sicurezza | Rischio XSS con SVG inline | Nessun rischio di esecuzione script | PNG |
Benchmark di performance
| Metrica | SVG Sprite | SVG singoli | PNG Sprite | PNG singoli |
|---|---|---|---|---|
| Dimensione totale | 12 KB | 18 KB (24 req.) | 48 KB | 96 KB (24 req.) |
| Trasferimento gzip | 4 KB | 6 KB | 44 KB | 88 KB |
| Tempo di parsing | 2,1 ms | 3,8 ms | 0,4 ms | 0,6 ms |
| Prima visualizzazione (3G) | 120 ms | 340 ms | 180 ms | 890 ms |
Matrice dei casi d'uso
Quando SVG vince
- Loghi e marchi — un file, tutte le dimensioni, per sempre.
- Icone ed elementi UI — stilizza con CSS custom properties per il theming.
- Visualizzazioni dati — D3.js, Chart.js, Recharts generano tutti SVG.
- Illustrazioni animate — Lottie, GreenSock o CSS puro.
- Mappe e diagrammi — zoomabili, interattivi, accessibili.
Quando PNG vince
- Fotografie — milioni di colori unici con sfumature morbide.
- Screenshot — la precisione a livello di pixel conta.
- Texture complesse — i dettagli organici non si traducono in vettori.
- Campagne email — molti client email non supportano SVG.
Regola di decisione rapida: «Potrei ricreare questo in Figma solo con gli strumenti forma?» Se sì → SVG. Se dovessi importare una foto → PNG. Devi convertire raster in vettore? Il vettorizzatore IA di VectoSolve lo fa in secondi.
Sicurezza SVG: il vettore XSS che devi conoscere
SVG inline può eseguire JavaScript. Un file con tag <script> o handler onload esegue codice arbitrario nel browser dell'utente. Non rendere mai SVG caricati dagli utenti inline senza sanitizzazione.
Best practice moderne
- SVG: Passa attraverso l'ottimizzatore di VectoSolve o SVGO.
- PNG: Usa pngquant o oxipng per compressione lossy/lossless.
Hai un logo PNG che dovrebbe essere SVG? VectoSolve usa l'IA per tracciare immagini raster in percorsi vettoriali puliti — spesso il 90% più piccolo.
Conclusione: non esiste un formato «migliore»
SVG e PNG esistono perché le immagini si dividono in due categorie: costruite (forme, testo, geometria) e catturate (foto, scansioni, screenshot). Associa il formato al contenuto, ottimizza in modo aggressivo e consegnerai pagine veloci, nitide e accessibili su ogni dispositivo.
| Attributo | SVG | PNG |
|---|---|---|
| Tipo | Vettore (matematico) | Raster (pixel) |
| Scalabilità | Infinita — nessuna perdita di qualità | Fissa — sfocato all'ingrandimento |
| Ideale per | Loghi, icone, elementi UI | Foto, screenshot, immagini complesse |
| Dimensione tipica (icona) | 1–5 KB | 10–50 KB |
| Supporto animazione | Animazioni CSS + JS | Solo APNG (supporto limitato) |