Come convertire SVG in PNG (e quando farlo)
L'SVG è perfetto sul web, ma molti servizi non lo accettano: social media, client di posta elettronica e app store. Ecco quando conviene convertirlo, quale dimensione scegliere per l'esportazione e come mantenere lo sfondo trasparente.
L'SVG è perfetto sul web, ma molti servizi non lo accettano: le piattaforme social, i client di posta elettronica e molti servizi di stampa preferiscono un'immagine raster. Convertire SVG in PNG richiede un minuto e, se scegli la giusta dimensione di esportazione, il risultato sarà nitido quanto l'originale. Un avvertimento: il PNG non può tornare a essere SVG in modo pulito, quindi conserva sempre il file originale. Se sai già cosa ti serve, vai direttamente al convertitore da SVG a PNG; altrimenti questa guida spiega quando convertire, quale risoluzione in pixel scegliere per web, retina e stampa e come mantenere intatto il tuo sfondo trasparente.
SVG vs PNG in un minuto
L'SVG è un formato vettoriale: un insieme di istruzioni di disegno (tracciati e forme) che viene renderizzato con precisione a qualsiasi dimensione, sia 16px che 16.000px, mantenendo il file leggero per loghi, icone e arte geometrica. È modificabile in un editor di testo e supporta persino le animazioni.
Il PNG è un formato raster: una griglia fissa di pixel. Nitido alla sua dimensione nativa, sfocato se ingrandito. Eccelle nelle sfumature, nelle ombre e nei dettagli fotografici, ed è visualizzato in modo coerente ovunque.
L'errore più comune: convertire SVG in PNG non "perde" qualità al momento dell'esportazione. I pixel vengono generati dalla matematica vettoriale, quindi un'esportazione delle dimensioni corrette è perfetta a livello di pixel. Il vero costo è che il PNG rimane bloccato a una singola risoluzione per sempre.
Regola pratica: mantieni l'SVG come fonte ufficiale e esporta un PNG ogni volta che la destinazione lo richiede.
Quando dovresti convertire SVG in PNG
Converti quando la destinazione non gestisce l'SVG, non perché il PNG sia in qualche modo migliore. In pratica, queste situazioni si presentano spesso:
- Social media. Instagram, X/Twitter, Facebook e LinkedIn non accettano caricamenti di file SVG. Converti in PNG o JPG prima di pubblicare.
- Email. La maggior parte dei client di posta elettronica ha un supporto limitato o nullo per l'SVG. Usa il PNG per le immagini delle newsletter e le firme email.
- Favicon e icone delle app. I browser moderni accettano favicon SVG, ma le Apple touch icon e i browser più vecchi richiedono ancora versioni PNG. La nostra guida su come creare una favicon da un logo ti accompagna in tutto il processo.
- Servizi di stampa. Molti stampatori di prodotti fotografici (adesivi, biglietti da visita, merchandising) accettano il PNG ma non l'SVG.
- Software legacy e alcuni CMS. Strumenti più vecchi e flussi di lavoro documentali potrebbero visualizzare l'SVG in modo errato o non visualizzarlo affatto; il PNG è la scelta più sicura. Alcune versioni di Office e flussi di lavoro documentali più vecchi gestiscono l'SVG in modo inconsistente.
E quando non convertire: sui siti web. Lì, l'SVG rimane nitido a qualsiasi dimensione, può essere stilato e animato con CSS e spesso pesa meno di un grande PNG. Se la tua unica destinazione è il tuo sito, salta del tutto la conversione.
Fonte per i punti sul supporto delle piattaforme sopra: ConverterUp.
Come convertire SVG in PNG su Tool Cloud (passo dopo passo)
- Apri la pagina del convertitore da SVG a PNG.
- Carica il tuo SVG. Puoi caricare più file contemporaneamente se stai convertendo un set.
- Converti e scarica il PNG. Per ottenere una dimensione precisa in pixel, imposta i campi larghezza e altezza (oppure usa l'opzione risoluzione, che varia da 72 a 1200) prima di convertire; è disponibile anche un interruttore per mantenere il rapporto d'aspetto. I file caricati vengono eliminati automaticamente dopo l'elaborazione.
Poiché il convertitore richiede una larghezza e un'altezza esplicite, non devi modificare il viewport del tuo SVG né ridimensionare nulla in un editor di design: decidi semplicemente la dimensione di output (sezione successiva) e inseriscila.
Convertire SVG in PNG senza uno strumento online
Non hai bisogno di un convertitore online per questo. Ogni strumento di design esporta direttamente in PNG:
- Figma, Illustrator, Affinity, Inkscape: usa la finestra di esportazione, scegli PNG e imposta la dimensione di esportazione in pixel (qui applichi il fattore di scala indicato di seguito). Questa è la soluzione migliore se hai il file sorgente, perché puoi convertire il testo in tracciati e rimuovere rettangoli di sfondo indesiderati nello stesso passaggio.
- Da un sito web: fai clic destro sull'SVG (o sul file SVG stesso una volta aperto in una scheda del browser) e usa "Salva immagine con nome"; di solito otterrai l'SVG, quindi esportalo o convertilo da lì.
- Ultima risorsa, senza alcuno strumento: apri l'SVG in un browser, zooma fino al massimo mantenendo la nitidezza e fai uno screenshot. Perderai la trasparenza a meno che tu non usi uno strumento di cattura che la supporti, e i bordi non saranno puliti come in un'esportazione reale. Va bene per un mockup veloce, non per la produzione.
Quale dimensione in pixel dovresti esportare? (Guida al fattore di scala)
Scegli la dimensione di esportazione moltiplicando le dimensioni del viewport dell'SVG per un fattore di scala: un SVG con viewport 200×200 esportato a 1x dà un PNG 200×200px, a 2x dà 400×400px e a 3x dà 600×600px. Nel convertitore, questo calcolo diventa semplicemente la larghezza e l'altezza che inserisci. Poi abbina il fattore di scala alla destinazione:
| Caso d'uso | Fattore di scala | Esempio (SVG 200×200) |
|---|---|---|
| Schermo standard (o requisito avatar a dimensione fissa) | 1x | 200×200px |
| Retina / punto ottimale per il web | 2x | 400×400px |
| Qualità di stampa | 3x–4x | 600×600 fino a 800×800px |
Per icone e loghi web quotidiani, 2x è il punto ottimale pratico: un file a 2x copre sia gli schermi standard che quelli retina, poiché si ridimensiona elegantemente sui display standard. Se una specifica richiede esplicitamente una dimensione fissa, 1x corrispondente al viewport è la risposta. Per la stampa, usa 3x–4x; questo fornisce abbastanza pixel per elementi stampati piccoli come adesivi o biglietti da visita, mentre le stampe grandi necessitano proporzionalmente di più.
Non c'è penalità di qualità nell'esportare più grande del necessario, perché i pixel derivano dalla matematica vettoriale, non dallo stretching. L'unico inconveniente è la dimensione del file, che cresce col quadrato del fattore di scala: un PNG a 4x ha sedici volte i pixel di uno a 1x. Quindi scegli la dimensione in base a dove andrà il file, non pensando che "più grande è più sicuro".
Mantenere la trasparenza (e quando usare uno sfondo bianco)
Il canale alpha del PNG preserva nativamente la trasparenza dell'SVG, esattamente ciò che vuoi per loghi e icone che devono trovarsi su sfondi diversi. Esporta a qualsiasi scala e la trasparenza verrà mantenuta intatta.
C'è però un classico problema qui. Un SVG può sembrare avere uno sfondo bianco in un browser quando in realtà stai vedendo la pagina sottostante. Prima di convertire, testalo su uno sfondo scuro. Se la forma si legge correttamente, hai una vera trasparenza; se vedi un riquadro bianco, il tuo SVG ha un rettangolo di sfondo incorporato.
Quando riempire uno sfondo invece: alcune piattaforme e strumenti più vecchi non gestiscono bene la trasparenza. Per quei caricamenti, uno sfondo solido (di solito bianco) è la scelta più sicura.
E se il tuo SVG contiene un rettangolo di sfondo che non vuoi, rimuovilo nel file di design prima di esportare. È una correzione nel file di design, non un'impostazione di conversione.
Problemi comuni che rovinano le esportazioni SVG
La maggior parte delle conversioni da SVG a PNG va a buon fine. Quelle che non funzionano di solito falliscono in uno di questi tre modi:
- Caratteri tipografici. Il testo SVG viene renderizzato utilizzando i font disponibili sulla macchina di rendering, secondo la specifica SVG 1.1. Se il rasterizzatore non dispone del tuo font, ottieni una sostituzione del testo o un layout difettoso. La soluzione è semplice: converti il testo in percorsi/contorni nel tuo strumento di design prima di esportare l'SVG. Questa è la causa più comune della domanda "perché il mio logo sembra sbagliato nel PNG?".
- Ritaglio. Alcuni converter ritagliano l'output in base alla viewport dichiarata dell'SVG e il contenuto SVG può estendersi oltre essa, quindi tutto ciò che si trova all'esterno potrebbe essere perso. Controlla che nulla di importante si trovi fuori dalla tela prima di esportare.
- Filtri complessi. Il rendering dei filtri e dei gradienti SVG può variare tra i diversi renderer. I rasterizzatori lato server li gestiscono in modo diverso dai browser; ad esempio, ImageMagick delega a librsvg quando disponibile e utilizza un renderer interno meno potente in caso contrario. I gradienti stessi vengono rasterizzati perfettamente a qualsiasi scala (MDN), ma catene di filtri complesse possono apparire diverse dall'anteprima nel browser. In tal caso, semplifica gli effetti o prerasterizzali nel tuo strumento di design.
Conversione in blocco di un set di icone
I set di icone vivono o muoiono in base alla coerenza. Un mix di dimensioni, o alcune icone con sfondi trasparenti e altre con sfondo bianco, appare difettoso nell'interfaccia di un prodotto o di un'app, anche se ogni singolo file è a posto.
Quindi decidi due cose fin dall'inizio:
- Una scala. 2x per il web è la scelta abituale.
- Una politica sullo sfondo. Di solito trasparente, a meno che la destinazione non possa gestire l'alpha.
Poi applica entrambe le scelte a ogni file. Il modo pratico: carica più SVG contemporaneamente nel converter ed esporta l'intero batch alla stessa larghezza e altezza, invece di convertire i file uno alla volta rischiando di divergere.
Se in seguito hai bisogno di diverse dimensioni partendo da un unico SVG sorgente (ad esempio 16, 32 e 512px), riesporta dall'SVG a ciascuna dimensione, oppure passa il PNG attraverso un risolutore di immagini: non ingrandire un PNG piccolo, perché lo rendi solo sfocato.
Domande comuni, rispondute in un unico posto
Convertire SVG in PNG fa perdere qualità?
No, non se esporti alla dimensione giusta. I pixel del PNG sono generati dalla matematica vettoriale, quindi il risultato è esattamente nitido come l'SVG a quella risoluzione. L'unica vera perdita è la flessibilità: il PNG è fisso a una dimensione in pixel per sempre.
Posso convertire PNG in SVG?
Non in modo pulito. Il tracciamento approssima la griglia dei pixel piuttosto che ripristinare i percorsi originali, quindi non è mai senza perdita di dati: i loghi a colori piatti vengono tracciati in modo accettabile, mentre foto e gradienti vengono tracciati male. Tieni il tuo SVG originale come file master e non avrai bisogno del tracciamento affatto.
Quale sfondo dovrei usare?
Trasparente per tutto ciò che si sovrappone a sfondi variabili, cosa che il canale alpha del PNG gestisce nativamente. Riempi solo uno sfondo solido (di solito bianco) quando la destinazione non supporta la trasparenza.
