In cosa differiscono
L'SVG memorizza forme, tracciati e colori come istruzioni, quindi resta nitido a qualsiasi dimensione ed è spesso minuscolo. È un formato basato su testo, quindi il browser lo ridisegna da zero alla dimensione richiesta. Il PNG memorizza una griglia fissa di pixel, quindi ingrandirlo lo rende sfocato, e registra ogni pixel anche nelle aree piatte, il che può rendere pesanti le immagini grandi.
In breve, l'SVG è più adatto quando l'immagine è costruita con forme, e il PNG quando è fatta di pixel, come uno screenshot o una scansione. Nessuno dei due è migliore in ogni situazione, quindi la scelta dipende dal contenuto e da dove verrà usato il file.
Quando usare l'SVG
Loghi, icone, illustrazioni semplici e grafici sui siti web. I file SVG possono essere stilizzati e scalati senza perdere qualità, e un unico file può servire altrettanto bene un piccolo schermo di telefono e un grande display. Colori piatti e forme pulite sono i casi in cui l'SVG di solito dà i file più piccoli.
L'SVG è utile anche perché i colori si possono spesso cambiare nel codice, il che permette a una stessa icona di apparire nei temi chiaro e scuro. Una grafica molto complessa con migliaia di forme può però rendere un SVG più grande e più lento da disegnare di un PNG.
Quando usare il PNG
Screenshot, immagini con dettagli complessi e luoghi che non accettano l'SVG, come molti social network e programmi di posta. Il PNG è senza perdita, quindi il testo negli screenshot resta nitido, e supporta la trasparenza. Per le normali fotografie, JPG o WebP sono di solito più piccoli del PNG.
Scegli il PNG quando ti serve un risultato fisso che appaia identico ovunque, come un'immagine allegata a un'email, una slide di presentazione o un post sui social.
Un esempio pratico (illustrativo)
Diciamo che hai un semplice logo fatto di tre forme. Come SVG potrebbe pesare solo pochi KB e apparire perfetto su un biglietto da visita, nell'intestazione di un sito e su un cartellone. Come PNG largo 200 pixel apparirà bene in una pagina web ma morbido se qualcuno lo ingrandisce alle dimensioni di un poster.
Ora diciamo che un social network richiede il caricamento di un'immagine e rifiuta l'SVG. Esporti il logo come PNG largo 1024 pixel, che ti lascia margine per essere ridotto, e carichi quello. Conserva l'SVG come copia master, così potrai in seguito esportare un nuovo PNG a qualsiasi altra dimensione senza perdere nitidezza.
Convertire da SVG a PNG
Scegli la larghezza che ti serve, ad esempio 1024 pixel, e genera l'SVG a quella dimensione. Le aree trasparenti restano trasparenti nel PNG. È meglio generare alla dimensione che ti serve che generare in piccolo e ingrandire dopo, perché ingrandire un PNG non può recuperare i dettagli.
Se ti servono più dimensioni, come 256, 512 e 1024 pixel, genera ciascuna separatamente dall'SVG. Controlla i bordi su uno sfondo scuro e uno chiaro per verificare che la trasparenza appaia corretta.
Errori comuni
- Usare un PNG per un logo e poi ingrandirlo oltre la sua dimensione
- Convertire una foto in SVG aspettandosi un file piccolo
- Generare un PNG troppo piccolo e ingrandirlo dopo
- Dimenticare che alcuni programmi ignorano o limitano l'SVG
- Eliminare l'SVG dopo l'esportazione, così non resta nessun master nitido
La maggior parte di questi errori nasce dal trattare i due formati come intercambiabili. Si usano meglio insieme: l'SVG come master modificabile e il PNG come esportazione per i luoghi che richiedono pixel.
Attenzione ai file SVG di cui non ti fidi
Un SVG può contenere script e altri contenuti attivi, non solo forme. Apri solo file SVG provenienti da fonti di cui ti fidi e fai attenzione ai file che arrivano da email o siti web sconosciuti.
Lista di controllo rapida
- Logo o icona piatta per il web: SVG
- Foto o immagine complessa: JPG, WebP o PNG
- La piattaforma rifiuta l'SVG: esporta un PNG
- Scegli la larghezza del PNG prima di esportare
- Conserva l'SVG come master
Farlo con DoneImg nel tuo browser
Apri lo strumento di conversione, aggiungi il tuo SVG e scegli PNG come output. Imposta la larghezza che ti serve e scarica il risultato. Le aree trasparenti restano trasparenti.
La conversione avviene nel tuo browser, quindi il file non viene caricato. Anche così, apri solo file SVG di cui ti fidi.
In seguito puoi usare lo strumento di compressione sul PNG se il file è più pesante di quanto vorresti, oppure lo strumento di ridimensionamento per creare versioni più piccole.