EnglishSVG para data URI (CSS e HTML)
Converta código SVG em data URI otimizado para usar em CSS (background-image, mask) e HTML, com codificação URL mais curta que Base64 e prévia da imagem.
Como usarCole o código SVG.
Disponível em: 
SVG para data URI (CSS e HTML): para que serve
Cole o código SVG e escolha o formato de saída. A ferramenta remove espaços extras, troca aspas e codifica só os caracteres necessários, gerando um data URI menor que Base64, mostra a prévia da imagem e o tamanho final.
O código não é enviado para nenhum servidor: a conversão acontece no seu navegador.
Como usar
- Cole o código SVG.
- Escolha CSS, data URI, img ou Base64.
- Copie o resultado.
Quando usar
- Embutir ícones no CSS sem arquivos extras.
- Usar SVG em mask-image.
- Reduzir requisições da página.
Perguntas frequentes
Por que não usar Base64?
Para SVG, a codificação URL costuma gerar um resultado menor que Base64, porque o SVG já é texto. Só os caracteres especiais, como <, >, # e aspas, precisam ser codificados.
Como usar no CSS?
Copie o resultado no formato background-image: url("data:image/svg+xml,..."). Também funciona em mask-image, list-style-image e no atributo src de uma tag img.
É grátis mesmo?
Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.