Converter SVG em fundo CSS
Cole um SVG e obtenha direto uma regra CSS background-image pronta para colar na sua folha de estilo, sem precisar hospedar um arquivo de imagem separado.
Por que usar um SVG como fundo CSS em vez de um arquivo de imagem?
Codificar um SVG diretamente na folha de estilo como data URI evita uma requisição HTTP adicional para carregar um arquivo de imagem separado, o que pode acelerar levemente a exibição de ícones pequenos. Também é prático para componentes autônomos (um único arquivo CSS já contém o seu ícone).
Por que o SVG é codificado em URL em vez de base64?
A codificação em URL (com alguns caracteres escapados, como #, < e >) geralmente produz um data URI mais curto e mais legível do que o base64 para texto como o SVG, o que reduz levemente o tamanho final do CSS.
Posso mudar a cor do ícone depois de integrá-lo como fundo CSS?
Não, depois de codificada em background-image, a cor do SVG fica fixa no data URI: para mudar a cor, altere a cor no SVG de origem antes de gerar o CSS novamente (por exemplo, com nossa ferramenta de substituição de cor em SVG).
Processamento 100% local: a codificação é feita inteiramente no seu navegador, e seu SVG nunca é enviado a um servidor.