Sări la conținut
TextArray
Complet local

Codificator URL SVG

Convertiți marcajul SVG într-un URI de date pregătit pentru CSS și decodificați URI-urile de date înapoi în SVG.

Intrare
Ieșire

Codificator URL SVG

Lipiți un SVG și obțineți un URI de date pe care îl puteți introduce direct în CSS, gata pentru imagine de fundal sau o mască. În loc de base64, codificatorul folosește abordarea compactă de codificare URL: schimbă ghilimele duble cu ghilimele simple, restrânge spațiile albe și codifică procente numai caracterele care au nevoie de el, astfel încât rezultatul rămâne scurt și ușor de citit de om. Aceasta vă menține foaia de stil mai mică decât un blob base64 și vă permite să recunoașteți în continuare formele din interiorul URI.

Trei formate de ieșire acoperă cazurile obișnuite. Regula CSS include URI-ul datelor în imaginea de fundal: url("…"); astfel încât să puteți lipi o declarație întreagă. URI-ul de date goale vă oferă doar valoarea pentru o proprietate personalizată, un <img> src sau o mască SVG. Formularul base64 produce un UTF-8-safe data:image/svg+xml;base64 URI pentru instrumente sau pași de construcție care se așteaptă la acea codificare, inclusiv SVG-uri cu emoji sau noduri de text accentuate.

Comutați direcția la decodare și instrumentul inversează oricare dintre cele trei forme înapoi la marcaj SVG brut. Lipiți o regulă CSS, un URI de date simple sau unul base64 și extrage SVG-ul, astfel încât să puteți edita o pictogramă care există doar în interiorul unei foi de stil. Contul arată dimensiunea de intrare, dimensiunea de ieșire și modificarea procentuală, astfel încât să puteți vedea dintr-o privire dacă codarea a micșorat sau a crescut pictograma.

Totul rulează în browserul tău. Marcajul dvs. SVG nu este încărcat niciodată, așa că puteți codifica pictograme private, sigle și elemente interne fără ca acestea să părăsească dispozitivul.

FAQ

De ce să folosiți codificarea URL în loc de base64 pentru SVG?
SVG codificat în URL este de obicei mai mic decât base64 și rămâne lizibil, astfel încât CSS-ul dvs. este mai ușor și puteți vedea în continuare marcajul. Base64 este oferit și pentru instrumentele care o necesită.
Care sunt cele trei formate de ieșire?
O regulă CSS completă cu imagine de fundal: url(...), o valoare URI de date goale și un URI de date base64 sigur UTF-8. Alegeți foaia de stil sau componenta de care aveți nevoie.
Pot transforma un URI de date înapoi în SVG?
Da. Setați direcția pentru a decoda și a lipi o regulă CSS, un URI de date goale sau unul base64; instrumentul extrage și returnează marcajul SVG original.
De ce introducerea mea trebuie să înceapă cu <svg?
Codificarea verifică dacă intrarea arată ca SVG, astfel încât o pastă rătăcită nu devine un URI de date rupt. Marcarea care începe cu <svg sau <?xml este acceptată.
SVG-ul meu este încărcat undeva?
Nu. Conversia se desfășoară în întregime în browserul dvs., iar marcajul nu părăsește dispozitivul.