Codificador SVG para Base64
Codifique qualquer SVG como Base64 e um data URI para incorporá-lo inline em CSS, HTML ou React. Obtenha cinco variantes prontas para copiar, incluindo uma versão menor codificada por URL. Grátis, privado e instantâneo.
Solte seu SVG aqui ou clique para enviar
Aceita arquivos .svg ou cole o código SVG abaixo
Por Que Incorporar SVG como Base64
Cinco Formatos Prontos
Obtenha o base64 puro, um data URI, uma regra CSS background-image, uma tag HTML img e uma variante codificada por URL, cada uma com seu próprio botão de cópia.
Variante Codificada por URL Menor
A versão UTF-8 codificada por URL costuma ser menor que o base64 para SVG, então seu CSS e HTML ficam enxutos sem abrir mão do inline.
Seguro para UTF-8
A codificação trata emojis, acentos e caracteres não-latinos corretamente, então seu SVG nunca quebra em caracteres especiais.
Elimine uma Requisição HTTP
Incorporar um SVG pequeno como data URI remove uma requisição de rede separada, o que pode acelerar o primeiro carregamento para ícones e logos.
100% Privado
A codificação roda inteiramente no seu navegador. Seu SVG nunca é enviado, tornando esta ferramenta segura para ativos de marca privados.
Grátis e Ilimitado
Sem cadastro, sem créditos, sem limites. Codifique quantos SVGs quiser e copie qualquer variante com um clique.
Como Codificar SVG para Base64
Adicione seu SVG
Arraste e solte um arquivo .svg, clique para procurar, ou cole seu código SVG na caixa.
Obtenha as variantes
O codificador gera instantaneamente o base64 puro, um data URI completo, uma regra CSS background, uma tag img e uma versão codificada por URL.
Escolha a variante certa
Use o data URI em src ou href, a variante CSS em background-image, ou a variante codificada por URL quando quiser a string mais compacta.
Copie e cole
Clique no botão de copiar ao lado de qualquer variante e cole diretamente na sua folha de estilos, HTML ou componente.
Escolha a ferramenta certa
Por que esta página existe
Use the SVG to Base64 encoder to embed a vector inline as a data URI for CSS, HTML, or JSON, removing a network request. Copy the raw base64, the data URI, a CSS background, an img tag, or a smaller URL-encoded variant.
Melhor para
- Inlining icons in CSS background-image rules
- Embedding small SVGs directly in HTML or React without a separate file
- Cutting an extra HTTP request for tiny vector assets
Ferramentas relacionadas que geralmente são necessárias em seguida
Perguntas Frequentes sobre SVG para Base64
Um data URI permite incorporar uma imagem diretamente em CSS ou HTML em vez de apontar para um arquivo separado. Para SVG ele fica assim: data:image/svg+xml;base64,PHN2Zy... e o navegador decodifica e renderiza inline, sem nenhuma requisição de rede adicional.
Para SVG, a variante UTF-8 codificada por URL (data:image/svg+xml,...) costuma ser menor que o base64 porque SVG é texto. Use a versão codificada por URL quando quiser o CSS ou HTML mais enxuto. Use base64 quando uma ferramenta ou plataforma exigir especificamente entrada em base64.
Copie a variante CSS background-image e cole em uma regra, por exemplo background-image: url("data:image/svg+xml;base64,..."). O ícone então renderiza como fundo sem nenhum arquivo de imagem separado para carregar.
Sim. O codificador é seguro para UTF-8, então acentos, scripts não-latinos e emojis dentro do seu SVG são codificados corretamente e renderizarão sem quebrar.
Incorporar como data URI funciona melhor para SVGs pequenos como ícones e logos, onde eliminar uma requisição HTTP acelera o carregamento. Para SVGs grandes ou muito reutilizados, um arquivo separado em cache costuma ser melhor porque o data URI adiciona peso a cada página que o inclui.
Não. A codificação acontece inteiramente no seu navegador, então o SVG nunca sai do seu dispositivo. Isso torna a ferramenta segura para ativos confidenciais ou ainda não lançados.
Codificador SVG para Base64
Codifique qualquer SVG como Base64 e um data URI para incorporá-lo inline em CSS, HTML ou React. Obtenha cinco variantes prontas para copiar, incluindo uma versão menor codificada por URL. Grátis, privado e instantâneo.