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.
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. Volba typu MIME otevře stejný enkodér pro jakýkoli obsah: vyberte text/plain, text/html, text/css, application/json nebo jiný typ a vložený text se změní na data URI daného typu. Jen image/svg+xml sbaluje mezery a mění dvojité uvozovky na jednoduché, protože tyto dva triky zkracují značky, ale ničí běžný text a JSON. Neobrázkové typy navíc vynechají obal background-image a vrátí holé url("…").
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. URI může přijít i zabalené v HTML značce <img> nebo <link>, s výslovnou znakovou sadou v hlavičce.
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í.