Convertire SVG in data URI
Trasforma un SVG in un URL data: compatto per CSS e HTML – nel browser, senza caricamento.
Funziona nel tuo browser – il file non viene caricato
Domande frequenti
Il mio file viene caricato?
No. La conversione avviene interamente nel tuo browser. Il file non lascia mai il tuo dispositivo – non c'è alcun server che possa vederlo. Una volta caricata la pagina, lo strumento funziona persino offline.
Minima o base64?
Minima, a meno che uno strumento non pretenda base64. Lascia l'SVG leggibile, compatta gli spazi, sostituisce le virgolette doppie con quelle singole e codifica in percentuale solo i caratteri che rompono un url(«…») CSS: %, #, <, > e le parentesi graffe. È circa un terzo più piccola di base64 e si comprime meglio in trasmissione. Base64 è opaca ma funziona in ogni contesto, anche nei vecchi client di posta.
Come uso il risultato?
Nel CSS: background-image: url("data:image/svg+xml,…"); oppure come mask-image. In HTML: <img src="data:…">. Racchiudi l'URL tra virgolette doppie – la forma minima usa apposta quelle singole all'interno. Lo strumento «SVG in sfondo CSS» scrive la regola completa per te.
Perché l'output è diverso dal mio file?
Prologo XML, commenti e DOCTYPE vengono eliminati – in un data URL non significano nulla – e, a meno che tu non disattivi «Ottimizza prima», l'SVG viene minimizzato con lo stesso ottimizzatore di «Ottimizzare un SVG». Script e riferimenti esterni vengono sempre rimossi.
Quando un data URI è una cattiva idea?
Per grafiche grandi. Un SVG incorporato viene scaricato con ogni foglio di stile o pagina che lo contiene e non può essere messo in cache da solo. I data URI danno il meglio con icone piccole di pochi kilobyte; per illustrazioni grandi collega invece il file.
Strumenti correlati
Riparare la viewBox di un SVG
Aggiunge la viewBox mancante da width e height, così l'SVG finalmente si ridimensiona – nel browser.
● Nel browser
Sostituire i colori in un SVG
Sostituisce un colore con un altro in tutto l'SVG – riempimenti, contorni, gradienti e stili – nel browser.
● Nel browser
Ottimizzare un SVG
Riduce i file SVG senza cambiarne l'aspetto – nel browser.
● Nel browser
Convertire SVG in sfondo CSS
Scrive una regola CSS pronta da incollare con l'SVG incorporato come sfondo o maschera – nel browser.
● Nel browser
Generatore di codici QR (SVG)
Trasforma un link o un testo in un codice QR scalabile – nel browser.
● Nel browser
Immagine segnaposto (SVG)
Crea un segnaposto della dimensione voluta in SVG – nel browser.
● Nel browser