Codificador de Data URI para SVG | Data URIs CSS ~30% menores que base64

A ferramenta converte um SVG em uma data:image/svg+xml URI usando codificação percentual mínima — só escapa os caracteres que quebrariam url(...) — e devolve um trecho background-image: url(...) pronto para colar. Como o base64 sempre infla a carga em ~33%, o percent-encoding costuma economizar entre 20% e 35% em ícones típicos.

💡 Sobre esta ferramenta

O caso clássico é embutir um único ícone SVG no CSS sem ter que instalar um loader de SVG no Webpack ou Vite. Você corta uma requisição HTTP, elimina o piscar de ícone que ainda não carregou, e trocar o ícone no :hover vira uma regra CSS isolada.

Base64 também resolve, mas matematicamente engorda o payload em 33% (cada três bytes viram quatro caracteres). Já o SVG é texto, e a maioria do conteúdo é seguro dentro de uma URL. Os únicos caracteres que de fato precisam de escape são <, >, #, % e a aspa (" ou ') que colide com a envoltura externa do url(...). Essa é a estratégia popularizada pelo url-encoder do Yoksel na época em que SVGs estavam substituindo icon fonts.

A sobrescrita de fill ajuda quando você mantém um ícone monocromático (<svg ... fill="currentColor">) e quer variantes pré-coloridas — por exemplo, um estado :hover rosa e um :active mint — sem duplicar o SVG três vezes.

🧐 Perguntas frequentes

Devo escolher url("...") ou url('...')? A aspa simples é mais segura se a URI vai entrar em PostCSS, Sass ou em um template JS que já usa aspas duplas. Para CSS puro, a versão com aspa dupla exige um escape a menos e fica ligeiramente mais compacta.

A sobrescrita de fill também altera fill="currentColor"? Sim. Ela substitui qualquer atributo fill= que encontrar. Se quiser preservar o comportamento de currentColor, deixe o campo vazio.

O base64 chega a ser mais leve em algum caso? Eventualmente. SVGs muito aninhados (muitos <), com " em estilos inline, ou exportados por ferramentas como Sketch com declaração XML e comentários, podem ultrapassar os 33% de overhead do base64 depois do percent-encoding. Por isso a ferramenta mostra os três tamanhos lado a lado: dá para decidir com o número real, não com a regra geral.

O atributo xmlns é obrigatório? Para consumo via background-image: url(...), sim. O navegador processa a URI pelo decodificador de imagem, que exige um namespace declarado. A ferramenta não insere o atributo automaticamente; ela codifica exatamente o que você colar.

E ícones acima de 256 KB? O seletor de arquivos limita em 256 KB, mas na prática qualquer SVG acima de ~10 KB tende a render melhor servido como arquivo separado: o stylesheet fica enxuto e o cache do navegador volta a ajudar.

📚 Curiosidades

O atalho de "percent-encoding mínimo, só nos caracteres que quebram url()" se espalhou a partir do url-encoder do Yoksel em 2015-2016, quando os SVGs começaram a tomar o lugar das icon fonts. A sintaxe arbitrária de background do Tailwind (bg-[url('data:image/svg+xml,…')]) é a herdeira direta: mesma codificação, mesma filosofia de arquivo único, apenas embrulhada em utility classes.