SVG para Base64
Cole um SVG, um data URI ou a URL de uma imagem, ou solte um arquivo. A ferramenta codifica automaticamente, decodifica data URIs SVG de volta para o código e prepara um resultado pronto para CSS.
Código de entrada
Cole um SVG ou um data URI codificado. Você também pode soltar um arquivo ou buscar uma imagem por URL.
Resultado principal
O resultado codificado vai aparecer aqui automaticamente
Cole algo à esquerda e a transformação começa automaticamente
Como o SVG para Base64 funciona
Codifique arquivos SVG em data URIs Base64 ou decodifique-os de volta para o código. Receba um resultado pronto para CSS, para incorporar inline.
SVG para data URI
Codifique qualquer arquivo ou código SVG em um data URI Base64 pronto para uso inline em CSS, HTML ou JavaScript. Uma requisição HTTP a menos por ícone.
Decodificar de volta para SVG
Cole um data URI codificado em Base64 e a ferramenta extrai na hora o código SVG original. Analise ou edite SVGs incorporados sem ferramentas externas.
Resultado pronto para CSS
Receba um trecho de CSS background-image para colar direto na sua folha de estilos. O resultado vem com URL encoding e otimizado para o menor tamanho.
Várias formas de entrada
Cole o código SVG, solte um arquivo .svg ou informe a URL de um SVG. A ferramenta detecta o tipo de entrada automaticamente e converte na hora.
Perguntas frequentes
Incorporar SVGs como data URIs Base64 elimina uma requisição HTTP, o que pode acelerar o carregamento de ícones pequenos e elementos de interface. É especialmente útil no CSS, onde não dá para colocar o código SVG diretamente.
Sim, o Base64 acrescenta cerca de 33% ao tamanho. Em SVGs bem pequenos (até 1–2 KB), isso costuma compensar pela requisição HTTP economizada. SVGs maiores são mais eficientes como arquivos separados, com cache adequado.
Os dois podem ser usados como data URI. O SVG com URL encoding mantém o código legível e costuma ser menor que o Base64. O Base64 tem suporte mais amplo em clientes de e-mail antigos e em alguns casos específicos. Esta ferramenta oferece as duas opções.
Sim. Ícones simples, ilustrações complexas, SVGs animados — qualquer código SVG válido pode ser codificado. Mas SVGs com referências externas (imagens ou fontes vinculadas) podem não ser exibidos corretamente quando incorporados como data URI.