Conversor de SVG para Data URI — SVG Inline como Plano de Fundo CSS
Converta código SVG em data URIs para uso em background-image do CSS, tags img HTML ou incorporação inline. Escolha entre o formato codificado em URL (menor) ou Base64. Visualize seu SVG e copie snippets de código prontos para uso.
Por que converter SVG em data URI?
Os data URIs de SVG permitem incorporar gráficos vetoriais diretamente em CSS ou HTML sem requisições HTTP separadas. Isso é especialmente útil para ícones, logotipos e elementos de interface pequenos, em que a sobrecarga de uma requisição HTTP excede o tempo de transferência do arquivo.
Existem dois métodos de codificação: a codificação em URL (recomendada para SVG) preserva a legibilidade e costuma ser menor, enquanto a codificação Base64 produz uma string mais longa, mas evita possíveis problemas de análise com caracteres especiais em alguns contextos.
Vantagens da codificação em URL
- Normalmente 20-30% menor que o Base64 para arquivos SVG
- Parcialmente legível — você ainda consegue ver a estrutura do SVG
- Recomendada pela maioria dos guias de otimização de desempenho
Boas práticas
- Minifique seu SVG antes de converter (remova comentários, espaços em branco e metadados do editor)
- Use data URIs para SVGs pequenos abaixo de 10KB — arquivos maiores devem ser externos
- Sempre defina xmlns='http://www.w3.org/2000/svg' no seu SVG para compatibilidade com data URI
Perguntas frequentes
Devo usar codificação em URL ou Base64 para data URIs de SVG?
A codificação em URL é recomendada para SVG. Ela produz uma saída menor (normalmente 20-30% menor que o Base64) e mantém o SVG parcialmente legível. Use Base64 apenas se você encontrar problemas de análise com caracteres especiais no seu contexto específico.
Por que meu SVG não está sendo renderizado no data URI?
Certifique-se de que seu SVG inclui o atributo xmlns (xmlns='http://www.w3.org/2000/svg'). Verifique também se não há caracteres especiais sem escape, como # em valores de cor, e se o SVG é um XML bem formado.
Qual é o tamanho máximo para data URIs de SVG?
Não há limite rígido nos navegadores modernos, mas o desempenho piora com data URIs grandes. Mantenha os data URIs de SVG abaixo de 10KB para obter melhores resultados. Para SVGs maiores, use um arquivo externo servido por uma CDN.
Posso usar data URIs de SVG em propriedades personalizadas do CSS?
Sim. Você pode armazenar um data URI de SVG em uma propriedade personalizada do CSS (variável) e usá-lo com url(). Esse é um ótimo padrão para temas, permitindo trocar ícones alterando o valor de uma única variável.
Ferramentas relacionadas
Codificador e decodificador Base64 online
Codifique ou decodifique strings Base64 diretamente no seu navegador
Codificador e decodificador de texto
Converta texto para Base64 ou decodifique Base64 para texto simples
Imagem para Base64
Converta imagens para strings codificadas em Base64
Base64 para imagem
Decodifique strings Base64 de volta para imagens visíveis
Arquivo para Base64
Codifique qualquer arquivo para uma string Base64
Base64 para Arquivo
Decodifique qualquer string Base64 de volta ao seu arquivo original
Base64 para PDF
Decodifique strings Base64 para documentos PDF
Decodificador JWT
Decodifique e inspecione tokens JWT
Codificador/Decodificador URL
Codifique ou decodifique URLs com codificação percentual
Codificador/Decodificador Entidades HTML
Converta caracteres especiais em entidades HTML
Conversor Hex ↔ Base64
Converta entre formatos hex e Base64
Base64 para Texto
Decodifique strings Base64 em texto simples legível
Validador de Base64
Verifique se uma string é uma codificação Base64 válida
Base64 para JSON
Decodifique Base64 e exiba como JSON formatado
Gerador de Data URI
Gere data URIs em Base64 a partir de texto ou arquivos
Base64 para Hex
Converta strings Base64 para hexadecimal e vice-versa
Codificador e Decodificador UTF-8
Codifique texto em bytes UTF-8 ou decodifique bytes em texto