Convertitore da SVG a PNG (converte anche in JPG)
Convertite gratuitamente un file SVG o del codice SVG incollato in un'immagine PNG o JPG. Scegliete esattamente la dimensione di output di cui avete bisogno — tutto viene eseguito interamente nel vostro browser.
PNG o JPG — quale scegliere?
| Formato | Caratteristiche | Consigliato per |
|---|---|---|
| PNG | Compressione senza perdita di qualità, e mantiene intatto uno sfondo trasparente. | Loghi, icone e illustrazioni per cui serve la trasparenza o bordi nitidi |
| JPG | Compressione con perdita che mantiene piccola la dimensione del file, ma le aree trasparenti vengono riempite con il colore di sfondo scelto. | Immagini con uno sfondo fotografico, oppure quando ridurre al minimo la dimensione del file è la priorità |
Cos'è il convertitore da SVG a PNG?
Il convertitore da SVG a PNG vi permette di trasformare un file SVG (immagine vettoriale) o del codice SVG incollato in un'immagine PNG o JPG, nella dimensione in pixel che preferite. L'SVG è ampiamente utilizzato per icone, loghi e illustrazioni, ma esistono molte situazioni — il caricamento in un modulo web, oppure la visualizzazione in un'app o in un ambiente più datato che non supporta l'SVG — in cui serve invece un formato di immagine tradizionale. Questo strumento colma questa lacuna in pochi secondi, senza bisogno di installare alcun software aggiuntivo.
La conversione avviene interamente lato client grazie all'API Canvas del browser, quindi il vostro file o codice SVG non viene mai inviato a un server. Dato che l'SVG è un formato vettoriale, la dimensione in pixel al momento dell'esportazione deve necessariamente essere decisa da qualche parte; questo strumento rileva un valore predefinito sensato direttamente a partire dall'SVG stesso, per poi lasciarvi la libertà di modificarlo secondo le vostre esigenze.
Come si usa
- Caricare il vostro SVG Scegliete un file (funziona anche il drag & drop), oppure incollate direttamente il codice SVG.
- Scegliere un formato di output Scegliete PNG (mantiene la trasparenza) o JPG (riempie la trasparenza con un colore di sfondo).
- Regolare la dimensione di output Digitate direttamente larghezza/altezza, oppure usate i pulsanti di scala (1x/2x/4x) per modificare entrambe contemporaneamente.
- Convertire e scaricare Cliccate su «Converti» per visualizzare un'anteprima, quindi scaricatela immediatamente.
Consigli per sfruttarlo al meglio
- Se il vostro SVG non ha attributi width/height né un viewBox, la dimensione di output iniziale è impostata di default su 512×512px. Potete modificarla in qualsiasi momento in base alle vostre esigenze.
- I pulsanti di scala (1x/2x/4x) moltiplicano con un solo clic la dimensione rilevata dal vostro SVG — comodo per esportare set di icone in 2x/4x per display Retina (ad alta densità di pixel).
- Scegliete PNG se dovete mantenere uno sfondo trasparente. Il formato JPG non possiede un canale alfa, quindi qualsiasi area trasparente viene riempita con il colore di sfondo scelto (bianco per impostazione predefinita).
- I gradienti complessi e gli effetti filtro presenti nel vostro SVG vengono visualizzati esattamente come il vostro browser li interpreta. Se l'SVG fa riferimento a font o immagini esterne, verranno mostrati correttamente solo se il vostro browser riesce effettivamente a caricarli.
- Lasciate attiva l'opzione «Blocca proporzioni» per modificare larghezza o altezza mantenendo le proporzioni originali. Disattivatela per impostare larghezza e altezza in modo indipendente l'una dall'altra.
Casi d'uso
Rasterizzare icone e loghi
Convertite in PNG un'icona SVG esportata da uno strumento di design prima di inserirla in un sistema o in un'app che non supporta l'SVG.
Caricare su moduli web
Molti moduli e servizi non accettano il caricamento di file SVG — convertiteli in PNG/JPG in anticipo per aggirare questo limite.
Esportare più dimensioni per display Retina
Usate i pulsanti di scala per generare rapidamente versioni 1x/2x/4x per un set di icone ad alta risoluzione.
Incollare sui social media o nelle presentazioni
Convertite in un formato di immagine tradizionale per piattaforme e software di presentazione che non accettano direttamente l'SVG.
Glossario
- SVG (Scalable Vector Graphics)
- Un formato di immagine vettoriale che descrive le forme come coordinate e percorsi in testo XML. Non appare mai sgranato quando viene ingrandito o rimpicciolito.
- Rasterizzazione
- Il processo di conversione di un'immagine vettoriale in una griglia di pixel (un'immagine raster) a una dimensione specifica.
- viewBox
- Un attributo SVG che definisce l'intervallo di coordinate interno occupato dal suo contenuto. Utilizzato come valore di riserva per le dimensioni quando width/height sono assenti.
- Canale alfa
- L'informazione di trasparenza memorizzata per ciascun pixel di un'immagine. Il PNG la conserva; il JPG non ne possiede una, quindi le aree trasparenti vengono riempite con un colore di sfondo durante la conversione.
- Canvas API
- L'interfaccia JavaScript standard del browser per disegnare e manipolare immagini. Questo strumento rasterizza l'SVG utilizzando esclusivamente la Canvas API, senza bisogno di librerie aggiuntive.
Domande frequenti
Curiosità — un SVG è in realtà solo un file di testo scritto in XML
A differenza di PNG o JPG, che memorizzano un'immagine come una griglia di pixel, l'SVG (Scalable Vector Graphics) descrive le forme come coordinate matematiche e percorsi scritti in testo XML puro. Proprio per questo motivo non appare mai sgranato o frastagliato quando viene ingrandito o rimpicciolito, e proprio per questo si può aprire un file SVG anche in un semplice editor di testo e leggerne direttamente il contenuto, riga per riga. Questa struttura di fondo è esattamente il motivo per cui l'SVG è il formato preferito per loghi e icone che devono rimanere nitidi a moltissime dimensioni diverse, dalle favicon dei siti web fino alle illustrazioni di grande formato.
L'SVG non possiede di per sé alcuna nozione di «risoluzione» — viene memorizzato esclusivamente come descrizione vettoriale, indipendente da un numero concreto di pixel. Nel momento in cui lo rasterizzate in un formato tradizionale basato sui pixel come PNG o JPG, qualcuno o qualcosa deve necessariamente decidere le dimensioni in pixel da usare per la resa grafica. Proprio per questo motivo questo strumento vi permette di specificare larghezza e altezza: è una conseguenza diretta e inevitabile di ciò che l'SVG è per sua natura, cioè una descrizione di forme e non una griglia di pixel già definita.
Nella pratica, moltissimi file SVG reali omettono del tutto gli attributi width/height, oppure li esprimono in unità relative come le percentuali. Per questi casi, gli strumenti generalmente ricorrono all'attributo viewBox, che definisce l'intervallo di coordinate interno occupato dal contenuto dell'SVG. Questo strumento segue esattamente la stessa convenzione ampiamente diffusa, utilizzando il viewBox come valore di riserva per le dimensioni in pixel ogni volta che width e height risultano assenti, così da ottenere comunque un punto di partenza coerente che potrete poi modificare liberamente.