Vai al contenuto
TextArray
100% locale

Codificatore URL SVG

Converti il markup SVG in un URI di dati pronto per CSS e decodifica nuovamente gli URI di dati in SVG.

Ingresso

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.

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.

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.

FAQ

Perché utilizzare la codifica URL anziché base64 per SVG?
L'SVG con codifica URL è solitamente più piccolo di base64 e rimane leggibile, quindi il tuo CSS è più leggero e puoi comunque vedere il markup. Base64 viene offerto anche per gli strumenti che lo richiedono.
Quali sono i tre formati di output?
Una regola CSS completa con immagine di sfondo: url(...), un valore URI di dati semplici e un URI di dati Base64 sicuro per UTF-8. Scegli quello di cui il tuo foglio di stile o componente ha bisogno.
Posso trasformare un URI di dati in SVG?
SÌ. Imposta la direzione per decodificare e incollare una regola CSS, un URI di dati semplici o uno base64; lo strumento estrae e restituisce il markup SVG originale.
Perché il mio input deve iniziare con <svg?
La codifica controlla che l'input assomigli a SVG, quindi un incolla vagante non diventa un URI di dati danneggiato. È accettato il markup che inizia con <svg o <?xml.
Il mio SVG è caricato da qualche parte?
No. La conversione viene eseguita interamente nel tuo browser e il tuo markup non lascia mai il tuo dispositivo.