UTILS.
100% nel browser
🖼️

Codificatore SVG in CSS / Data-URI

Codifica markup SVG come data URI URL-encoded o base64, con righe CSS background-image e <img> pronte da incollare. Minificazione opzionale.

— l'output appare qui —
— l'output appare qui —
— l'output appare qui —

Informazioni su questo strumento

Incolla markup SVG grezzo e ottieni un data URI da inserire direttamente in CSS o HTML. Produce due codifiche e tutto viene generato nel tuo browser, quindi niente viene caricato.

L'output URL-encoded sostituisce le virgolette doppie con quelle singole, esegue encodeURIComponent, poi ripristina alcuni caratteri sicuri (spazio, due punti, slash, uguale) per mantenerlo compatto e leggibile. L'output base64 codifica l'SVG in UTF-8 e lo passa attraverso btoa, dando data:image/svg+xml;base64,… . Un confronto in byte mostra quale codifica è più piccola; per la maggior parte delle icone vince la forma URL-encoded.

Abilita la minificazione per rimuovere i commenti e comprimere gli spazi tra i tag prima della codifica. Copia la riga background-image per il CSS o la riga <img src> per l'HTML. Nota che le virgolette all'interno dell'SVG vengono normalizzate a virgolette singole così che il data URI possa essere racchiuso in virgolette doppie in sicurezza.

Domande frequenti

URL-encoded o base64 — quale dovrei usare?
URL-encoded è di solito più piccolo e resta leggibile, il che aiuta il debug. Base64 è più opaco ma universalmente accettato; il confronto delle dimensioni ti dice quale è più piccolo qui.
Perché le mie virgolette doppie sono state cambiate in virgolette singole?
Le virgolette degli attributi vengono convertite in virgolette singole così che l'intero data URI possa stare dentro un url("…") o src="…" tra virgolette doppie senza escape. Entrambe sono valide in SVG.
La minificazione cambia l'aspetto dell'SVG?
No. Rimuove solo i commenti e comprime gli spazi tra e dentro i tag; il vettore renderizzato è identico, solo più piccolo.
Il mio SVG viene caricato da qualche parte?
No. La codifica avviene interamente nel tuo browser con encodeURIComponent e btoa; il markup non lascia mai il tuo dispositivo.

Altri strumenti