Converter SVG em URI de dados seguro para CSS
Cole o código SVG e receba um URI de dados que começa com data:image/svg+xml, pronto para um url() do CSS ou para a origem de uma imagem. Uma cor como #0a7 vira %230a7, então nenhum caractere quebra sua folha de estilos. Grátis no seu navegador.
- Grátis
- Funciona no seu navegador
- Sem cadastro
- Seus dados não saem do seu aparelho
Executar grátis
Roda direto no seu navegador. Grátis, sem cadastro — seus dados não são enviados para lugar nenhum.
Transforme marcação SVG bruta em um URI de dados que você pode inserir em um valor CSS url() ou em qualquer local que aceite uma URL de imagem. O conversor primeiro confirma que a entrada é um XML bem-formado; depois codifica o documento em UTF-8 e escapa todo caractere capaz de interferir na interpretação da URL ou do CSS. O resultado começa com o tipo de mídia SVG e não inclui uma camada base64, o que facilita inspecionar, copiar, armazenar em cache e versionar o valor junto aos seus estilos.
Por que URIs de dados SVG exigem escape cuidadoso
Um SVG é texto, mas colar esse texto diretamente em um token CSS <code>url()</code> não é confiável. Uma cor como <code>#0a7</code> cria um fragmento de URL, espaços podem separar tokens e aspas ou parênteses podem encerrar o valor CSS. Este conversor elimina essas ambiguidades ao codificar o SVG como bytes UTF-8 e deixar legíveis apenas os caracteres não reservados de URL.
Todo o restante vira escape percentual, inclusive cerquilhas, sinais de maior e menor, aspas, apóstrofos, parênteses, espaços e quebras de linha. Assim, o valor permanece intacto em <code>url(...)</code> sem aspas ou com aspas simples ou duplas. O prefixo é <code>data:image/svg+xml,</code>, seguido pela marcação codificada.
Como não há base64, letras e números comuns continuam visíveis. Copie a sequência completa, pois o prefixo informa ao navegador como interpretar o conteúdo.
A validação ocorre antes da conversão
Codificar uma marcação inválida criaria um valor perfeitamente escapado que ainda falharia quando o navegador tentasse analisar a imagem. Para evitar esse resultado enganoso, o conversor verifica primeiro o documento XML. Ele exige um único elemento raiz SVG, tags de abertura e fechamento correspondentes e corretamente aninhadas, valores de atributos entre aspas, atributos sem duplicação, comentários e seções CDATA fechados e referências de entidade válidas.
Texto fora da raiz e uma segunda raiz são recusados. Declarações XML, instruções de processamento, comentários, CDATA e declaração de tipo de documento são aceitos quando aparecem em posições estruturalmente válidas. A validação confirma a sintaxe XML, mas não garante suporte de todos os navegadores a cada elemento, atributo, pintura, animação ou referência SVG.
Como usar o resultado em CSS e HTML
Use o URI retornado onde a plataforma espera uma URL de imagem. No CSS, destinos comuns incluem imagem de fundo, origem de máscara, marcador de lista e conteúdo gerado. Você pode envolver o valor em qualquer tipo de aspas para facilitar a leitura, embora o escape rigoroso também proteja um token <code>url()</code> sem aspas.
No HTML, atribua-o ao atributo <code>src</code> de uma imagem com o escape normal do atributo. Lembre que URIs de dados repetem seus bytes em cada ocorrência, a menos que o sistema de build extraia ou reutilize a declaração; portanto, são mais indicados para ícones, selos e elementos decorativos pequenos do que para ilustrações grandes. A conversão é determinística: entradas idênticas geram saídas idênticas.
O conversor não busca fontes, imagens ou estilos, não otimiza caminhos e não higieniza conteúdo SVG ativo. Trate marcação não confiável conforme as regras de segurança do destino.
Casos de uso
Incorporar um ícone pequeno no CSS
Converta um recurso SVG versionado em uma imagem de fundo segura sem criar outra requisição de rede.
Gerar estilos para diferentes temas
Codifique variantes SVG durante o build e coloque URIs determinísticos em tokens de design ou estilos de componentes.
Verificar marcação SVG gerada
Recuse XML quebrado vindo de um template antes de publicar a sequência de imagem codificada.
Perguntas frequentes
Por que usar codificação percentual em vez de base64?
SVG já é texto. A codificação percentual evita uma camada base64, preserva caracteres não reservados legíveis e produz um URI padronizado.
Posso colar o resultado diretamente em CSS url()?
Sim. Aspas, parênteses, espaços, cerquilhas e outros caracteres sensíveis da carga SVG ficam codificados.
O conversor otimiza ou higieniza o SVG?
Não. Ele valida a estrutura XML e codifica a marcação original sem remover metadados, scripts, referências externas ou caminhos redundantes.
Por que meu SVG foi recusado?
Porque o código não está bem formado. Uma tag não foi fechada ou aninhada corretamente, um atributo está sem aspas ou repetido, um comentário ficou aberto, uma entidade é inválida ou há texto ou um segundo elemento fora da raiz svg.
Quando não vale a pena usar um URI de dados para um SVG?
Quando a imagem é grande ou se repete em muitos lugares. Um URI de dados copia todos os seus bytes em cada ponto onde aparece, por isso funciona melhor para ícones pequenos, selos e enfeites do que para ilustrações grandes.
Ferramentas relacionadas
Para desenvolvedores — acesso via API
Tudo nesta página está disponível via API. Esta seção é para equipes que querem integrar a ferramenta aos próprios sistemas; quem não precisa disso pode simplesmente usar a ferramenta acima.
Endpoint
Autenticação por token Bearer. Um único POST coloca a tarefa na fila; o resultado chega por webhook ou link assinado.
Chame do seu código
curl -X POST https://api.kit.forhosting.com/web/svg-to-data-uri \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#0a7\" d=\"M2 2h20v20H2z\"/></svg>"}'const res = await fetch("https://api.kit.forhosting.com/web/svg-to-data-uri", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#0a7\" d=\"M2 2h20v20H2z\"/></svg>"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/web/svg-to-data-uri",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#0a7\" d=\"M2 2h20v20H2z\"/></svg>"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/svg-to-data-uri", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"svg":"<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\"><path fill=\\"#0a7\\" d=\\"M2 2h20v20H2z\\"/></svg>"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#0a7\" d=\"M2 2h20v20H2z\"/></svg>"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/svg-to-data-uri", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Exemplo de requisição
{
"svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#0a7\" d=\"M2 2h20v20H2z\"/></svg>"
}Exemplo de resposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.svg_to_data_uri",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}A API é assíncrona: cada chamada devolve um task_id na hora. Se preferir polling, consulte o status a até 1 requisição por segundo.
Preço
Preço publicado, sem tokens nem créditos escondidos. Tarefa que falha não é cobrada.
Limites
timeout_sec | 30 |
max_crawl_pages | 25 |
Erros
| HTTP | Código | O que significa |
|---|---|---|
401 | unauthorized | Token ausente ou inválido. Confira o header Authorization. |
402 | insufficient_balance | Saldo insuficiente para esta tarefa. Faça uma recarga e tente de novo. |
404 | unknown_type | Esse tipo de tarefa não existe. Confira o campo type no catálogo. |
429 | rate_limited | Muitas requisições em pouco tempo. Espere um instante e tente de novo. |
Notas técnicas
A validação ocorre antes da conversão
Se a validação falhar, a solicitação retorna <code>invalid_input</code> com uma descrição do problema, e não um URI.
Perguntas técnicas
Quanto custa a conversão pela API?
Cada solicitação à API custa US$ 0,002. A versão para navegador pode ser executada localmente nesta página.
O que acontece quando o XML está malformado?
A conversão para e retorna um erro invalid_input com a descrição da falha. Nenhum URI parcial é fornecido.