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 codificada por URL que mantém a marcação legível na sua folha de estilos. 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 legível
A variante UTF-8 codificada por URL mantém a marcação do SVG legível dentro do data URI, então você pode mudar uma cor de preenchimento direto no seu CSS. Como todo caractere reservado é escapado, ela fica um pouco mais longa que a string base64, não mais curta.
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 que o SVG continue legível e editável inline.
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 URL-encoded variant that keeps the markup readable in your stylesheet.
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.
Use base64 quando uma ferramenta ou plataforma exigir especificamente entrada em base64. Use a variante UTF-8 codificada por URL (data:image/svg+xml,...) quando quiser que o SVG continue legível e editável dentro do seu CSS. Observe que nosso codificador escapa todos os caracteres reservados, então a string codificada por URL fica um pouco mais longa que a de base64, não mais curta.
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 codificada por URL que mantém a marcação legível na sua folha de estilos. Grátis, privado e instantâneo.