svg2all

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

Caricamento dello strumento …

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.