Preskočiť na obsah
TextArray
100% lokálne

SVG URL kodér

Preveďte SVG značky na data URI pripravené pre CSS a dekódujte data URI späť na SVG.

Vstup
Výstup

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.

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.

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.

Časté otázky

Prečo pri SVG použiť URL kódovanie namiesto base64?
URL kódované SVG býva menšie než base64 a zostáva čitateľné, takže CSS je ľahšie a značky stále vidíte. Base64 ponúkame tiež pre nástroje, ktoré ho vyžadujú.
Aké sú tri formáty výstupu?
Úplné CSS pravidlo s background-image: url(...), samotná hodnota data URI a data URI base64 bezpečné pre UTF-8. Vyberte to, čo potrebuje váš štýl alebo komponent.
Dá sa data URI premeniť späť na SVG?
Áno. Nastavte smer na dekódovanie a vložte CSS pravidlo, samotné data URI alebo base64; nástroj vytiahne a vráti pôvodné SVG značky.
Prečo musí vstup začínať na <svg?
Kódovanie kontroluje, či vstup vyzerá ako SVG, aby sa náhodná vložená hodnota nestala pokazeným data URI. Prijímajú sa značky začínajúce na <svg alebo <?xml.
Nahráva sa moje SVG niekam?
Nie. Prevod beží výhradne vo vašom prehliadači a vaše značky nikdy neopustia vaše zariadenie.