Conversor de SVG para Base64

Converter SVG para Base64

SVG (Scalable Vector Graphics) é o único formato de imagem web que permanece perfeitamente nítido em qualquer nível de zoom. Esta ferramenta codifica arquivos SVG para Base64 para incorporação como data URIs em CSS, HTML ou JavaScript.

Como Usar

1. Solte um arquivo SVG na área de upload ou clique para navegar
2. A ferramenta lê o arquivo e codifica para Base64
3. Escolha seu formato de saída: Base64 puro, data URI ou CSS background
4. Copie o resultado

SVG e Base64: Quando Faz Sentido

SVG é único entre os formatos de imagem porque já é texto (XML). Isso cria uma escolha que não existe com formatos binários como PNG ou JPEG: você pode incorporar SVG como Base64, texto codificado em URL ou markup inline.

Data URI Base64

background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0...);

Data URI codificado em URL (geralmente melhor)

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' ...");

SVG inline

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2L2 22h20L12 2z"/>
</svg>

Quando Usar Base64 para SVG

Embora URL encoding seja geralmente menor, data URIs Base64 para SVG são a escolha certa quando:

• O SVG vai para um contexto que não suporta URL encoding (alguns clientes de e-mail, certos motores de template)
• Você precisa armazenar o SVG em um payload JSON onde caracteres codificados em URL exigiriam escape adicional
• O SVG contém caracteres problemáticos para URL encoding (aspas, sinais de maior/menor em valores de atributos)
• Você está gerando CSS programaticamente e quer uma abordagem de codificação consistente para todos os tipos de imagem

Otimizando SVGs Antes de Codificar

SVGO

npx svgo input.svg -o optimized.svg

Checklist de otimização manual

• Remova declaração XML (<?xml ...?>)
• Remova <title>, <desc>, <metadata> se não forem necessários
• Use viewBox em vez de width/height para escalabilidade
• Simplifique dados de path reduzindo precisão decimal
• Remova <defs> e gradientes não utilizados

SVG Base64 em Sistemas de Ícones

.alert::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url(data:image/svg+xml;base64,PHN2Zy...);
  background-size: contain;
}

Comparação de Tamanho

Para codificação de imagem rasterizada, veja PNG para Base64, JPG para Base64 ou o conversor geral Imagem para Base64.