Como usar
- Solte um arquivo .svg na área de arrastar e soltar, clique para escolher um ou cole uma imagem.
- Deixe Converter para em Manter o original para codificar o próprio código SVG, ou escolha PNG, JPEG ou WebP para transformá-lo em pixels.
- Se rasterizar a imagem, defina uma Largura máxima para controlar o tamanho em pixels.
- Copie a saída com o background-image do CSS para uma folha de estilo, ou a versão em data URI, Base64 puro, tag img ou Markdown.
SVG como data URI
O SVG (Scalable Vector Graphics, tipo MIME image/svg+xml) descreve formas como texto XML, por isso continua nítido em qualquer tamanho. Seu Base64 geralmente começa com PHN2Zy (o <svg codificado) ou com PD94bWw quando o arquivo começa com uma declaração XML.
Quando um SVG é usado como imagem, o elemento raiz precisa ter xmlns="http://www.w3.org/2000/svg". Muitos trechos inline copiados de HTML omitem esse atributo, e então o data URI não mostra nada. Recursos externos também são bloqueados no modo imagem, então web fonts e imagens vinculadas dentro do SVG não carregam; converta o texto em caminhos ou incorpore esses recursos antes.
Base64 ou codificação de URL?
Como o SVG já é texto, um data URI pode carregar o código diretamente, com apenas alguns caracteres em codificação percentual (<, >, #, % e aspas). Para um ícone típico no CSS, isso fica mais curto que o Base64 e comprime melhor com gzip. O Base64 é a opção mais segura quando a string passa por sistemas que corrompem aspas ou caracteres especiais, ou quando uma API espera Base64.
/* Base64 */
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
/* Codificação percentual */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...");Para gerar a forma com codificação percentual, use o Gerador de data URI e escolha Codificação percentual.
Sanitize SVGs de origem não confiável
O SVG pode conter elementos <script>, atributos de manipuladores de eventos como onload e links para outros documentos. Os navegadores não executam scripts em um SVG exibido por meio de <img> ou de um fundo CSS, mas o mesmo arquivo incorporado diretamente no HTML ou aberto sozinho pode executá-los. Se os usuários podem enviar arquivos SVG para a sua aplicação, sanitize-os, por exemplo com o DOMPurify, antes de armazená-los ou incorporá-los. O Base64 só esconde o código de uma olhada rápida; ele não o torna seguro.
Perguntas frequentes
Base64 ou codificação de URL: qual é melhor para SVG?
Para SVG no CSS, a codificação de URL geralmente gera um resultado menor e continua legível. O Base64 é mais robusto quando a string passa por outros sistemas ou quando uma API exige Base64.
Por que meu data URI de SVG não aparece?
xmlns no elemento raiz, um # sem escape em um URI com codificação percentual e fontes ou imagens que o SVG carrega de outros arquivos.Posso converter um SVG em uma string Base64 de PNG?
Sim. Escolha PNG em Converter para. O navegador renderiza o SVG em pixels, e a opção Largura máxima permite deixar o resultado menor.