Preskoči na vsebino

Kodirnik URL-jev SVG

Pretvorite oznako SVG v podatkovni URI, pripravljen za CSS, in dekodirajte podatkovne URI nazaj v SVG.

Vhod
Izhod

Kodirnik URL-jev SVG

Prilepite SVG in pridobite podatkovni URI, ki ga lahko spustite neposredno v CSS, pripravljen za sliko ozadja ali masko. Namesto base64 kodirnik uporablja pristop kompaktnega kodiranja URL-jev: dvojne narekovaje zamenja z enojnimi, strne presledke in odstotno kodira samo znake, ki jih dejansko potrebujejo, tako da rezultat ostane kratek in človeku berljiv. Tako ostane vaša tabela slogov manjša od bloba base64 in vam še vedno omogoča prepoznavanje oblik znotraj URI-ja.

Trije izhodni formati pokrivajo običajne primere. Pravilo CSS ovije URI podatkov v sliko ozadja: url("…"); tako da lahko prilepite celotno izjavo. URI golih podatkov vam daje samo vrednost za lastnost po meri, src <img> ali masko SVG. Obrazec base64 ustvari podatkovni:image/svg+xml;base64 URI, varen za UTF-8, za orodja ali korake gradnje, ki pričakujejo to kodiranje, vključno z SVG z emodžiji ali vozlišči naglašenega besedila. Možnost vrste MIME odpre isti kodirnik poljubni vsebini: izberite text/plain, text/html, text/css, application/json ali drugo vrsto in prilepljeno besedilo postane podatkovni URI te vrste. Samo image/svg+xml strne presledke in dvojne narekovaje zamenja z enojnimi, ker ta dva prijema skrajšata oznake, a pokvarita navadno besedilo in JSON. Vrste, ki niso slika, opustijo tudi ovoj background-image in vrnejo gol url("…").

Preklopite smer na dekodiranje in orodje obrne katero koli od treh oblik nazaj v surovo oznako SVG. Prilepite pravilo CSS, goli podatkovni URI ali base64 in ekstrahira SVG, tako da lahko uredite ikono, ki obstaja samo v slogovni tabeli. Seštevek prikazuje vhodno velikost, izhodno velikost in odstotek spremembe, tako da lahko na prvi pogled vidite, ali se je kodiranje zmanjšalo ali povečalo ikono. URI lahko pride tudi zavit v oznako HTML <img> ali <link>, z izrecnim naborom znakov v glavi.

Vse teče v vašem brskalniku. Vaša oznaka SVG se nikoli ne naloži, tako da lahko kodirate zasebne ikone, logotipe in notranja sredstva, ne da bi zapustili vašo napravo.

FAQ

Zakaj uporabljati kodiranje URL namesto base64 za SVG?
SVG, kodiran z URL-ji, je običajno manjši od base64 in ostane berljiv, zato je vaš CSS lažji in še vedno lahko vidite oznako. Base64 je na voljo tudi za orodja, ki to zahtevajo.
Katere izhodne oblike obstajajo?
Štiri: pravilo CSS, goli podatkovni URI, oznaka HTML <img> in oznaka HTML <link> — rel=icon za SVG, rel=stylesheet za CSS. Odstotno ali Base64 kodiranje velja za vse štiri, možnost nabora znakov pa zapiše charset v glavo.
Ali lahko spremenim podatkovni URI nazaj v SVG?
ja Nastavite smer za dekodiranje in lepljenje pravila CSS, golega podatkovnega URI-ja ali base64; orodje ekstrahira in vrne izvirno oznako SVG.
Zakaj se mora moj vnos začeti s <svg?
Kodiranje preveri, ali je vnos videti kot SVG, tako da nepopolno lepljenje ne postane pokvarjen podatkovni URI. Sprejemajo se oznake, ki se začnejo s <svg ali <?xml.
Ali je moj SVG kje naložen?
Ne. Pretvorba poteka v celoti v vašem brskalniku in vaša oznaka nikoli ne zapusti vaše naprave.