UTILS.
100% no navegador
🖼️

Codificador de SVG para CSS / Data-URI

Codifique marcação SVG como uma data URI codificada em URL ou base64, com linhas CSS background-image e <img> prontas para colar. Minificação opcional.

— a saída aparece aqui —
— a saída aparece aqui —
— a saída aparece aqui —

Sobre esta ferramenta

Cole marcação SVG bruta e obtenha uma data URI que você pode colar direto em CSS ou HTML. A ferramenta produz duas codificações e tudo é gerado no seu navegador, então nada é enviado.

A saída codificada em URL troca aspas duplas por aspas simples, executa encodeURIComponent e, em seguida, restaura alguns caracteres seguros (espaço, dois-pontos, barra, igual) para mantê-la compacta e legível. A saída base64 codifica o SVG em UTF-8 e o passa por btoa, gerando data:image/svg+xml;base64,… . Uma comparação de bytes mostra qual codificação é menor; para a maioria dos ícones a forma codificada em URL vence.

Ative a minificação para remover comentários e reduzir o espaço em branco entre as tags antes de codificar. Copie a linha background-image para CSS ou a linha <img src> para HTML. Observe que aspas dentro do SVG são normalizadas para aspas simples para que a data URI possa ser envolvida com aspas duplas com segurança.

Perguntas frequentes

Codificado em URL ou base64 — qual devo usar?
O codificado em URL costuma ser menor e permanece legível, o que ajuda na depuração. O base64 é mais opaco, porém universalmente aceito; a comparação de tamanho indica qual é menor aqui.
Por que minhas aspas duplas foram trocadas por aspas simples?
As aspas de atributos são convertidas para aspas simples para que toda a data URI caiba dentro de um url("…") ou src="…" com aspas duplas sem escapes. Ambas são válidas em SVG.
A minificação muda a aparência do SVG?
Não. Ela apenas remove comentários e reduz o espaço em branco entre e dentro das tags; o vetor renderizado é idêntico, apenas menor.
Meu SVG é enviado a algum lugar?
Não. A codificação é feita inteiramente no seu navegador com encodeURIComponent e btoa; a marcação nunca sai do seu dispositivo.

Mais ferramentas