Base64 para SVG

Como decodificar Base64 para SVG

1. Cole o Base64, um URI data:image/svg+xml;base64,... ou o CSS ou HTML que o contém. Data URIs SVG com codificação de URL (data:image/svg+xml,%3Csvg...) também funcionam.
2. A prévia desenha o gráfico e mostra as dimensões, ou “escalável” quando o navegador não informa um tamanho fixo. Abaixo dela fica o código XML completo.
3. Clique em Baixar arquivo para salvar um .svg, ou selecione o markup no painel de código-fonte para copiar.

SVG é texto puro, então a decodificação entrega um markup legível. Além de salvar o arquivo, dá para descobrir o que um ícone numa folha de estilo desenha de fato, quais cores usa ou por que não é renderizado.

Segurança do SVG: prévia como imagem vs markup inline

Um arquivo SVG é um documento. Ele pode conter elementos <script>, atributos de evento como onload, links, HTML embutido via <foreignObject> e referências a imagens e fontes externas. O que o navegador faz com tudo isso depende de como o SVG é carregado:

Esta página decodifica os bytes e os entrega a um <img> como data:image/svg+xml;base64,..., então, seja qual for o conteúdo do arquivo, ele só é desenhado. O painel de código-fonte mostra o texto sem interpretá-lo.

Se você pretende colocar o SVG inline em uma página, leia o código antes e procure:

• elementos <script> e atributos que começam com on, como onload ou onclick
• javascript: em href ou xlink:href
• <foreignObject>, que pode carregar HTML arbitrário
• valores de href que apontam para endereços http:// ou https://, que podem servir para rastreamento
• declarações <!ENTITY, que alguns parsers XML do lado do servidor expandem de forma perigosa

O Base64 esconde tudo isso de uma olhada rápida, e é por isso que um SVG malicioso muitas vezes chega codificado. O Base64 em si não protege nada; veja codificação vs criptografia.

Como o SVG é reconhecido

A maioria dos arquivos SVG começa com <svg ou com uma declaração XML, então o Base64 deles começa com PHN2Zy ou PD94bWwg. Um byte order mark UTF-8 na frente acrescenta 77u/, como em 77u/PHN2Zy....

A ferramenta trata os dados como SVG quando a tag <svg é o primeiro elemento, depois de pular a declaração XML, os comentários e uma linha <!DOCTYPE svg ...>, tudo dentro dos primeiros 2 KB. Em um data URI que declara image/svg+xml, o tipo declarado é usado de qualquer forma. Se o SVG estiver embutido em outra coisa, como uma página HTML, ou se um comentário muito longo empurrar a tag para além de 2 KB, aparece um aviso de que “não parece ser SVG”; digite image/svg+xml em Tipo MIME para renderizar.

Quando o SVG não é renderizado

• “Não foi possível renderizar este SVG”. O XML está malformado: uma tag não fechada, um & sem escape ou uma string truncada sem o </svg> de fechamento. Olhe primeiro o final do código.
• Renderiza aqui, mas não no seu site. Confira como o site serve o arquivo. Com um data URI, o tipo precisa ser image/svg+xml; um arquivo servido como text/plain ou application/octet-stream também não é renderizado como imagem.
• Renderiza inline, mas não como data URI. Falta xmlns="http://www.w3.org/2000/svg" no elemento raiz. SVG inline no HTML não precisa disso; imagens precisam.
• As cores estão erradas. Um SVG usado como imagem não herda currentColor nem CSS da página. Ele é desenhado com as cores que o próprio arquivo define, preto por padrão.

Usar o SVG decodificado no código

No navegador, o jeito seguro de exibir um SVG em Base64 é mantê-lo como imagem:

const img = new Image();
img.src = "data:image/svg+xml;base64," + b64;
document.body.append(img);

Escrever element.innerHTML = atob(b64) coloca o markup dentro da sua página, onde os scripts e handlers de evento dele rodam com os privilégios da sua página. Repare também que atob() devolve os bytes como caracteres Latin-1, o que quebra texto fora do ASCII no SVG; Base64 em JavaScript mostra como decodificar UTF-8 corretamente. Para codificar um SVG, use SVG para Base64.

Perguntas frequentes