Da SVG a PNG — quando ti servono davvero i pixel (e quando no)
Dov Azencot
@DovAzencotC’è un tipo particolare di frustrazione nell’avere un logo perfetto e nessun posto dove metterlo. L’SVG è nitido a qualsiasi dimensione, non pesa quasi nulla e nel browser appare impeccabile — e poi provi a inserirlo in un’email, o a impostarlo come immagine di anteprima social, o a incollarlo in un software un filo troppo vecchio, e semplicemente non compare. Vuoto. Il file è a posto. Il posto in cui lo stai mettendo semplicemente non parla vettoriale.
È tutta qui la ragione per cui la conversione da SVG a PNG esiste come compito. Non perché il PNG sia migliore — di solito non lo è — ma perché buona parte del mondo sa leggere solo pixel.
Vettore e raster, in breve
Un SVG non è un’immagine. È un insieme di istruzioni — disegna un cerchio qui, questo tracciato lì, riempilo di questo colore. Il browser segue le istruzioni e le rende da capo a qualsiasi dimensione tu chieda, quindi è affilato a 16 pixel come a 16.000, e il file resta minuscolo perché è solo matematica.
Un PNG è l’opposto. È una griglia fissa di pixel colorati, decisa una volta sola, a una risoluzione sola. Ingrandiscilo oltre la sua dimensione nativa e diventa molle e a blocchi, perché non ci sono altri pixel da disegnare — solo quelli impressi dentro. Il vantaggio è che tutto sa leggere una griglia di pixel. È la valuta universale delle immagini.
Quindi convertire SVG in PNG significa scambiare scalabilità infinita per compatibilità universale. Se sia un buono scambio dipende interamente da dove va l’immagine.
Quando ti serve davvero il PNG
Tre casi in cui rasterizzo senza esitazione, perché il vettore semplicemente non va:
Email. I client di posta non rendono l’SVG — Gmail, Outlook, Apple Mail, praticamente tutti lo rifiutano per ragioni di sicurezza. Un logo in una firma email o in una newsletter deve essere un formato raster. PNG, perché vuoi la trasparenza.
Immagini di anteprima social e OG. La piccola scheda che appare quando condividi un link — l’immagine Open Graph — deve essere un raster di dimensione fissa, tipicamente 1200x630. Le piattaforme lì non renderanno un SVG. Se la tua grafica di partenza è vettoriale, esporti un PNG esattamente a quella dimensione.
Software vecchio o offline. Parecchie app desktop, strumenti di presentazione, editor di documenti e flussi di stampa o non sanno importare l’SVG o ne fanno un pasticcio. Passargli un PNG a risoluzione generosa funziona e basta, ogni volta, senza sorprese.
In tutti e tre, il fattore decisivo è lo stesso: la destinazione fisicamente non sa leggere il vettore, quindi la scalabilità è irrilevante. Un formato che si rende batte un formato che non si rende, sempre.
L’unica cosa da azzeccare: la risoluzione
Ecco l’errore che vedo più spesso, e che ho fatto io stesso all’inizio. Poiché un PNG è fisso alla dimensione a cui lo esporti, devi esportarlo abbastanza grande — e idealmente esattamente alla dimensione a cui lo mostrerai.
Esporta un logo come PNG 100x100 e poi mostralo a 300 pixel su uno schermo ad alta densità, e apparirà molle e frastagliato. I pixel per riempire quello spazio non esistono. La soluzione è facile: esporta alla dimensione che userai davvero, o più grande, soprattutto per i display Retina e 4K dove spesso vuoi il doppio della dimensione nominale. È questo l’unico vero vantaggio a cui rinunci lasciando il vettore, quindi prenditi un momento per azzeccare la risoluzione di destinazione.
| Dove va | Esporta il PNG a |
|---|---|
| Logo per firma email, mostrato a 200px | ~400px di larghezza (2x) |
| Scheda di condivisione OG / social | esattamente 1200x630 |
| Sorgente per favicon | 512x512, poi riduci da lì |
| Una stampa o una slide, mostrata in grande | grande quanto puoi ragionevolmente |
Quando NON dovresti rasterizzare
Se la destinazione sa leggere l’SVG, tieni l’SVG. Punto.
Sul tuo sito, un’icona o un logo dovrebbero restare vettoriali. Sarà nitido su ogni schermo a ogni livello di zoom, sarà più leggero del PNG equivalente, e non dovrai mai riesportare una versione più grande quando esce un nuovo display ad alta densità. Rasterizzarlo lì è puro svantaggio — butteresti via il pregio migliore del formato per guadagnare una compatibilità che hai già.
E non rasterizzare il tuo master. L’SVG è la fonte di verità; può generare un PNG di qualsiasi dimensione, in qualsiasi momento. Un PNG non può fare la strada inversa — non puoi recuperare tracciati vettoriali puliti da una griglia di pixel. Quindi tieni l’SVG, e tratta ogni PNG come un’esportazione usa e getta per un posto specifico. Stesso principio di tutto il resto: converti la copia che pubblichi, tieni l’originale che modifichi.
Come faccio davvero
Quando mi servono pixel da un vettore, uso il convertitore da SVG a PNG qui. Rende l’SVG nel tuo browser e ti consegna il PNG, così non si carica nulla da nessuna parte — l’intera cosa avviene sulla tua macchina. Scegli una dimensione adatta a dove è diretto, ottieni un PNG pulito con la trasparenza intatta.
Ma la vera abilità non è la conversione. È la domanda che ti fai prima: questo posto legge il vettore? Se sì, lascia stare l’SVG e goditi l’opzione più nitida e più leggera che ci sia. Se no — email, scheda OG, qualche vecchia app testarda — allora rasterizza, alla dimensione giusta, e tieni al sicuro l’SVG per la prossima volta. Azzecca quella scelta e non avrai mai più un riquadro vuoto dove dovrebbe esserci il tuo logo.
Articoli correlati
Perché converto i PNG in WebP (e l’unica volta in cui non lo faccio)
Il PNG è un formato splendido in cui lavorare e uno spreco da pubblicare. Ecco cosa ti fa risparmiare davvero il WebP, dove non serve a niente, e l’unica regola che non infrango mai.
Perché i tuoi screenshot pesano 2 MB, e come alleggerirli del 60–90%
Lo screenshot di una dashboard quasi vuota non ha motivo di pesare 2 MB. Ecco perché il PNG ti fa questo scherzo, e come convertire in WebP lo taglia del 60–90% senza perdere nulla di visibile.
PNG o JPG? La regola che uso da dieci anni per decidere
Senza perdita o con perdita, bordi o fotografie, trasparenza o niente. Una sola domanda ti dice che formato dovrebbe avere un file — con una tabella di pesi reali a dimostrarlo.
Tutti gli articoli