Como funciona
Converte o código de um SVG em um Data URI pronto para usar em CSS, de modo que você possa incorporar o ícone diretamente na folha de estilos sem um arquivo separado nem uma requisição HTTP adicional.
Oferece duas codificações: URL-encoded (percent-encoding), mais curta e legível, recomendada para SVG; e Base64, um pouco mais longa, mas universalmente compatível.
O resultado pode ser gerado como background-image, como mask-image (para colorir o ícone com CSS) ou como variável CSS reutilizável. Minificar o SVG antes reduz ainda mais o tamanho.
Exemplos
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">…</svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'…%3C/svg%3E");A codificação URL mantém o SVG quase legível e costuma ser mais curta que Base64.-webkit-mask-image: url("data:image/svg+xml,…");
mask-image: url("data:image/svg+xml,…");Como mask-image, a cor do ícone é controlada com a propriedade background-color do elemento.Casos de uso
- Incorporar ícones SVG como background-image sem adicionar requisições HTTP à página.
- Usar um SVG como máscara (mask-image) para recolori-lo a partir do CSS conforme o tema ou o estado.
- Guardar um ícone em uma variável CSS e reutilizá-lo em vários seletores.
- Reduzir o peso de ícones inline minificando o SVG antes de incorporá-lo.
Perguntas frequentes
É melhor URL-encoded ou Base64?
Para SVG, URL-encoded costuma ser a melhor opção: gera um Data URI mais curto e legível porque o SVG é texto. Base64 traz compatibilidade máxima, mas adiciona cerca de 33% de tamanho.
Por que usar mask-image em vez de background-image?
Com background-image o ícone conserva suas cores originais. Com mask-image o SVG define apenas a forma e a cor é dada pelo CSS, ideal para ícones monocromáticos que mudam com o tema.
O que faz a opção de minificar?
Remove comentários e colapsa os espaços em branco do SVG antes de codificá-lo, de modo que o Data URI final fica menor sem mudar o desenho.
Meu SVG é enviado a um servidor?
Não. A conversão ocorre inteiramente no seu navegador; o SVG não sai do seu computador.