SVG para Base64

Como converter SVG para Base64

1. Arraste um arquivo .svg para a caixa ou escolha-o no seletor de arquivos.
2. Saída como começa em CSS background-image. Mude para Data URI, HTML <img>, Markdown ou Base64 puro se precisar de outra forma.
3. Clique em Copiar saída e cole a regra na sua folha de estilo.

O SVG é codificado exatamente como foi salvo. Não há opções de redimensionamento nem de qualidade aqui, já que um vetor não precisa delas. Passe o arquivo por um otimizador de SVG antes se quiser uma string mais curta; remover os metadados do editor costuma economizar mais do que qualquer escolha de codificação.

Base64 ou SVG codificado para URL

SVG é texto, então nem precisa ser Base64. Um data URI pode levar o código diretamente se alguns caracteres passarem por percent-encoding. Aqui está o mesmo ícone de triângulo de 104 bytes das duas formas:

/* Base64: 140 characters of data */
.a { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDIgMiAyMmgyMHoiIGZpbGw9IiNmOTAiLz48L3N2Zz4="); }

/* URL-encoded: 118 characters of data */
.b { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 2 22h20z' fill='%23f90'/%3E%3C/svg%3E"); }

A versão codificada para URL é mais curta, e a diferença aumenta depois do gzip: as duas regras acima comprimem para 200 e 162 bytes. Com 20 ícones pequenos em uma folha de estilo, a versão em Base64 ficou com 4.421 bytes (801 com gzip) e a codificada para URL com 3.720 bytes (615 com gzip). Código repetido comprime bem, e o Base64 embaralha essa repetição.

O Base64 não precisa de regras de escape, sobrevive a qualquer contexto que aceite uma URL e é o que muitas APIs e ferramentas de build esperam. A forma codificada para URL quebra se você esquecer de escapar o # (ele inicia um fragmento de URL) ou misturar estilos de aspas com o url("...") ao redor. SVG para data URI gera as duas versões e mostra os tamanhos.

Requisitos de um data URI de SVG

• Tipo MIME image/svg+xml. Os navegadores detectam dados PNG e JPEG mesmo com o tipo errado, mas não SVG. Com qualquer outro tipo, a imagem não aparece.
• O atributo xmlns. Um <svg> inline no HTML funciona sem ele, mas como imagem o elemento raiz precisa declarar xmlns="http://www.w3.org/2000/svg". Muitos ícones escritos à mão não têm o atributo e falham sem aviso.
• XML bem formado. Uma tag não fechada ou um & sem escape faz a imagem inteira falhar, sem renderização parcial.

O Base64 de um SVG costuma começar com PHN2Zy (<svg) ou PD94bWwg (<?xml ). Qualquer outra coisa no início, como um comentário ou um byte-order mark, funciona nos navegadores, mas dificulta reconhecer o formato pelo prefixo.

Estilos e cores

Um SVG usado como background-image ou em <img> é um documento separado. O CSS da sua página não alcança o interior dele, então cores de hover e currentColor não funcionam. Duas soluções comuns:

• Use o data URI como máscara e pinte-o com background-color:

.icon {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  mask: url("data:image/svg+xml;base64,PHN2Zy...") center / contain no-repeat;
}

• Coloque o código <svg> inline no HTML quando o ícone precisar mudar conforme o estado ou o tema.

Decodificar e corrigir

Base64 para SVG transforma uma string Base64 de volta em código que você pode ler e editar. Se um SVG aparece em um editor, mas não como data URI, decodifique-o lá e confira primeiro se o elemento raiz tem xmlns.

Perguntas frequentes