Codificatore URL SVG
Converti il markup SVG in un URI di dati pronto per CSS e decodifica nuovamente gli URI di dati in SVG.
Codificatore URL SVG
Incolla un SVG e ottieni un URI di dati che puoi inserire direttamente nel CSS, pronto per l'immagine di sfondo o una maschera. Invece di base64, il codificatore utilizza l'approccio compatto di codifica URL: scambia le virgolette doppie con le virgolette singole, comprime gli spazi bianchi e codifica in percentuale solo i caratteri che ne hanno effettivamente bisogno, quindi il risultato rimane breve e leggibile dall'uomo. Ciò mantiene il tuo foglio di stile più piccolo di un BLOB base64 e ti consente comunque di riconoscere le forme all'interno dell'URI.
Tre formati di output coprono i casi comuni. La regola CSS racchiude l'URI dei dati nell'immagine di sfondo: url("…"); quindi puoi incollare un'intera dichiarazione. L'URI dei dati semplici fornisce solo il valore per una proprietà personalizzata, un <img> src o una maschera SVG. Il modulo base64 produce un URI data:image/svg+xml;base64 sicuro per UTF-8 per strumenti o passaggi di creazione che prevedono tale codifica, inclusi SVG con emoji o nodi di testo accentati. L'opzione tipo MIME apre lo stesso codificatore a qualsiasi contenuto: scegli text/plain, text/html, text/css, application/json o un altro tipo e ciò che incolli diventa un data URI di quel tipo. Solo image/svg+xml comprime gli spazi e sostituisce le virgolette doppie con quelle singole, perché questi due trucchi accorciano il markup ma rovinano il testo semplice e il JSON. I tipi non immagine tralasciano anche l'involucro background-image e restituiscono un url("…") nudo.
Passa alla direzione della decodifica e lo strumento inverte qualsiasi delle tre forme riportandole al markup SVG grezzo. Incolla una regola CSS, un URI di dati semplici o uno base64 ed estrae l'SVG in modo da poter modificare un'icona che esiste solo all'interno di un foglio di stile. Il conteggio mostra la dimensione dell'input, la dimensione dell'output e la variazione percentuale, così puoi vedere a colpo d'occhio se la codifica ha ridotto o ingrandito l'icona. L'URI può uscire anche dentro un tag <img> o <link>, con charset esplicito nell'intestazione.
Tutto funziona nel tuo browser. Il tuo markup SVG non viene mai caricato, quindi puoi codificare icone private, loghi e risorse interne senza che lascino il tuo dispositivo.