Codificador SVG Data URI
Cole markup SVG e transforme instantaneamente em uma Data URI para usar em CSS ou HTML. Veja a prévia e copie o resultado com um clique.
Como usar o codificador SVG
- Cole seu markup SVG bruto na área de entrada.
- Confira a prévia para garantir que o gráfico continua renderizando bem.
- Copie a Data URI ou o trecho CSS pronto.
Por que codificar SVG como Data URI
Uma Data URI permite embutir SVG diretamente em CSS ou HTML sem depender de um arquivo separado.
A codificação é importante porque SVG contém caracteres que podem quebrar URLs ou atributos HTML se não forem escapados.
A ferramenta faz tudo localmente no navegador e entrega a URI e um exemplo CSS pronto para copiar.
Perguntas frequentes
O que é uma Data URI? ▼
É uma forma de embutir o conteúdo de um arquivo diretamente em uma string, sem usar um caminho externo.
Por que não colar SVG bruto direto no CSS? ▼
Porque o SVG costuma ter caracteres que precisam ser codificados para a URL funcionar corretamente.
Posso usar o resultado em uma tag img? ▼
Sim. A Data URI gerada funciona tanto em img src quanto em background-image.
Isso reduz o tamanho do arquivo? ▼
Às vezes, mas o principal benefício é a conveniência de embutir o recurso.
É privado? ▼
Sim. Toda a conversão acontece no navegador.