Trascina un file SVG o fai clic per selezionarlo
SVG
Come funziona
L’SVG è un formato vettoriale: descrive le forme con coordinate, quindi può essere disegnato a qualsiasi dimensione senza perdere nitidezza. PNG e JPG, invece, sono immagini raster con un numero fisso di pixel. Rasterizzare è esattamente questo passaggio: fissare una risoluzione e disegnare il vettore su quella griglia di pixel.
Per questo la risoluzione si sceglie prima di convertire, non dopo. Lo strumento riscrive larghezza e altezza dell’SVG alla dimensione richiesta e solo allora lo disegna, così il browser ritraccia le curve a quella scala invece di ingrandire un’immagine piccola. Puoi indicare un moltiplicatore (2×, 4×…) oppure larghezza e altezza esatte in pixel.
Il PNG mantiene la trasparenza, il JPG no: le aree trasparenti vengono riempite con il colore di sfondo che scegli. Tutto il disegno avviene nel tuo browser con Canvas: né il file né il codice SVG vengono caricati su un server.
Esempi
<svg viewBox="0 0 24 24" width="24" height="24">…</svg>PNG 96 × 96 pxUn’icona da 24 px convertita con moltiplicatore 4× diventa 96 × 96 px, la dimensione tipica per gli schermi ad alta densità.<svg viewBox="0 0 1200 630">…</svg>JPG 1200 × 630 pxUn SVG senza attributi width e height prende la dimensione dal viewBox; qui viene rasterizzato a 1× per un’immagine di anteprima sui social.Casi d'uso
- Generare le icone PNG richieste dagli store di app o dai manifest web, che non accettano SVG.
- Convertire un logo vettoriale in PNG con sfondo trasparente per inserirlo in una presentazione o in un documento.
- Esportare un diagramma o un grafico SVG in JPG per allegarlo a un’e-mail o caricarlo su una piattaforma che rifiuta i vettori.
- Ottenere le versioni @2x e @3x della stessa icona per gli schermi ad alta densità.
- Produrre l’immagine di anteprima (Open Graph) di un sito partendo da un modello SVG.
Domande frequenti
Quale risoluzione conviene scegliere?
Quella dell’uso finale. Per gli schermi normali basta la dimensione con cui l’immagine verrà mostrata; per gli schermi ad alta densità conviene 2× o 3× quel valore. Per la stampa, moltiplica la misura in pollici per 300 così da arrivare a 300 dpi.
Perché il mio SVG esce con una dimensione inattesa?
La dimensione iniziale viene dagli attributi width e height; se mancano o sono in percentuale, si usa il rapporto del viewBox. Quando non c’è nessuno dei due, il browser assume 300 × 150 px. Puoi ignorare quel valore e scrivere larghezza e altezza esatte in modalità personalizzata.
La trasparenza viene mantenuta?
In PNG sì, se lasci selezionata l’opzione di sfondo trasparente. Il JPG non ha canale alfa, quindi viene sempre disegnato su un colore pieno: bianco per impostazione predefinita, ma puoi cambiarlo.
Perché un SVG che usa immagini o font esterni non funziona?
Disegnato dentro un’immagine, l’SVG non può scaricare risorse da altri domini e il browser blocca l’esportazione per sicurezza. La soluzione è incorporare quelle risorse nell’SVG stesso: le immagini come data URI e i testi convertiti in tracciati.
Si può tornare da PNG a SVG?
Non in modo diretto: rasterizzando si perde l’informazione vettoriale e restano solo pixel. Recuperare le curve richiede una vettorizzazione che ricostruisce forme approssimate, non l’originale. Conviene conservare sempre l’SVG di partenza.