Como usar: SVG para CSS
- Cole o código do seu SVG, abra um arquivo
.svgou carregue o exemplo. - Deixe Limpar SVG ativado para remover comentários, metadados e atributos do editor, e escolha URL-encoded ou Base64.
- Confira as duas prévias: a imagem de fundo normal e a versão em máscara de cor única.
- Copie a data URI ou a regra CSS completa e cole na sua folha de estilos.
O que é uma data URI de SVG?
Uma data URI incorpora o arquivo diretamente no seu CSS, em vez de apontar para ele: background-image: url("data:image/svg+xml,…"). Para ícones pequenos, divisores, padrões e checkboxes personalizados, isso economiza uma requisição HTTP, evita o piscar de imagens ausentes e mantém o recurso junto dos estilos que o usam.
Codificação em URL vs Base64
SVG é texto, então não precisa de Base64. O Base64 aumenta qualquer arquivo em cerca de 33% e o transforma em um bloco ilegível que comprime mal com gzip ou Brotli. Um SVG codificado em URL fica próximo do tamanho original e continua legível. Apenas alguns caracteres precisam ser escapados:
| Caractere | Codificado | Motivo |
|---|---|---|
# | %23 | Senão inicia um fragmento de URL. Cores como #fff quebram a imagem. |
% | %25 | O próprio caractere de escape. |
< > | %3C %3E | Recomendado para compatibilidade com parsers rigorosos. |
" | ' ou %22 | As aspas dos atributos viram aspas simples, para que o CSS possa envolver a URI em aspas duplas. |
Use Base64 apenas quando alguma ferramenta ou framework rejeitar outro formato. Os cards de tamanho abaixo da prévia mostram os dois resultados para você comparar.
Ícones recoloríveis com mask-image
Um SVG usado como imagem de fundo é renderizado isoladamente: o CSS da página não consegue alterar seus preenchimentos, e currentColor dentro dele não acompanha a cor do texto. O trecho com mask-image resolve isso usando o SVG apenas como estêncil e pintando-o com background-color: currentColor. Assim, um único ícone funciona em qualquer cor, estado de hover ou modo escuro. A linha -webkit-mask ainda é necessária em alguns navegadores.
Limpeza e limites
A limpeza remove a declaração XML, comentários, <metadata>, <title> (sem sentido em um fundo), atributos do Inkscape, Sodipodi e Sketch, além de espaços extras. Também adiciona o xmlns obrigatório, se estiver faltando. Sem ele, o navegador não renderiza a imagem. Incorpore apenas SVGs pequenos (alguns KB): data URIs grandes incham cada download de CSS e não podem ser armazenadas em cache separadamente. Para gráficos complexos, prefira linkar o arquivo. Precisa de um componente React em vez de CSS? Use o SVG para JSX. Para imagens raster, veja o Imagem para Base64.
Usando no Webflow
O painel Backgrounds do Webflow espera uma imagem enviada. Por isso, cole a regra gerada em uma tag <style> dentro de um elemento Embed ou no código personalizado da página/site, e dê ao seu elemento a classe correspondente (por exemplo, icon).
Também pesquisado como: svg data uri, svg para data url, url encode svg, svg background image, svg para base64, mask-image css, svg inline css, ícone css.
Ferramentas que combinam com: SVG para CSS
- Codificar / Decodificar URL — Codifique textos com percent-encoding para usar com segurança em URLs, decodifique strings codificadas de volta para texto legível e separe qualquer URL em suas partes e parâmetros de query.
- Codificação/Decodificação Base64 — Converte texto para Base64 e vice-versa, com suporte total a UTF-8 (acentos, emojis); alterna para Base64 seguro para URLs; ou arrasta um arquivo para obter sua string Base64 ou URI de dados.
- Minificador CSS — Cole uma folha de estilos para reduzi-la na hora.
- Gerador de Animação CSS — Crie animações CSS em uma linha do tempo de keyframes real.
Perguntas frequentes
Por que minha data URI de SVG não aparece?
# não escapado (em cores como #fff), o atributo xmlns="http://www.w3.org/2000/svg" ausente ou aspas desbalanceadas entre o url("…") do CSS e os atributos do SVG. Esta ferramenta corrige os três casos.Para SVG no CSS, é melhor codificação em URL ou Base64?
Dá para mudar a cor de uma imagem de fundo SVG com CSS?
mask-image e definir o background-color, que pode ser alterado no hover ou no modo escuro.Preciso incluir charset=utf-8 na data URI?
data:image/svg+xml, é suficiente.