./prontouso.com

UTILITÁRIOS DE DESIGN

Conversor SVG para Data URI

Cole um SVG para criar uma URI data:image/svg+xml compacta para CSS ou HTML, ou decodifique uma data URI SVG de volta para markup.

Status da ferramentaRoda no seu navegador
Prévia

Converta SVG em data URI segura para CSS/HTML e faça o caminho inverso.

Como funciona

  1. Informe os dados

    Preencha os valores, cole o texto ou envie o arquivo que esta ferramenta usa.

  2. Veja o resultado na hora

    A maioria das ferramentas atualiza enquanto você digita; algumas usam um único botão. De qualquer forma, o resultado aparece aqui mesmo.

  3. Use o resultado

    Copie, baixe ou compartilhe o que a ferramenta gerar — o controle é sempre seu.

Privacidade e processamento — Roda localmente no seu navegador. Esta ferramenta não faz upload da sua entrada.

O que é Conversor SVG para Data URI?

O Conversor SVG para Data URI é uma ferramenta para codificar markup SVG em uma URL de dados e decodificar Data URIs SVG de volta para texto editável.

ENTENDA A FERRAMENTA

Como converter SVG para Data URI

Use este guia para decidir quando embutir SVG como Data URI e quando manter o arquivo separado para manutenção.

Para que serve

Data URIs de SVG são úteis para pequenos ícones inline, backgrounds CSS e protótipos compactos.

Conversão nos dois sentidos

  • Cole markup SVG para codificar.
  • Cole uma Data URI SVG para decodificar.
  • Copie o resultado para CSS ou HTML.

Mantenha pequeno

Data URIs funcionam melhor com SVGs pequenos. Ilustrações grandes geralmente são mais fáceis de manter como arquivos separados.

Exemplo de Data URI

Inserir um SVG pequeno inline

Um SVG válido começa com o elemento svg, comentários são removidos e o restante do markup é codificado depois do prefixo data:image/svg+xml.

<svg viewBox="0 0 10 10"> -> data:image/svg+xml,%3Csvg...

Notas de Data URI

Data URIs são convenientes para SVGs pequenos. Quando a string codificada fica longa, um arquivo .svg separado costuma ser mais fácil de cachear, ler e manter.

Perguntas frequentes

Posso usar o resultado em CSS?

Sim. A saída codificada fica pronta para CSS url(...) e também pode ser usada em atributos HTML, como src, quando o contexto aceita Data URI.

A ferramenta sanitiza SVG?

Não. Ela só codifica ou decodifica texto SVG. Remova scripts, handlers e conteúdo não confiável antes de embutir o resultado em uma página.

Ela decodifica qualquer Data URI?

Não. O foco é Data URI de SVG. Data URIs de PNG, fontes ou outros arquivos não são interpretadas como conteúdo editável por esta ferramenta.

Ele minifica o SVG?

Apenas comentários e espaços externos são removidos. Espaçamento interno de texto é preservado para não mudar o visual do SVG.

Ferramentas relacionadas