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.
Ferramentas relacionadas
Codificador/Decodificador Base64
Codifique texto para Base64 ou decodifique Base64 para texto instantaneamente. Suporta Unicode completo incluindo emoji. Todo o processamento ocorre localmente no seu navegador.
Gerador de Gradientes CSS
Crie belos gradientes CSS visualmente. Escolha o tipo linear, radial ou cônico, adicione paradas de cor, ajuste o ângulo e obtenha uma pré-visualização ao vivo. Copie o CSS pronto com um clique.
Gerador de QR Code
Gere QR codes para URLs, senhas WiFi, endereços de email, contatos vCard ou texto. Escolha o tamanho e o nível de correção de erros, depois baixe em PNG. Grátis, instantâneo, sem cadastro.