Panoramica / Immagini e grafica / SVG in PNG e Data URL
Immagini e grafica 100% nel browser e offline

SVG in PNG e Data URL

Incolla il codice SVG, guarda l'anteprima live, esporta un PNG quadrato della dimensione scelta e copia l'SVG come Data URI per CSS o Data URI in Base64.

Trascina o scegli un file; le impostazioni cambiano subito il risultato.

I tuoi file e dati non lasciano mai il browser: non viene caricato nulla.

Inserisci il codice SVG o incolla un file:

Anteprima SVG in tempo reale

Esporta

Pixel (quadrato)

Incolla il codice SVG, controlla l'anteprima, premi un pulsante. Ottieni una Data URI SVG da usare in CSS o in un tag img, oppure un PNG quadrato della dimensione che scegli.

Due formati di Data URI a confronto

Il pulsante Copia Data URI produce data:image/svg+xml,... con codifica percentuale e protegge anche apici singoli e doppi. Per l'SVG è spesso la forma più corta. Copia Base64 produce data:image/svg+xml;base64,... e allunga il testo di circa un terzo, ma gestisce bene anche i caratteri non ASCII. Entrambi copiano la URI intera con il prefisso data:. Lo strumento non minimizza il codice.

Esempi: dalla freccia del select al logo per lo store

  • Una freccia da 400 byte come icona di un menu a tendina personalizzato, direttamente nel CSS.
  • Un logo vettoriale esportato a 1024 px per il modulo di uno store che non accetta SVG.
  • L'anteprima, per vedere come appare un SVG prima di metterlo nel repository.

I passi, dal codice al file

  1. Incolla il codice nel campo. All'inizio c'è un esempio, un cerchio blu con una stella bianca.
  2. Guarda l'anteprima su sfondo scuro a scacchi.
  3. Premi uno dei due pulsanti di copia.
  4. Per il PNG inserisci i pixel e premi Scarica come PNG. Il file si chiama, per esempio, vector-512x512.png.

Dimensione del PNG e proporzioni

Il PNG è sempre quadrato. Una grafica larga viene stirata, e lo sfondo resta trasparente. Un valore vuoto o non valido diventa 512.

Perché il download può non partire

Spesso manca xmlns="http://www.w3.org/2000/svg". Senza, il browser di solito non carica l'immagine, e non compare nessun errore, mentre l'anteprima funziona. Immagini, font e fogli di stile esterni non vengono caricati. Dimensioni molto grandi possono fallire per il limite del canvas.

Il codice resta nel browser

Codifica e PNG avvengono sul tuo dispositivo e nessun pulsante invia richieste. L'anteprima è un elemento immagine con una Data URI e aggiunge xmlns solo per la visualizzazione. L'esportazione in PNG e la Data URI copiata non lo aggiungono. Script e gestori di eventi nel codice incollato non vengono eseguiti nell'anteprima.

Domande frequenti (FAQ)

È il codice SVG scritto in una URL che inizia con data:image/svg+xml. Il browser la legge come un file e puoi usarla in CSS o in un tag img senza una richiesta aggiuntiva.