SVG para Data URI

Converta código SVG em uma data URI pronta para usar direto no src de uma img, em um atributo HTML, em uma string JavaScript ou na barra de endereços do navegador. Escolha URL-encoded ou Base64, copie a data URI pronta ou uma tag img completa e veja uma prévia ao vivo, tudo no seu navegador.

Codificação:

SVG para Data URI é uma ferramenta gratuita que transforma código SVG em uma data URI pronta para usar em qualquer lugar onde caiba uma URL: o src de uma img, um atributo HTML, uma string JavaScript ou até a barra de endereços do navegador. Escolha URL-encoding para o resultado menor e mais legível ou Base64 se preferir, depois copie a data URI pura ou uma tag img completa e veja uma prévia ao vivo do que ela renderiza. Tudo roda no seu navegador, então o seu gráfico nunca é enviado.

O que é uma data URI de SVG?

Uma data URI é uma forma de embutir um arquivo diretamente dentro de uma URL em vez de apontar para um arquivo separado em um servidor. Para SVG ela fica como data:image/svg+xml,... seguido do código codificado. Como a imagem viaja dentro da própria URL, você pode colá-la direto no src de uma img, em um atributo HTML inline, em uma variável JavaScript ou na barra de endereços para ver o gráfico. Não há requisição de rede extra nem um arquivo .svg separado para hospedar, o que torna as data URIs práticas para ícones pequenos e gráficos inline.

Como converter SVG em data URI

Transformar o seu SVG em uma data URI leva apenas alguns passos:

  1. Cole o seu código SVG na caixa de entrada.
  2. Escolha URL-encoded para o menor resultado, ou Base64 se precisar.
  3. Clique em Converter em data URI.
  4. Copie a data URI pura para um src de img ou para JavaScript, ou copie a tag img HTML pronta.
  5. Confira a prévia ao vivo para confirmar que ela renderiza como você espera.

URL-encoded ou Base64: qual usar?

Ambos produzem uma data URI de SVG válida, mas codificam o código de formas diferentes. O URL-encoding só escapa os caracteres inseguros em uma URL, então o resultado fica em boa parte legível e costuma ser menor que o Base64 para SVG, por isso é o padrão recomendado. O Base64 reescreve o arquivo inteiro em um alfabeto compacto de letras e dígitos; ele fica um pouco maior para SVG, mas é a opção mais segura quando alguma ferramenta ou fluxo lida mal com sinais de maior/menor e aspas. Para a maioria dos ícones e gráficos inline, o URL-encoding dá o resultado menor e mais limpo.

Onde posso usar uma data URI de SVG?

Em qualquer lugar que aceite uma URL. Os lugares mais comuns são o src de uma img e o href de um link ou object, mas você também pode passar uma data URI para o construtor Image do JavaScript, guardá-la em uma variável, usá-la como favicon ou colá-la na barra de endereços para visualizar a arte. Se você quer especificamente um trecho de CSS background-image: url(...), a nossa ferramenta SVG para CSS embrulha a mesma data URI em uma declaração CSS para você.

Por que usar este conversor de SVG para data URI?

  • 100% grátis, sem anúncios, cadastro ou limites.
  • Gera uma data URI pura pronta para um src de img, atributo HTML, JavaScript ou a barra de endereços.
  • Escolha URL-encoded para o menor resultado ou Base64 quando precisar.
  • Copia uma tag img HTML completa com um clique.
  • Mostra uma prévia ao vivo e o tamanho em bytes da data URI.
  • Roda inteiramente no seu navegador, então o seu SVG nunca sai do seu dispositivo.

Perguntas frequentes

O conversor de SVG para data URI é gratuito?

Sim. Todas as ferramentas do ToolsSoup são totalmente gratuitas, sem conta, cadastro ou limites ocultos.

Devo escolher URL-encoded ou Base64?

O URL-encoded é recomendado para SVG porque costuma ser menor e fica em boa parte legível. Escolha Base64 só se alguma ferramenta no seu fluxo lidar mal com os sinais de maior/menor e aspas que o URL-encoding deixa no lugar.

Posso usar a data URI em CSS?

Pode, mas se você quer um trecho background-image: url(...) especificamente, a ferramenta SVG para CSS embrulha a mesma data URI em uma declaração CSS pronta para colar. Esta ferramenta foca na data URI pura e em uma tag img HTML para uso em markup, JavaScript ou na barra de endereços.

Meu SVG é enviado para algum lugar?

Não. A conversão e a prévia rodam inteiramente no seu navegador, então o código que você cola nunca é enviado nem armazenado em servidores.