SVG para data URI

Como transformar SVG em data URI

1. Cole o código SVG na caixa Texto. Abra um arquivo .svg em qualquer editor de texto para copiá-lo. A caixa começa com um ícone de exemplo.
2. O Tipo MIME já é image/svg+xml, e a Codificação está em SVG otimizado.
3. Veja a tabela abaixo das opções. Ela lista o comprimento do URI e o tamanho com gzip para Base64, Codificado para URL e SVG otimizado, marca o menor e tem um botão Usar para cada um.
4. Escolha um Formato de saída: Data URI puro, CSS url(), HTML <img>, HTML <a> ou Markdown. Depois clique em Copiar saída.

Você também pode arrastar um .svg no modo De arquivo, que oferece Base64 e codificação de URL do arquivo como ele está. A variante otimizada e a tabela comparativa precisam do código na caixa de texto.

Tamanho do SVG em Base64 vs codificado para URL

Para o exemplo embutido, um ícone de 309 bytes com um quadrado arredondado, um círculo e uma linha, a tabela mostra:

A codificação de URL simples é a mais longa sem compressão, porque cada espaço, aspa, <, > e quebra de linha vira três caracteres. Depois do gzip, porém, ela ganha do Base64 com folga, já que o código mantém sua estrutura repetitiva e o Base64 a embaralha. Folhas de estilo quase sempre são servidas comprimidas, então a coluna com gzip é a que chega aos usuários.

O SVG otimizado vence nas duas colunas. Para um pequeno ícone de triângulo de 103 bytes, a diferença é a mesma: Base64 com 166 caracteres, codificado para URL com 172, otimizado com 136. SVG para Base64 traz uma comparação com um conjunto inteiro de ícones.

O que o “SVG otimizado” faz

O otimizador faz quatro mudanças no código:

1. Colapsa cada sequência de espaços em branco, quebras de linha incluídas, em um único espaço e apara as pontas.
2. Troca " por ', mas só se o SVG ainda não tiver nenhum '.
3. Aplica percent-encoding com encodeURIComponent e depois devolve os caracteres que são seguros em um URI: espaço, =, :, /, , e ;.
4. Escreve os escapes restantes em minúsculas (%3c em vez de %3C), o que comprime um pouco melhor com gzip: 220 bytes em vez de 222 no exemplo.

O resultado para o ícone de triângulo:

data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M8 1 15 15H1z' fill='%23e33'/%3e%3c/svg%3e

O # da cor virou %23. Esse escape é obrigatório: um # sem escape inicia um fragmento de URL, e tudo o que vem depois dele é descartado sem aviso.

Regras de aspas e de contexto

A saída otimizada contém aspas simples, espaços e parênteses sem escape, o que funciona entre aspas duplas e em nenhum outro lugar:

.icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' ...%3e"); }

<img src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' ...%3e" alt="">

Um url(...) sem aspas quebra nos espaços, e um atributo entre aspas simples termina no primeiro '. Se o URI for montado em JavaScript, inserido por um template engine ou colado em um sistema que reescreve aspas, o Base64 é a escolha mais segura: ele só contém letras, dígitos, +, / e =, então sobrevive a qualquer contexto. Use o botão Usar na tabela para trocar.

As outras limitações são pequenas. O SVG otimizado é sempre UTF-8 e ignora qualquer outro charset que você escolher, com um aviso. Colapsar espaços pode alterar o texto em elementos <text> que preservam espaços. E o SVG continua precisando de xmlns="http://www.w3.org/2000/svg" no elemento raiz, como todo SVG usado como imagem.

O otimizador em JavaScript

A mesma transformação cabe em poucas linhas, para scripts de build ou CSS-in-JS:

function svgToDataUri(svg) {
  let s = svg.trim().replace(/\s+/g, " ");
  if (!s.includes("'")) s = s.replaceAll('"', "'");
  const keep = { "%20": " ", "%3D": "=", "%3A": ":", "%2F": "/", "%2C": ",", "%3B": ";" };
  return "data:image/svg+xml," + encodeURIComponent(s)
    .replace(/%[0-9A-F]{2}/g, m => keep[m] || m.toLowerCase());
}

Ela gera o URI do triângulo mostrado acima. Mais sobre codificação no navegador e no Node em Base64 em JavaScript. Para ler um data URI de SVG existente, cole-o em Base64 para SVG ou no analisador de data URI.

Perguntas frequentes