Skip to main content
FreeToolkit .ai

Conversor de Fundo de CSS do SVG Codifique o código SVG como uma imagem de fundo do CSS usando codificação de URI de dados.

SVG para Fundo de CSS illustration
🎨

SVG para Fundo de CSS

Codifique o código SVG como uma imagem de fundo do CSS usando codificação de URI de dados.

1

Cole o código SVG

Insira ou cole sua marcação SVG no campo de entrada.

2

Defina as propriedades do fundo

Configure as configurações de tamanho, repetição e posição do fundo.

3

Copie o CSS

Visualize o SVG como um fundo e copie o código CSS.

Loading tool...

What Is SVG para Fundo de CSS?

A ferramenta de Conversão de SVG para CSS Background converte o código SVG em uma imagem de fundo CSS usando codificação de URI de dados. Essa técnica incorpora o SVG diretamente no seu CSS sem exigir arquivos de imagem separados ou requisições HTTP. Basta colar o código SVG, configurar tamanho de fundo, repetição de fundo e posição do fundo, e a ferramenta gera o CSS codificado. A codificação de URI de dados substitui caracteres especiais (como <, >, #) por equivalentes seguros para URL, para que o SVG possa ser incorporado com segurança em uma função url() do CSS. A pré-visualização mostra o SVG aplicado como fundo em um elemento de amostra. Essa abordagem é ideal para pequenos ícones, padrões e elementos decorativos que você deseja incluir no seu CSS sem dependências de arquivos externos.

Why Use SVG para Fundo de CSS?

  • Nenhum arquivo de imagem separado é necessário - o SVG está incorporado diretamente no CSS
  • Elimina as solicitações HTTP para ativos SVG pequenos
  • Tamanho do fundo, repetição e posição configuráveis
  • A visualização ao vivo mostra o SVG como um fundo CSS

Common Use Cases

Fundos de Ícones

Incorpore pequenos ícones SVG diretamente no CSS para botões e marcadores de lista.

Fundos de Padrão

Codifique padrões SVG repetidos como fundos CSS sem arquivos de imagem.

Elementos Decorativos

Adicione decorações SVG a pseudo-elementos via fundos CSS.

Modelos de E-mail

Incorpore gráficos SVG no CSS para modelos de e-mail onde imagens externas podem ser bloqueadas.

Technical Guide

As URIs de dados SVG usam o formato: url("data:image/svg+xml,<encoded-svg>"). O conteúdo do SVG é codificado por URL substituindo caracteres especiais: < se torna %3C, > se torna %3E, # se torna %23 e aspas são convertidas em aspas simples. Essa codificação é mais eficiente que a base64 para o SVG, pois mantém a legibilidade e geralmente é menor. A propriedade background-image aceita a URI de dados e as propriedades de fundo padrão (tamanho, repetição, posição) controlam a renderização. Para SVGs grandes, considere usar arquivos externos em vez disso, pois URIs de dados grandes aumentam o tamanho do arquivo CSS e não podem ser armazenados em cache independentemente. O tamanho de fundo: conter dimensiona o SVG para caber dentro do elemento mantendo a proporção. O tamanho de fundo: cobrir preenche o elemento, potencialmente cortando o SVG. Valores específicos em pixels ou porcentagem dão controle preciso.

Tips & Best Practices

  • 1
    Use codificação URL (não base64) para um tamanho de arquivo menor com SVG
  • 2
    Remova atributos SVG desnecessários para minimizar o tamanho codificado
  • 3
    Mantenha os SVGs pequenos - URIs de dados grandes inflam o CSS e não podem ser armazenados em cache separadamente
  • 4
    Use aspas simples em SVG para evitar problemas de escape em CSS

Related Tools

Padrão de Fundo CSS - free online tool

Padrão de Fundo CSS

Crie padrões de fundo CSS repetitivos, incluindo listras, xadrez, pontos e muito mais.

🎨 CSS & Design
Pesquisa de Ícones - free online tool

Pesquisa de Ícones

Pesquise e personalize ícones SVG de código aberto com tamanho, cor e traço ajustáveis.

🎨 CSS & Design
Gerador de Variáveis CSS - free online tool

Gerador de Variáveis CSS

Gere propriedades personalizadas do CSS (variáveis) para cores, espaçamento e tipografia.

🎨 CSS & Design
Gerador de Padrões SVG - free online tool

Gerador de Padrões SVG

Gere padrões repetitivos baseados em SVG para fundos CSS com várias formas.

🎨 CSS & Design

Frequently Asked Questions

Q A codificação de URI de dados é melhor do que a base64 para SVG?
Sim, o SVG codificado por URL é tipicamente menor do que o base64 e permanece legível por humanos no CSS.
Q Posso usar qualquer SVG?
Sim, qualquer código SVG válido pode ser codificado. Remova atributos e espaços em branco desnecessários para um tamanho ótimo.
Q Isso funciona em todos os navegadores?
Sim, as URIs de dados SVG em fundos CSS são suportadas em todos os navegadores modernos.
Q E sobre os SVGs grandes?
Para SVGs grandes ou complexos, use arquivos SVG externos instead. As URIs de dados não podem ser armazenadas em cache independentemente do CSS.
Q Posso usar SVGs de URI de dados em tags <img>?
Sim, o mesmo formato de URI de dados funciona nos atributos src das tags img e no background-image do CSS.

About This Tool

SVG para Fundo de CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.