Převod SVG na CSS (data URI)

SVG jako optimalizovaný data URI pro CSS background-image a mask-image. Anglicky SVG to CSS data URI.

Vše se počítá přímo v tomto prohlížeči — žádná data nikam neodcházejí.

SVG jako CSS pozadí

Jak použít: Převod SVG na CSS (data URI)

Nástroj převede SVG ikonu na data URI, které lze vložit přímo do CSS jako background-image nebo mask-image. Ikona pak nepotřebuje samostatný soubor ani požadavek na server.

  1. Vlož SVG kód do pole SVG kód.
  2. V poli Kódování zvol optimalizovaný text (kratší a čitelný), nebo Base64.
  3. Zkopíruj hotové CSS pro background-image, nebo mask-image.

Časté chyby a tipy

Obarvení ikony
Barvu SVG v background-image nejde změnit z CSS. Použij mask-image: prvek dostane barvu z background-color a ikona funguje jako maska, takže ji snadno přebarvíš i pro tmavý motiv.
Text, nebo Base64
Textové data URI bývá kratší než Base64 a po kompresi gzip ještě výrazněji. Base64 použij, pokud nástroj, do kterého kód vkládáš, s textovým tvarem neumí pracovat.
Chybí xmlns
SVG vložené do stránky funguje i bez atributu xmlns, jako samostatný obrázek ale ne. Nástroj ho doplní.

Nástroj je zdarma a běží celý v tvém prohlížeči — vložená data se nikam neodesílají ani neukládají.

Obrázek do Base64 a zpět →

Další nástroje v kategorii Konvertory