PNG o SVG: quale formato scegliere?
PNG o SVG: come funziona ciascun formato, la trasparenza, il peso del file, il comportamento all'ingrandimento e i casi d'uso migliori, più come convertire PNG e SVG tra loro.
1. La differenza di fondo: griglie di pixel contro percorsi matematici
Un PNG è un'immagine bitmap: divide l'immagine in singoli pixel e registra il colore di ciascuno. Ingrandire un PNG significa semplicemente allungare quei pixel, ed è per questo che compaiono scalettatura e sfocatura. Un SVG è un'immagine vettoriale: descrive le forme con istruzioni matematiche come coordinate e curve di Bézier, e il browser ridisegna il disegno alla nuova dimensione, così resta nitido a qualsiasi scala. Questo singolo fatto è la radice di quasi tutte le differenze tra i due formati.
Quanto alla trasparenza, il PNG supporta il canale alfa e può salvare uno sfondo trasparente. L'SVG è trasparente per natura: basta non disegnare un rettangolo di sfondo e tutto ciò che sta fuori dal disegno resta trasparente. Vale la pena ricordare che il JPG non ha alcuna trasparenza: il suo fondo bianco è un colore reale dipinto nell'immagine.
2. Peso del file e prestazioni di caricamento
Per grafica semplice come icone e loghi, un SVG pesa spesso solo pochi KB e un unico file si adatta a tutte le densità di schermo. Il PNG, invece, di solito ne richiede versioni @2x e @3x per restare nitido sui display Retina, con un peso che si moltiplica. Per le fotografie la situazione si inverte: le transizioni di colore sono ricchissime e forzare la vettorizzazione genera un numero enorme di percorsi, così l'SVG diventa molto più grande di un JPG o WEBP: una scelta che non conviene.
Il motivo sta nel principio di compressione di ciascun formato. Il PNG registra i pixel con compressione lossless, quindi più è complessa l'immagine e più pesa il file. L'SVG è testo puro, nel quale comandi di tracciato e coordinate ripetuti si comprimono molto bene. Ecco perché due formati entrambi definiti "senza perdita" danno esiti di peso così diversi.
| Caso d'uso | Formato consigliato | Motivo |
|---|---|---|
| Icone / loghi dei siti | SVG | Un file per ogni risoluzione, ricolorabile con i CSS |
| Fotografie | JPG / WEBP | Peso contenuto e fedeltà fotografica |
| Screenshot | PNG | Precisione al pixel e compressione senza perdita |
| Grafici di dati | SVG | Nitido allo zoom e facilmente interattivo |
| Foto profilo sui social | PNG / JPG | Molte piattaforme accettano solo bitmap |
3. Quando usare PNG
- Fotografie, luci complesse e sfumature delicate;
- Screenshot e catture di interfaccia che richiedono precisione al pixel;
- Contesti in cui la piattaforma accetta solo bitmap, per esempio il caricamento di avatar in alcuni pannelli;
- Come ripiego di compatibilità, in ambienti molto vecchi che non supportano l'SVG.
4. Quando usare SVG
- Icone e loghi dei siti: un file per ogni risoluzione, ancora nitidi sui display Retina;
- Grafica da ricolorare con CSS o JavaScript o da animare con tratti che si disegnano;
- Grafici di dati: librerie di visualizzazione come ECharts generano SVG per impostazione predefinita;
- Stampa, incisione laser e taglio, dove la macchina legge i percorsi vettoriali.
5. PNG e SVG si possono convertire l'uno nell'altro?
Sì. Da PNG a SVG: usa lo strumento PNG in SVG di PolySVG o lo strumento immagine in SVG, carica il file e fai clic su genera per vettorizzarlo: il risultato è ottimo per icone e loghi, mentre le fotografie assumono uno stile illustrato. La conversione è gratuita e un PNG trasparente mantiene intatto il suo sfondo. L'SVG ottenuto si può poi aprire nell'editor per ricolorare e togliere sfondi, completando il flusso di lavoro. Da SVG a PNG: apri il file nell'editor SVG online ed esporta un PNG alla risoluzione che preferisci, ideale per documenti o immagini di anteprima.
Una precisazione: convertire un PNG in SVG non è un semplice "salva come", è una vettorizzazione che ridisegna i contorni. I materiali grafici ottengono percorsi puliti, mentre le fotografie vengono ridotte a blocchi di colore. Guarda l'anteprima del risultato nello strumento e verifica che lo stile corrisponda alle tue aspettative prima di scaricarlo.
Regola in una riga: per icone, loghi e grafici scegli SVG; per foto e screenshot scegli PNG/JPG/WEBP. Nel dubbio, per tutto ciò che è grafico preferisci SVG. Per approfondire, leggi Che cos'è un SVG e Tre modi per convertire un'immagine in SVG.
Domande frequenti
Per le icone di un sito conviene PNG o SVG?
Preferisci SVG: un file si adatta a ogni densità di schermo, pesa poco e i CSS possono ricolorarlo. Usa il PNG solo come ripiego quando la piattaforma non supporta l'SVG.
Un PNG trasparente resta trasparente dopo la conversione in SVG?
Sì. Convertendo con lo strumento PNG in SVG di PolySVG, le aree trasparenti vengono conservate per intero e non viene inventato alcuno sfondo bianco.
Le fotografie sono adatte a essere convertite in SVG?
Non se cerchi la fedeltà fotografica. La vettorizzazione riduce la foto a blocchi di colore e produce uno stile illustrato; per le foto restano migliori JPG e WEBP.