Skip to content
user@convertitive:~$convertitive

Convertitore da SVG a PNG

Rilascia un SVG o incolla il suo markup, scegli una dimensione, scarica un PNG. Nulla lascia il tuo browser.

L’SVG è indipendente dalla risoluzione — lo stesso file viene renderizzato in modo nitido a 16 pixel come a 16.000 — ma buona parte del web non riesce ancora a gestirlo. I client email lo eliminano, i CMS più vecchi ne rifiutano il caricamento, le pipeline per favicon vogliono bitmap a dimensione fissa, e un designer che consegna asset a un team non di design ha spesso bisogno di qualcosa che si apra ovunque senza problemi. È allora che si appiattisce un vettoriale in un raster, e poiché la sorgente non ha una risoluzione fissa, sei tu a scegliere le dimensioni di output. Questo strumento renderizza il tuo SVG con il rasterizzatore del browser stesso su un canvas esattamente alla dimensione che specifichi, poi codifica un PNG — con la trasparenza preservata — senza che il file lasci mai la tua macchina.

Drop an .svg file here, or

SVG up to 8 MB. Stays in your browser.

How to use

  1. Carica il tuo SVG

    Trascina un file .svg (fino a 8 MB) sulla zona di rilascio, clicca per sceglierne uno, oppure incolla il markup SVG grezzo nella casella di testo. In ogni caso, lo strumento legge gli attributi width, height e viewBox per rilevare la dimensione intrinseca.

  2. Imposta la dimensione di output

    Digita una larghezza o un'altezza esatta in pixel — con il rapporto d'aspetto bloccato, l'altra dimensione si adegua automaticamente — oppure usa i pulsanti 1x, 2x o 4x per moltiplicare la dimensione intrinseca. Per gli schermi retina, la scelta abituale è 2x.

  3. Scegli uno sfondo

    Trasparente (l'impostazione predefinita) mantiene intatto il canale alfa dell'SVG nel PNG. Scegli Bianco o un colore personalizzato se l'immagine finirà in un contesto che non gestisce la trasparenza, come un flusso di lavoro solo JPEG o certi client email.

  4. Anteprima e download

    Il risultato viene renderizzato in tempo reale su uno sfondo a scacchi, così puoi vedere esattamente quali aree restano trasparenti. Clicca Scarica PNG — il file viene generato localmente dall'encoder canvas del tuo browser e non viene mai caricato da nessuna parte.

Frequently asked questions

Il mio SVG viene caricato su un server?
No. L'SVG viene trasformato in un URL blob locale, renderizzato dal motore SVG del tuo browser in un'immagine fuori schermo, disegnato su un canvas e codificato in PNG con canvas.toBlob() — tutto in JavaScript sulla tua macchina. Non c'è alcuna richiesta di caricamento.
Perché il mio SVG viene renderizzato a una dimensione strana?
Molti SVG — soprattutto le esportazioni di icone — contengono solo un viewBox e nessun attributo width/height. I browser che mostrano un file del genere in un <img> ripiegano su una dimensione predefinita (spesso 300×150, a volte 0×0), ed è per questo che i convertitori possono produrre output di dimensioni bizzarre. Questo strumento analizza direttamente il sorgente SVG: se width e height sono presenti li usa; se esiste solo un viewBox, adotta il rapporto d'aspetto del viewBox con una larghezza predefinita di 512 px; in mancanza di entrambi, ripiega su 512×512. Puoi sempre sovrascrivere la dimensione rilevata prima di esportare.
Perché il testo del mio SVG appare diverso nel PNG?
Gli elementi <text> dell'SVG vengono renderizzati con i font di cui dispone il browser che rasterizza, e nel contesto <img> i riferimenti a webfont esterni non vengono scaricati — quindi il carattere che hai scelto con cura ripiega su un font generico del browser. Se la tipografia esatta conta, converti il testo in tracciati (outline) nel tuo strumento di design prima di esportare l'SVG; i tracciati si rasterizzano in modo identico ovunque.
Perché le immagini incorporate o il CSS esterno non compaiono?
Quando un browser rasterizza un SVG dentro un elemento <img>, tratta il file come documento autonomo: i riferimenti esterni — fogli di stile collegati, webfont e tag <image> che puntano ad altri URL — non vengono scaricati, e i contenuti cross-origin possono contaminare il canvas e bloccare del tutto l'esportazione. La soluzione è rendere l'SVG autosufficiente: incorpora il CSS inline e le eventuali immagini raster come URI data:.
La trasparenza viene preservata?
Sì. Il PNG ha un canale alfa completo e, con lo sfondo impostato su Trasparente, ogni area che il tuo SVG lascia non dipinta resta trasparente nell'output. L'anteprima a scacchi mostra esattamente dove. Scegli Bianco o un colore personalizzato solo quando vuoi deliberatamente appiattire lo sfondo.
Quale scala dovrei usare per schermi retina / ad alta densità?
Esporta a 2x la dimensione a cui l'immagine verrà mostrata — un logo visualizzato a 200×80 pixel CSS dovrebbe essere un PNG da 400×160. Gli schermi ad alta densità concentrano circa quattro pixel fisici in ogni pixel CSS, quindi un'esportazione a 1x appare sfocata su di essi. Il 4x vale la pena solo per usi vicini alla stampa; per la normale visualizzazione web non fa che quadruplicare di nuovo la dimensione del file.

About

Come i browser rasterizzano l'SVG in un contesto immagine

Caricare un SVG tramite un elemento <img> (o disegnarlo su un canvas) mette il motore SVG del browser in una modalità ristretta: gli script contenuti nel file non vengono mai eseguiti, i gestori di eventi sono ignorati e le risorse esterne — font, fogli di stile, immagini referenziate — non vengono scaricate. Il documento è renderizzato come una pura immagine autosufficiente. Quella restrizione è esattamente ciò che rende un convertitore lato client come questo sicuro da usare con qualsiasi SVG tu trovi: perfino un file malevolo viene trattato solo come pixel, mai come codice. È anche l'origine del limite principale dello strumento — tutto ciò che l'SVG richiama dall'esterno semplicemente non apparirà.

Scegliere le dimensioni: rasterizza in grande, riduci dopo

Ingrandire un vettoriale non costa nulla, ma ingrandire un raster lo degrada sempre. Il flusso di lavoro corretto è quindi rasterizzare una volta sola alla dimensione più grande di cui qualsiasi utilizzatore avrà bisogno — diciamo 4x la dimensione nominale del design — e produrre le varianti più piccole riducendo quel PNG master, un'operazione quasi senza perdite. Fare il contrario (esportare in piccolo e poi ingrandire) butta via dettagli che l'SVG avrebbe potuto fornire gratis. Poiché il PNG è compresso senza perdite, l'unico vero costo di una dimensione di esportazione generosa sono i byte su disco.

Sources & references

Authoritative references behind the math, constants, and tables on this page. Verified by Buğra Sözeri on the dates shown and re-checked at every deploy.