Categoria: Desenvolvimento
SVG para CSS Background
Transforme código SVG inline em uma data URI de background-image
Cole um código SVG e obtenha uma data URI de background-image em CSS, além das linhas de background-repeat, background-size e background-position, com uma prévia ao vivo para conferir antes de copiar.
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='2'%3E %3Ccircle cx='12' cy='12' r='9' /%3E %3Cpath d='M8 12h8M12 8v8' /%3E %3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center;O SVG nunca sai do navegador; ele é codificado diretamente no valor CSS.
Tudo nesta página é processado no seu navegador. Nada é enviado.
Para que serve
Um pequeno ícone ou padrão em SVG costuma ser mais leve como uma data URI CSS inline do que como uma requisição de imagem separada, mas codificar o código à mão para que ele sobreviva dentro de um valor url(...) é propenso a erros: aspas, colchetes angulares e quebras de linha exigem escape cuidadoso. Esta ferramenta faz essa codificação por você, mantendo o resultado curto e legível em vez de recorrer a base64, e mostra uma prévia de plano de fundo ao vivo nas configurações de repetição e tamanho que você escolher.
Como usar
- Cole o código SVG que deseja usar como plano de fundo.
- Escolha como ele deve repetir e escalar.
- Copie a declaração CSS e cole na sua folha de estilos.
Privacidade
Esta ferramenta roda inteiramente no seu navegador. O que você digita nunca é enviado, salvo ou compartilhado — fechar a aba já remove tudo.
Perguntas frequentes
- Isso é o mesmo que codificar o SVG em base64?
- Não. Ele apenas escapa o punhado de caracteres que quebrariam um valor CSS, o que mantém a data URI visivelmente mais curta e ainda legível, diferente de um bloco base64.
- O SVG é enviado para algum lugar?
- Não. A codificação acontece com substituição simples de texto na aba do seu navegador; o código que você cola nunca sai da página.
- Posso usar currentColor ou variáveis CSS dentro do SVG?
- currentColor funciona, pois é resolvido pelo navegador no momento da renderização, mas propriedades customizadas CSS referenciadas nos próprios atributos do SVG não são, já que uma data URI de background-image é código estático, não uma folha de estilos viva.