SVG URL kodér
Preveďte SVG značky na data URI pripravené pre CSS a dekódujte data URI späť na SVG.
SVG URL kodér
Vložte SVG a dostanete data URI, ktoré vložíte priamo do CSS, pripravené pre background-image alebo masku. Namiesto base64 kodér používa kompaktný prístup s URL kódovaním: dvojité úvodzovky nahradí jednoduchými, zredukuje biele znaky a percentuálne zakóduje iba znaky, ktoré to naozaj potrebujú, takže výsledok zostáva krátky a čitateľný. Váš štýl je tak menší než base64 blok a tvary vnútri URI stále rozoznáte.
Tri formáty výstupu pokryjú bežné prípady. CSS pravidlo obalí data URI do background-image: url("…"); takže vložíte celú deklaráciu. Samotné data URI dá len hodnotu pre vlastnú premennú, atribút src prvku <img> alebo SVG masku. Formát base64 vytvorí data:image/svg+xml;base64 URI bezpečné pre UTF-8, ktoré očakávajú niektoré nástroje či build kroky, vrátane SVG s emoji alebo textom s diakritikou. Voľba typu MIME otvorí ten istý enkodér pre akýkoľvek obsah: vyberte text/plain, text/html, text/css, application/json alebo iný typ a vložený text sa zmení na data URI daného typu. Iba image/svg+xml zbaľuje medzery a mení dvojité úvodzovky na jednoduché, lebo tieto dva triky skracujú značky, ale ničia obyčajný text a JSON. Neobrázkové typy navyše vynechajú obal background-image a vrátia holé url("…").
Prepnite smer na dekódovanie a nástroj premení ktorýkoľvek z troch tvarov späť na surové SVG značky. Vložte CSS pravidlo, samotné data URI alebo base64 a nástroj z neho vytiahne SVG, takže upravíte ikonu, ktorá existuje len vnútri štýlu. Súčet ukazuje veľkosť vstupu, veľkosť výstupu a percentuálnu zmenu, takže hneď vidíte, či kódovanie ikonu zmenšilo, alebo zväčšilo. URI môže prísť aj zabalené v HTML značke <img> alebo <link>, s výslovnou znakovou sadou v hlavičke.
Všetko beží vo vašom prehliadači. Vaše SVG značky sa nikam nenahrávajú, takže zakódujete aj súkromné ikony, logá a interné podklady bez toho, aby opustili vaše zariadenie.