shadcn.io— migliaia di blocchi shadcn/ui pronti
Vai al contenuto

Da SVG a PNG — quando ti servono davvero i pixel (e quando no)

C’è 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 vaEsporta il PNG a
Logo per firma email, mostrato a 200px~400px di larghezza (2x)
Scheda di condivisione OG / socialesattamente 1200x630
Sorgente per favicon512x512, poi riduci da lì
Una stampa o una slide, mostrata in grandegrande 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


Tutti gli articoli