Přeskočit na obsah
TextArray
100% lokálně

SVG URL kodér

Převeďte SVG značky na data URI připravené pro CSS a dekódujte data URI zpět na SVG.

Vstup
Výstup

SVG URL kodér

Vložte SVG a dostanete data URI, které vložíte přímo do CSS, připravené pro background-image nebo masku. Místo base64 kodér používá kompaktní přístup s URL kódováním: dvojité uvozovky nahradí jednoduchými, zredukuje bílé znaky a procentuálně zakóduje jen znaky, které to opravdu potřebují, takže výsledek zůstává krátký a čitelný. Váš styl je tak menší než base64 blok a tvary uvnitř URI stále rozeznáte.

Tři formáty výstupu pokryjí běžné případy. CSS pravidlo obalí data URI do background-image: url("…"); takže vložíte celou deklaraci. Samotné data URI dá jen hodnotu pro vlastní proměnnou, atribut src prvku <img> nebo SVG masku. Formát base64 vytvoří data:image/svg+xml;base64 URI bezpečné pro UTF-8, které očekávají některé nástroje či build kroky, včetně SVG s emoji nebo textem s diakritikou.

Přepněte směr na dekódování a nástroj promění kterýkoli ze tří tvarů zpět na surové SVG značky. Vložte CSS pravidlo, samotné data URI nebo base64 a nástroj z něj vytáhne SVG, takže upravíte ikonu, která existuje jen uvnitř stylu. Součet ukazuje velikost vstupu, velikost výstupu a procentuální změnu, takže hned vidíte, zda kódování ikonu zmenšilo, nebo zvětšilo.

Vše běží ve vašem prohlížeči. Vaše SVG značky se nikam nenahrávají, takže zakódujete i soukromé ikony, loga a interní podklady, aniž by opustily vaše zařízení.

Časté dotazy

Proč u SVG použít URL kódování místo base64?
URL kódované SVG bývá menší než base64 a zůstává čitelné, takže CSS je lehčí a značky stále vidíte. Base64 nabízíme také pro nástroje, které ho vyžadují.
Jaké jsou tři formáty výstupu?
Úplné CSS pravidlo s background-image: url(...), samotná hodnota data URI a data URI base64 bezpečné pro UTF-8. Vyberte to, co potřebuje váš styl nebo komponenta.
Lze data URI proměnit zpět na SVG?
Ano. Nastavte směr na dekódování a vložte CSS pravidlo, samotné data URI nebo base64; nástroj vytáhne a vrátí původní SVG značky.
Proč musí vstup začínat na <svg?
Kódování kontroluje, zda vstup vypadá jako SVG, aby se náhodně vložená hodnota nestala rozbitým data URI. Přijímají se značky začínající na <svg nebo <?xml.
Nahrává se moje SVG někam?
Ne. Převod běží výhradně ve vašem prohlížeči a vaše značky nikdy neopustí vaše zařízení.