Come funziona
Converte il codice di un SVG in un Data URI pronto da usare in CSS, così puoi incorporare l'icona direttamente nel foglio di stile senza un file separato né una richiesta HTTP aggiuntiva.
Offre due codifiche: URL-encoded (percent-encoding), più corta e leggibile, consigliata per l'SVG; e Base64, un po' più lunga ma universalmente compatibile.
Il risultato può essere generato come background-image, come mask-image (per colorare l'icona con CSS) o come variabile CSS riutilizzabile. Minificare l'SVG prima riduce ulteriormente le dimensioni.
Esempi
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">…</svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'…%3C/svg%3E");La codifica URL mantiene l'SVG quasi leggibile ed è di solito più corta di Base64.-webkit-mask-image: url("data:image/svg+xml,…");
mask-image: url("data:image/svg+xml,…");Come mask-image, il colore dell'icona si controlla con la proprietà background-color dell'elemento.Casi d'uso
- Incorporare icone SVG come background-image senza aggiungere richieste HTTP alla pagina.
- Usare un SVG come maschera (mask-image) per ricolorarlo dal CSS in base al tema o allo stato.
- Salvare un'icona in una variabile CSS e riutilizzarla in più selettori.
- Ridurre il peso delle icone inline minificando l'SVG prima di incorporarlo.
Domande frequenti
È meglio URL-encoded o Base64?
Per l'SVG, URL-encoded è di solito l'opzione migliore: genera un Data URI più corto e leggibile perché l'SVG è testo. Base64 offre la massima compatibilità, ma aggiunge circa il 33% di dimensione.
Perché usare mask-image invece di background-image?
Con background-image l'icona conserva i suoi colori originali. Con mask-image l'SVG definisce solo la forma e il colore lo fornisce il CSS, ideale per icone monocromatiche che cambiano con il tema.
Cosa fa l'opzione di minificazione?
Rimuove i commenti e comprime gli spazi bianchi dell'SVG prima di codificarlo, così il Data URI finale è più piccolo senza cambiare il disegno.
Il mio SVG viene caricato su un server?
No. La conversione avviene interamente nel tuo browser; l'SVG non lascia mai il tuo computer.