toolbin_

Converta SVG em uma data URI para CSS e HTML

Converta código SVG em uma data URI otimizada (usável em CSS ou HTML), no seu navegador.

SVG preview

URL-encoded mode yields a shorter data URI than Base64 for SVG.

🔒 100 % no cliente — nenhum dado enviado

Converta seu código SVG em uma data URI otimizada, pronta para incorporar em CSS ou HTML. Você evita uma requisição de rede extra ao inserir a imagem diretamente na sua folha de estilos. A conversão roda 100% no navegador, sem upload de arquivo.

What is it for?

  • Incorporar um ícone SVG como background-image em CSS sem arquivo externo
  • Reduzir o número de requisições HTTP em uma página web
  • Inserir um pequeno logotipo diretamente em um atributo src
  • Otimizar e codificar um SVG para um email ou componente

FAQ

O que é uma data URI para um SVG?

É uma string que codifica a imagem inteira diretamente na URL, no formato data:image/svg+xml. Ela permite exibir o SVG sem um arquivo separado, inserindo-o em CSS ou HTML.

Devo codificar em UTF-8 ou base64?

Para SVGs, a codificação UTF-8 (com caracteres escapados) costuma ser mais leve e mais legível do que base64. A ferramenta produz uma versão otimizada que você pode colar como está no seu CSS.

Meu código SVG é enviado para algum lugar?

Não, a codificação acontece inteiramente no seu navegador. Seu SVG nunca é enviado para nem armazenado em um servidor.