LocalToolsRaccolta di strumenti browser offline

Categoria: Sviluppo

Da SVG a sfondo CSS

Idea internaManca uno strumento?

Trasforma un markup SVG inline in una data URI per background-image

Incolla un markup SVG e ottieni una data URI CSS per background-image, più le righe di background-repeat, background-size e background-position, con un'anteprima dal vivo per controllare prima di copiare.

Output
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='2'%3E %3Ccircle cx='12' cy='12' r='9' /%3E %3Cpath d='M8 12h8M12 8v8' /%3E %3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center;

L'SVG non lascia mai il browser; viene codificato direttamente nel valore CSS.

Tutto ciò che c'è in questa pagina viene elaborato nel tuo browser. Niente viene caricato.

A cosa serve

Una piccola icona o un motivo SVG sono spesso più leggeri come data URI CSS inline che come richiesta di immagine separata, ma codificare a mano il markup perché sopravviva dentro un valore url(...) è soggetto a errori: virgolette, parentesi angolari e interruzioni di riga richiedono tutti un'escape accurata. Questo strumento fa quella codifica al posto tuo, mantenendo il risultato breve e leggibile invece di ricadere sul base64, e mostra un'anteprima dal vivo dello sfondo alle impostazioni di ripetizione e dimensione che scegli.

Come si usa

  1. Incolla il markup SVG che vuoi usare come sfondo.
  2. Scegli come deve ripetersi e scalare.
  3. Copia la dichiarazione CSS e incollala nel tuo foglio di stile.

Privacy

Questo strumento funziona interamente nel tuo browser. Quello che inserisci non viene mai caricato, salvato o condiviso: chiudendo la scheda sparisce.

Domande frequenti

È lo stesso di codificare l'SVG in base64?
No. Fa l'escape solo della manciata di caratteri che altrimenti romperebbero un valore CSS, il che rende la data URI notevolmente più corta e ancora leggibile, a differenza di un blocco base64.
L'SVG viene caricato da qualche parte?
No. La codifica avviene con semplice sostituzione di stringhe nella scheda del tuo browser; il markup che incolli non lascia mai la pagina.
Posso usare currentColor o variabili CSS dentro l'SVG?
currentColor funziona perché viene risolto dal browser al momento del rendering, ma le proprietà personalizzate CSS referenziate negli attributi dell'SVG stesso no, dato che una data URI per background-image è markup statico, non un foglio di stile dal vivo.

Torna a tutti gli strumenti