Convertitore SVG in PNG gratuito

SVG vs PNG

SVG (Scalable Vector Graphics) è un formato vettoriale, markup XML che descrive le forme matematicamente. Un cerchio in SVG è "disegna un cerchio di raggio R a (x, y) con colore di riempimento F", istruzioni, non pixel. Il browser renderizza le istruzioni alla dimensione in cui visualizzi l'SVG, quindi rimane nitido a 1x, 2x, 3x e oltre. PNG (Portable Network Graphics) è un formato raster, una griglia fissa di pixel a valori di colore fissi. PNG è quello che ottieni quando "congeli" un SVG a una risoluzione specifica. Convertire SVG in PNG si chiama rasterizzazione: scegliere una griglia di pixel target e renderizzare le istruzioni vettoriali a quella dimensione fissa, dopo di che il risultato è una normale immagine raster con tutti i vincoli di dimensione che ciò implica.

SVG è stato sviluppato dal SVG Working Group del W3C fondato nel 1998; SVG 1.0 è diventato W3C Recommendation il 4 settembre 2001; SVG 1.1 è seguito il 14 gennaio 2003 ed è stata la versione dominante per il decennio successivo; SVG 1.1 Second Edition è arrivato il 16 agosto 2011; SVG 2 ha raggiunto Candidate Recommendation il 4 ottobre 2018 ma si è bloccato, rimane CR piuttosto che Recommendation completa al 2026. PNG è diventato W3C Recommendation il 1° ottobre 1996 e IETF RFC 2083 nel marzo 1997; il formato è stato stabile da allora.

Perché convertire SVG in PNG?

• Client email che eliminano il supporto SVG. Microsoft ha iniziato a ritirare il supporto SVG inline in Outlook per il web e nel nuovo Outlook per Windows a partire da settembre 2025, con il rollout completato a ottobre 2025, gli SVG inline ora renderizzano come spazio vuoto. Gli allegati SVG funzionano ancora, ma i template email con stile inline che precedentemente incorporavano loghi SVG ora hanno bisogno di fallback PNG. L'interfaccia web di Gmail renderizza SVG bene; Apple Mail lo fa anche; la rottura principale è dal lato Microsoft.
• Piattaforme di social media. Twitter/X, Instagram, Facebook, LinkedIn o rifiutano gli upload SVG completamente o li comprimono e ricodificano in PNG/JPEG prima della visualizzazione. Pre-rasterizzare alle dimensioni preferite della piattaforma (1200x630 per Open Graph, 1080x1080 per Instagram) bypassa la loro conversione automatica lossy.
• Generazione di icone per app. Le icone delle app iOS devono essere PNG 1024x1024 (listing App Store) più varie dimensioni specifiche del dispositivo; le icone adattive Android renderizzano in-launcher a 432x432 (108dp a xxxhdpi) con 512x512 per il listing Play Store; le icone manifest PWA tipicamente necessitano 192x192 e 512x512. SVG non è accettato da nessuno di questi.
• Stampa on-demand e prepress. Printful, Redbubble, Society6, RedPrint e la maggior parte dei servizi di stampa on-demand richiedono PNG (o PDF) a risoluzioni specifiche, di solito 300 DPI per la dimensione fisica target. SVG non è accettato nei loro flussi di upload.
• CMS e app legacy. Vecchie installazioni di WordPress, strumenti admin legacy, editor di documenti che precedono il supporto SVG dei browser, ovunque "deve essere PNG" sia un requisito rigido.
• Emoji Discord e simili. L'upload di emoji personalizzate Discord richiede PNG (o GIF animato per emoji animate); dimensione raccomandata 128x128 con un limite di dimensione file di 256 KB. SVG non è accettato.

Come funziona la conversione nel tuo browser

La tecnica di rasterizzazione dell'API Canvas è semplice ma ha sottili insidie. La pipeline standard: carica l'SVG come elemento Image tramite un Blob URL (URL.createObjectURL(svgBlob)) o direttamente come data URI (data:image/svg+xml;base64,...); aspetta l'evento onload; crea un canvas alle dimensioni di output desiderate; chiama ctx.drawImage(image, 0, 0, width, height) per rasterizzare l'SVG alla dimensione scelta; esporta tramite canvas.toBlob('image/png'). I renderer SVG del browser gestiscono gradienti, maschere, filtri, testo e la maggior parte del feature set SVG correttamente durante questa rasterizzazione. Tre avvertenze contano. Le risorse esterne falliscono sotto CORS: gli SVG che fanno riferimento a immagini esterne (<image href="https://other-domain.com/photo.jpg">) o font esterni potrebbero non caricarsi se il server cross-origin non restituisce header CORS appropriati, il canvas diventa "contaminato" e toBlob lancia un SecurityError. Incorpora le immagini come data URI e i font come @font-face con src data URI per evitarlo. Gli SVG contenenti tag <script> non eseguono quando caricati come Image, il decoder di immagini del browser rimuove il contesto di scripting per sicurezza. Le animazioni SMIL vengono appiattite a un singolo frame a time=0; se l'SVG dipende dall'animazione per il suo stato visivo, il PNG rasterizzato non lo catturerà. Differenze pixel cross-browser: Chrome, Firefox e Safari producono output rasterizzato sottilmente diverso per lo stesso SVG a causa di differenze nei loro rispettivi renderer vettoriali; per icone di produzione, renderizza una volta e spedisci il PNG piuttosto che fare affidamento sulla conversione per-browser a runtime.

Scegliere la giusta risoluzione di output

SVG non ha risoluzione intrinseca, la scelta è tua. Target comuni: icona di listing iOS App Store 1024x1024; icona di listing Android Play Store 512x512 (con l'icona adattiva in-launcher a 432x432, progettata all'interno di una zona sicura 264x264); icone manifest PWA 192x192 e 512x512; favicon storicamente 16x16, 32x32, 48x48 (il favicon.ico moderno raggruppa tutte e tre le dimensioni; la migliore pratica moderna spedisce icon.svg per browser che lo supportano più un fallback apple-touch-icon.png 192x192); card social Open Graph 1200x630; card Twitter 1200x675; quadrato Instagram 1080x1080; emoji Discord 128x128; emoji Slack 128x128; stampa a 300 DPI richiede 3x la dimensione in pollici in pixel (una stampa logo da 4 pollici necessita 1200x1200). Per rendering di qualità Retina sullo schermo, target 2x la dimensione visualizzata, un'icona visualizzata 100x100 dovrebbe essere esportata a 200x200 per rimanere nitida su schermi Retina.

Come usare questo convertitore

1. Fornisci l'SVG. Rilascia un file .svg sulla zona di upload, o incolla markup SVG grezzo nell'area di testo. Entrambi i percorsi funzionano allo stesso modo.
2. Imposta le dimensioni di output. Larghezza e altezza in pixel; il toggle blocco-rapporto-aspetto mantiene le proporzioni quando cambi una dimensione. Massimo 8192x8192 (il limite di dimensione del canvas sulla maggior parte dei browser moderni; alcuni hardware tappano a 4096 o 8192).
3. Scegli uno sfondo. Trasparente (default, preserva il canale alfa dell'SVG), bianco solido, nero solido, o qualsiasi colore personalizzato. Utile quando la destinazione non supporta la trasparenza (alcuni contesti di stampa legacy).
4. Converti e scarica. Il pulsante Converti rasterizza l'SVG alla dimensione scelta e mostra l'anteprima; Scarica salva il PNG sul tuo dispositivo.

Ambito onesto: cosa fa e cosa non fa questo strumento

Questo strumento rasterizza un singolo SVG in un singolo PNG alla dimensione scelta. Non genera il set completo di icone multi-dimensione che gli app store richiedono (1024x1024 + 180x180 + 167x167 + 152x152 + 120x120 + 87x87 + 80x80 + 60x60 + 58x58 + 40x40 + 29x29 + 20x20 solo per iOS), per quello, usa uno strumento dedicato come RealFaviconGenerator o App Icon Generator. Non ottimizza il PNG risultante (usa lo strumento SVG Optimizer per pulire prima l'SVG sorgente; per l'ottimizzazione PNG usa un compressore separato). Non raggruppa l'output favicon.ico multi-dimensione. Non anima, i PNG esportati sono single-frame, anche se l'SVG aveva animazione SMIL. Per la generazione batch di molte dimensioni da un SVG, usa una CLI come sharp-cli (Node.js) o resvg-cli (Rust); la conversione per-dimensione che fanno è la stessa di questo strumento, solo scriptabile.

Privacy: perché il solo-browser conta qui

I file SVG spesso contengono asset di brand proprietari, loghi work-in-progress, icone di prodotto interne o file sorgente forniti dai designer sotto NDA. I servizi di conversione lato server (CloudConvert, Online-Convert, Convertio) caricano il tuo SVG sulla loro infrastruttura dove rimane nei log. Questo strumento esegue l'intera pipeline di rasterizzazione nel tuo browser tramite l'API Canvas, verifica nel tab Network di DevTools mentre clicchi Converti, o porta la pagina offline (modalità aereo) dopo che si carica e il convertitore funziona ancora. Sicuro per lavoro di brand non rilasciato, icone di prodotto interne, file di designer sotto NDA o qualsiasi SVG che non vorresti copiato sull'hard drive di uno sconosciuto.

Domande frequenti

Perché convertire SVG in PNG invece di usare SVG direttamente?

Per la maggior parte dei browser moderni, non devi. SVG renderizza nativamente in Chrome, Firefox, Safari, Edge e Opera, ed è il formato giusto per la maggior parte dell'uso web. La conversione è necessaria quando la destinazione non supporta SVG: Microsoft ha ritirato SVG inline in Outlook web e nuovo Outlook per Windows a settembre-ottobre 2025; le icone delle app iOS / Android devono essere PNG; i servizi di stampa on-demand richiedono PNG; l'upload di emoji personalizzate Discord e Slack PNG; alcuni CMS legacy rifiutano ancora gli upload SVG. Per quei contesti, rasterizzi una volta e spedisci il PNG.

A che risoluzione dovrei esportare?

Abbina la destinazione. Listing iOS app store: 1024x1024. Android Play Store: 512x512 (icona adattiva in-launcher: 432x432). Manifest PWA: 192 e 512. Card social Open Graph: 1200x630. Quadrato Instagram: 1080x1080. Per display Retina, esporta a 2x la dimensione CSS visualizzata, un'icona 100x100 dovrebbe essere PNG 200x200 per rimanere nitida. Per la stampa, 300 DPI significa 300 pixel per pollice visualizzato (una stampa logo da 4 pollici = PNG 1200x1200). Il massimo qui è 8192x8192, che è il limite moderno del canvas del browser.

Perché al mio SVG mancano parti dopo la conversione?

Tre cause comuni. Risorse esterne bloccate da CORS: se l'SVG fa riferimento a immagini o font su un altro dominio che non restituisce header CORS appropriati, il canvas diventa "contaminato" e l'esportazione le rimuove silenziosamente. Incorpora le immagini come data URI e i font come @font-face con src data URI. Gli script dentro l'SVG non eseguono: i tag <script> vengono rimossi dal modello di sicurezza del decoder di immagini del browser, qualsiasi cosa lo script generi non apparirà. Le animazioni SMIL renderizzano a time=0 (il frame iniziale); lo stato visivo animato non viene catturato. Per SVG che dipendono da JavaScript o animazione, renderizza prima in un browser reale poi fai screenshot, o usa Puppeteer in modalità headless.

Preserva la trasparenza?

Sì quando "Trasparente" è selezionato come sfondo, il PNG mantiene il canale alfa dell'SVG, con pixel semi-trasparenti completamente preservati. Scegli un colore solido (bianco, nero, personalizzato) quando la destinazione non supporta la trasparenza o quando hai bisogno di un colore circostante specifico cotto dentro (alcuni contesti di stampa legacy).

Posso generare più dimensioni da un SVG?

Non in un clic, questo strumento produce un singolo PNG per conversione. Per la generazione di set di icone app-store (la dozzina o più di dimensioni che iOS e Android richiedono), usa uno strumento dedicato come RealFaviconGenerator (web), App Icon Generator (web), o una CLI come sharp-cli (Node.js) o resvg-cli (Rust), la conversione per-dimensione che eseguono è la stessa rasterizzazione stile Canvas, solo scripted attraverso molte dimensioni.

I miei file SVG vengono caricati?

No. La rasterizzazione gira interamente nel tuo browser tramite l'API Canvas. Il tuo SVG e il PNG risultante non attraversano mai la rete, verifica nel tab Network di DevTools mentre clicchi Converti, o porta la pagina offline (modalità aereo) dopo che si carica e il convertitore funziona ancora. Sicuro per lavoro di brand non rilasciato, icone di prodotto interne, file sorgente di designer sotto NDA o qualsiasi SVG che non vorresti copiato sull'hard drive di uno sconosciuto.

Strumenti correlati