SVG vs PNG: vettoriale vs raster — quando usare quale
SVG e PNG risolvono problemi fondamentalmente diversi. SVG memorizza le immagini come forme matematiche scalabili all'infinito senza perdita. PNG le memorizza come griglia di pixel a risoluzione fissa. Scegliere il formato sbagliato costa prestazioni o qualità visiva.
Come funziona SVG
SVG (Scalable Vector Graphics) è un formato basato su XML che descrive le immagini come forme geometriche: cerchi, rettangoli, curve di Bézier, percorsi. Il browser interpreta questa descrizione matematica e la renderizza alla risoluzione dello schermo corrente. Un logo SVG di 2 KB appare nitido sia su un telefono da 375px sia su un monitor 8K da 7680px — senza un singolo pixel sfuocato.
SVG è editabile con qualsiasi editor di testo, animabile con CSS e JavaScript, e il suo codice XML è direttamente incorporabile nell'HTML.
Come funziona PNG
PNG (Portable Network Graphics) memorizza ogni pixel come dato di colore in una griglia a risoluzione fissa. Un PNG da 400×400 pixel ha esattamente 160.000 pixel — né uno di più né uno di meno. Se lo ingrandisci, il browser interpola i pixel esistenti e il risultato diventa sfuocato. PNG supporta trasparenza completa tramite un canale alfa (0-255).
Tabella comparativa
| Caratteristica | SVG | PNG |
|---|---|---|
| Scalabilità | Infinita senza perdita | Fissa (sfuoca ingrandendo) |
| Trasparenza | Sì | Sì (canale alfa) |
| Animazione | Sì (CSS/SMIL) | No |
| Dimensione file | Piccola per grafica semplice | Cresce con risoluzione |
| Editabilità | Testo XML, editabile | Binario, non editabile |
| Fotografie | Non adatto | Supportato (ma JPEG/WebP meglio) |
| Non supportato | Supportato universalmente |
Quando usare SVG
SVG è la scelta giusta per contenuti con forme definite e colori uniformi:
- Loghi — nitidi a qualsiasi dimensione, da favicon a banner giganti
- Icone — un solo file SVG funziona a 16px e a 256px
- Illustrazioni e infografiche — grafiche editoriali che devono scalare su qualsiasi dispositivo
- Animazioni CSS — hover effects, transizioni, animazioni looping senza JavaScript pesante
- Diagrammi e chart — generati programmaticamente (D3.js, Chart.js) esportano SVG direttamente
La maggior parte dei siti web moderni usa SVG per icone e loghi (fonte: W3Techs) — il passaggio da PNG a SVG riduce le richieste HTTP e migliora la nitidezza sugli schermi ad alta densità di pixel.
Quando usare PNG
PNG rimane indispensabile per:
- Fotografie con trasparenza — ritratti con sfondo rimosso, prodotti su sfondo trasparente
- Screenshot — catturano pixel esatti che SVG non può rappresentare
- Arte digitale complessa — illustrazioni con molte sfumature di colore, texture fotografiche
- Email — i client di posta non renderizzano SVG
Per foto senza trasparenza, considera JPEG o WebP — PNG per fotografie è spesso il 300-400% più grande senza motivo.
SVG e sicurezza
A differenza di JPEG e PNG, SVG può contenere codice JavaScript e riferimenti a risorse esterne. Se accetti upload SVG da utenti non fidati (ad esempio in un form), sanitizza sempre il file prima di renderizzarlo — usa una libreria come DOMPurify per rimuovere script e riferimenti esterni. Per SVG creati da te o dai tuoi designer, non ci sono rischi pratici.
Converti le tue immagini
SVG in PNG | Vettorializza immagine | Generatore di favicon
SVG può sostituire completamente PNG?
No. SVG è eccellente per grafiche, icone e illustrazioni, ma non può rappresentare fotografie in modo efficiente. Usato SVG per contenuti vettoriali e PNG (o JPEG/WebP) per le foto.
I file SVG sono sicuri per i siti web?
SVG può contenere JavaScript. Se accetti upload SVG dagli utenti, sanitizzali sempre prima di mostrarli. Per gli SVG creati da te o da designer di fiducia, non ci sono rischi pratici per un uso standard.
SVG funziona in tutte le email?
No. La maggior parte dei client di posta non renderizza gli SVG. Per le email usa sempre PNG o JPEG. SVG è sicuro solo per il web, dove i browser lo supportano nativamente.