Como usar
- Cole a string Base64 ou o URI data:image/svg+xml;base64.
- Confira a prévia e o formato e as dimensões detectados.
- Mantenha SVG em Baixar como. Para entrada em SVG, o arquivo é salvo como texto SVG.
- Baixe o arquivo .svg e abra-o em um editor se quiser ler ou alterar a marcação.
Como encontrar SVG dentro do Base64
Ao contrário de outros formatos de imagem, o SVG é texto XML puro. Um arquivo que começa com <svg gera um Base64 iniciado por PHN2Zy, e um que começa com uma declaração XML (<?xml) gera um Base64 iniciado por PD94bWwg. SVGs em Base64 são comuns em imagens de fundo no CSS, conjuntos de ícones, exportações de ferramentas de design e modelos de e-mail. O tipo MIME é image/svg+xml.
Muitos data URIs SVG nem são Base64, e sim texto com codificação percentual, como data:image/svg+xml,%3Csvg.... Esta ferramenta espera Base64, então analise esses casos com o gerador de data URI.
Lendo o código SVG
A prévia mostra como o gráfico é renderizado, mas a parte interessante muitas vezes é a marcação: dados de caminhos, cores, um viewBox ou fontes incorporadas. Baixe o arquivo como Original ou SVG e abra-o em qualquer editor de texto, ou cole o mesmo Base64 em Decodificar Base64 para ver o XML como texto na hora.
De raster para SVG é um invólucro, não uma vetorização
Se os dados Base64 forem um PNG, JPEG ou outro bitmap, escolher SVG gera um arquivo SVG que contém os pixels originais em um elemento <image>. Isso é útil quando uma ferramenta só aceita arquivos SVG, mas não converte a imagem em formas: ela continua borrando quando ampliada, e o arquivo fica maior que o bitmap porque os pixels são armazenados como Base64 dentro dele. Para obter caminhos vetoriais de verdade, use um software de vetorização como o Potrace ou o recurso Vetorizar bitmap do Inkscape.
Como lidar com SVG não confiável
O SVG pode conter elementos <script>, atributos de manipuladores de eventos e links para recursos externos. Os navegadores bloqueiam tudo isso quando um SVG é exibido como imagem, por meio de uma tag <img> ou de um fundo CSS. Scripts podem ser executados e recursos externos podem ser carregados quando o arquivo é aberto diretamente em uma aba do navegador ou quando a marcação dele é colada inline em uma página. Revise ou higienize SVGs de origem desconhecida antes de usá-los dessa forma.
Perguntas frequentes
Esta ferramenta transforma um PNG em um SVG vetorial de verdade?
Não. Converter um bitmap em SVG apenas incorpora a imagem dentro de um arquivo SVG. Ao ser ampliado, o resultado se comporta como o bitmap original, e não como um desenho vetorial.
Por que meu data URI SVG não é decodificado?
;base64,. Se não contiver, o SVG está com codificação percentual ou é texto puro, e não Base64. O gerador de data URI consegue analisá-lo.É seguro decodificar um SVG de origem desconhecida?
Decodificá-lo e salvá-lo é inofensivo, porque o resultado é apenas texto. Scripts dentro de um SVG só podem ser executados quando ele é aberto como documento ou inserido inline em uma página web.
Por que fontes ou imagens vinculadas somem ao converter um SVG em PNG?
Para rasterizar um SVG, o navegador o carrega como imagem, e nesse modo um SVG não pode buscar arquivos externos. Fontes web e imagens vinculadas são ignoradas, e fontes padrão são usadas no lugar. Incorpore as fontes e as imagens no SVG para torná-lo autossuficiente.