Da SVG a data URI per CSS
SVG to CSS Data URI
Codifica un SVG come data URI da usare come sfondo CSS, applicando l’escape solo dove serve per tenerlo corto.
Trasforma un SVG in un data URI da incollare in un foglio di stile, codificato per URL anziché in Base64 perché così è insieme più piccolo e ancora leggibile. Mostra le tre dimensioni affiancate, disegna l’URI codificato così si vede che funziona, e avverte riguardo a quella manciata di cose che fanno sì che un SVG, una volta diventato data URI, non disegni proprio nulla.
Trascina qui un SVG
Oppure modifica il markup qui sotto.
SVG
Anteprima
È disegnato dall’URI codificato stesso, quindi se compare qui comparirà anche nel tuo foglio di stile.
Dimensione
SVG grezzo
165 B
Codificato in URL
198 B
Base64
246 B
Qui la codifica in URL è 19,5% più piccola di Base64.
Base64 costa un 33⅓% fisso su qualsiasi input. Un SVG è testo, e dentro un url() CSS vanno mascherati solo pochi dei suoi caratteri — così la codifica in URL di solito si ferma intorno al 10% in più del file grezzo. E nel foglio di stile resta leggibile, si trova con grep e si confronta in un diff, cosa che Base64 non consente.
Risultato
Vengono mascherati solo %, <, >, # e qualche parentesi, e le virgolette doppie dell’SVG diventano singole così la stringa CSS può usare le doppie senza rischi. Quello che conta di più è #: non mascherato dentro fill="#fff" apre un identificatore di frammento e tronca l’URL, e il risultato è che non viene disegnato proprio niente, senza nessun errore da nessuna parte.
Ti serve un raster? Il convertitore da SVG a PNG rende in PNG a qualsiasi scala. Vuoi l’SVG più piccolo prima di codificarlo? L’ottimizzatore di SVG riscrive i dati dei tracciati.
Come si usa
Incollare o trascinare l’SVG
Il riquadro del sorgente è modificabile, quindi il markup si può correggere qui invece di tornare al file. L’esempio è un’icona a tratto, che è il caso comune.
Leggere gli avvisi prima di ogni altra cosa
L’`xmlns` mancante è quello che frega tutti: in linea dentro l’HTML non conta, ma un data URI viene analizzato come documento XML a sé stante e senza `xmlns` il browser non disegna niente e non segnala niente. Gli altri avvisi riguardano immagini esterne, script e dimensioni in percentuale senza viewBox.
Controllare l’anteprima
È disegnata dall’URI codificato stesso e non dal sorgente, quindi se l’icona compare in quel riquadro comparirà anche nel foglio di stile. Un riquadro vuoto significa che l’URI è rotto, e di solito gli avvisi qui sopra dicono perché.
Scegliere la proprietà e copiare
La dichiarazione cambia con la proprietà: `background-image`, `mask-image`, `content` oppure un `src` nudo. Il Base64 è disponibile per quel raro consumatore che non sa prendere un URI codificato con i percento, ed è sempre più grande.
Domande frequenti
Perché non il Base64? Lo usano tutti.
Il Base64 costa un 33⅓% fisso su qualunque ingresso, perché trasforma tre byte in quattro. Un SVG è testo, e dentro un `url()` CSS hanno davvero bisogno di essere protetti solo `%`, `<`, `>`, `#` e un paio di parentesi, quindi la codifica per URL si assesta di solito intorno al 10% in più rispetto al file grezzo. Per giunta resta cercabile e confrontabile nel foglio di stile. Il pannello stampa entrambi i numeri per il file in esame.
La mia icona è sparita e non c’è alcun errore da nessuna parte.
Quasi sempre un `#` non protetto. In `fill="#fff"` il cancelletto apre un identificatore di frammento, quindi l’URL viene troncato lì e il browser recupera qualcosa che non è un SVG, in silenzio. Questo codificatore lo protegge. Se l’URI è stato scritto a mano, è la prima cosa da controllare.
Posso animare l’SVG nel data URI o eseguirci degli script?
Non come sfondo CSS. Un SVG caricato in quel modo gira in una modalità statica e limitata: niente script, niente `foreignObject`, nessuna risorsa esterna, e il CSS della pagina esterna non può arrivarci dentro. L’animazione dichiarativa SMIL a volte parte e a volte no, a seconda del motore. Se serve qualcosa di tutto questo, l’SVG va messo in linea nel documento.
Quando il data URI è la scelta sbagliata?
Quando l’SVG è grande o viene usato in più di un paio di punti. Un data URI non si può mettere in cache separatamente, quindi ogni pagina che porta con sé il foglio di stile riporta anche l’icona, e un’illustrazione da 30KB messa in linea nel CSS sono 30KB sul percorso critico. Icone e motivi piccoli sono ciò per cui questo strumento esiste; qualunque cosa più grande sta meglio come file, o come sprite.
Può ricevere da
Ottimizzare un SVG
SVG Optimiser
Toglie i residui lasciati dagli editor, fonde le trasformazioni e arrotonda la precisione dei tracciati, mostrando il confronto disegnato.
Da immagine a Base64 o data URI
Image to Base64 / Data URI
Codifica un’immagine in una stringa Base64 o in un data URI pronto da incollare in CSS, HTML o JSON.
Formattatore e minificatore CSS
CSS Beautifier & Minifier
Formatta o minifica il CSS senza riordinare niente, conservando esattamente il flusso dei token.
Editor SVG con spiegazioni
SVG Editor and Explainer
Modifica un SVG accanto alla sua resa dal vivo e spiega il file: viewBox e scalatura, trasformazioni, ogni comando di tracciato, il colore ereditato, i byte sprecati e che cosa si rompe dentro un <img>, in un data URI o in linea.
Dopo
Questi accettano ciò che produce questo strumento, così il risultato può passare direttamente.
Formattatore e minificatore CSS
CSS Beautifier & Minifier
Formatta o minifica il CSS senza riordinare niente, conservando esattamente il flusso dei token.
Da immagine a Base64 o data URI
Image to Base64 / Data URI
Codifica un’immagine in una stringa Base64 o in un data URI pronto da incollare in CSS, HTML o JSON.
Ottimizzare un SVG
SVG Optimiser
Toglie i residui lasciati dagli editor, fonde le trasformazioni e arrotonda la precisione dei tracciati, mostrando il confronto disegnato.
Convertitore di codici colore
Colour Format Converter
Converte un colore tra HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e dice qual è il colore con nome più vicino.
Selettore di colore
Colour Picker
Sceglie un colore su un campo OKLCH, con il contagocce sullo schermo o da un’immagine caricata, e lo copia nella notazione che vuoi.
Verifica del contrasto
Contrast Checker
Dà un punteggio alla coppia testo/sfondo secondo WCAG 2 e APCA e propone il colore più vicino che passa.