Cosa fa
Questo strumento trasforma codice SVG o un file .svg in un’immagine PNG, JPG o WebP. Incolla il markup, trascina un file, scegli una scala o una larghezza esatta e scarica la bitmap. Il rendering avviene nel tuo browser, quindi icone, loghi e diagrammi non lasciano mai il tuo computer.
È utile ovunque l’SVG non sia accettato: icone di app, immagini per i social, presentazioni, documenti, firme email o software più datati. Hai un’anteprima in tempo reale su sfondo a scacchiera, così vedi esattamente quali parti sono trasparenti.
Come si usa
- Incolla il tuo codice
<svg>nell’editor, fai clic su Carica per aprire un file o trascinane uno sulla pagina. Esempio carica un piccolo logo. - Scegli una Dimensione: 1× usa le dimensioni proprie dell’SVG, 2×–4× le moltiplicano. Oppure digita una Larghezza personalizzata in pixel; l’altezza segue le proporzioni.
- Scegli il Formato: PNG per un output senza perdita con trasparenza, JPG per foto e compatibilità, WebP per file piccoli.
- Scegli lo Sfondo: trasparente, bianco o qualsiasi colore.
- Fai clic su Scarica. La riga sotto l’anteprima mostra la dimensione finale in pixel, il formato e la dimensione del file.
Come viene calcolata la dimensione
Lo strumento esamina l’elemento radice <svg>. width e height in px, pt, mm, cm, in o em vengono convertiti in pixel. Se mancano o sono espressi in percentuale, vengono usate al loro posto larghezza e altezza del viewBox. Poi si applica la scala o la larghezza personalizzata scelta, e l’SVG viene riscritto con dimensioni esplicite in pixel, così ogni browser lo disegna allo stesso modo.
Esempio
Un’icona con viewBox="0 0 24 24" e senza width né height diventa un PNG di 24 × 24 a 1×. A 4× diventa 96 × 96, e con una larghezza personalizzata di 512 diventa un PNG di 512 × 512 adatto come icona per uno store di app, ancora perfettamente nitido perché viene renderizzato dai vettori invece di essere ingrandito.
Suggerimenti
- L’XML non valido viene segnalato con un numero di riga, così puoi saltare direttamente al problema.
- Le immagini raster incorporate (
<image href="data:...">) funzionano; i link esterni no. - Il testo usa i font installati sul tuo computer. Per risultati identici al pixel ovunque, converti prima il testo in tracciati nel tuo programma di grafica.
- L’output più grande è limitato dalla dimensione massima del canvas del browser, circa 16.000 pixel per lato.
Domande frequenti
› L'SVG viene caricato da qualche parte?
No. Il tuo browser disegna l'SVG su un canvas e salva il risultato. Il codice e l'immagine restano sul tuo dispositivo.
› Come ottengo un PNG più nitido?
Scegli una scala 2×, 3× o 4×, oppure digita una larghezza esatta. SVG è un formato vettoriale, quindi il rendering a dimensioni maggiori produce contorni netti sugli schermi ad alta densità. 2× è una buona scelta predefinita per i display retina.
› Perché nell'output mancano alcune immagini o alcuni font?
Per sicurezza, i browser non caricano file esterni (immagini collegate, web font, CSS) quando un SVG viene disegnato come immagine. Incorpora le immagini come data URL e converti il testo in tracciati, oppure usa i font di sistema.
› Posso mantenere lo sfondo trasparente?
Sì. Scegli Trasparente con output PNG o WebP. JPG non supporta la trasparenza, quindi le aree trasparenti vengono riempite di bianco o del colore che hai scelto.
› Il mio SVG non ha width né height. Quale dimensione viene usata?
Lo strumento legge il viewBox e ne usa larghezza e altezza. Se non sono presenti né le dimensioni né il viewBox, ripiega sulla dimensione predefinita del browser di 300 × 150 e lo segnala.