Convertire SVG in sfondo CSS

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.

Una regola: .tua-classe { width; height; background-image: url("data:image/svg+xml,…"); background-repeat: no-repeat; background-size: contain; }. width e height sono la dimensione propria dell'SVG in pixel – modificali o eliminali a piacere; con background-size: contain l'icona si adatta a qualsiasi riquadro.

Per icone monocolore che devono seguire il colore del testo. La regola imposta background-color: currentColor e usa l'SVG come mask-image (con prefisso -webkit- per i Safari più vecchi), così l'icona viene disegnata nel color dell'elemento e cambia al passaggio del mouse o in modalità scura con una sola proprietà CSS. Conta solo la forma dell'SVG – i suoi riempimenti vengono ignorati. Le grafiche multicolore richiedono la variante sfondo normale.

Dal nome del file, a meno che tu non ne digiti uno: «Freccia Sinistra.svg» diventa .freccia-sinistra. I nomi vengono resi minuscoli, i caratteri non ammessi diventano trattini e una cifra iniziale riceve il prefisso «svg-», così il selettore è sempre valido.

Script e riferimenti esterni vengono sempre rimossi, prologo XML e commenti eliminati e, a meno che tu non disattivi «Ottimizza prima», l'SVG viene minimizzato. Il disegno in sé resta uguale.