Softonic

Conversor de SVG para CSS

Etapa 1 / 2
Próximo

Cole qualquer trecho <svg> e receba uma declaração background-image que incorpora o SVG como um data URI. Isso evita uma requisição HTTP extra, mantém o ícone ou o padrão sob o controle do seu CSS e sobrevive às reescritas do CDN. A codificação segue o caminho rawurlencode em vez de base64, que fica menor para SVGs com muito texto e mais fácil de ler caso você precise depurar depois.

Como converter um SVG em um fundo CSS

  1. 1

    Cole o SVG

    Insira a marcação `<svg>...</svg>` completa, incluindo o atributo xmlns se o seu SVG tiver um.

  2. 2

    Clique em converter

    A ferramenta codifica o SVG em formato URL e o envolve em um URI `data:image/svg+xml,...`.

  3. 3

    Copie o CSS

    Você recebe três linhas de CSS: `background-image`, `background-repeat` e `background-size`, prontas para colar.

  4. 4

    Ajuste conforme necessário

    Troque `background-size` por `cover`, `100px 100px` ou o valor que preferir, dependendo de ser um ícone ou um padrão.

Por que rawurlencode em vez de base64

Base64 infla o SVG em cerca de 33 %. Como o SVG é texto puro, a codificação de URL deixa a maioria dos bytes intactos e só escapa os caracteres que têm significado dentro de um URI: <, >, #, os espaços e alguns outros. Isso geralmente produz uma string de 20 a 40 % mais curta que o equivalente em base64 e ainda é interpretada corretamente em todos os navegadores modernos.

Quando incorporar um SVG e quando vincular a um arquivo

Situação Incorporar como data URI Arquivo .svg externo
Ícone pequeno usado uma vez por página Boa opção Aceitável
Padrão abaixo de 2 KB usado no site inteiro Boa opção Também serve, em cache
Conjunto de mais de 30 ícones Evite Use um sprite
SVG que você precisa animar ou estilizar via JS Evite Incorpore no HTML
HTML de e-mail Incorpore ou omita O externo costuma ser bloqueado

Erros comuns

  • Um # dentro de um fill="#..." precisa ser escapado. O codificador faz isso por você.
  • Não inclua um prólogo <?xml ...?>; remova-o antes de colar.
  • As aspas dentro do SVG precisam combinar com as aspas externas da sua string CSS. A regra gerada usa aspas duplas por fora, então aspas simples dentro do SVG são o mais seguro.
  • Se o SVG contiver blocos <script>, os navegadores se recusarão a executá-los dentro de um background-image; isso é esperado e proposital.

Perguntas frequentes

Em qualquer navegador que suporte URIs data: e SVG, ou seja, todos os principais navegadores da última década. O IE 11 também suporta, embora ali o data URL precise estar em base64.

Defina background-size de forma explícita. Sem isso, o navegador recorre à viewBox intrínseca do SVG, que pode não corresponder ao seu elemento.

Não do jeito que estão: as variáveis CSS são avaliadas fora do data URI. Fixe a cor diretamente ou use uma técnica de máscara com mask-image e background-color.

Regra aproximada: abaixo de 4 KB tudo bem, entre 4 e 10 KB vale medir, acima de 10 KB quase sempre rende melhor como arquivo externo que pode ser armazenado em cache.

A marcação que você cola é enviada ao nosso servidor para ser codificada em formato URL e devolvida como a regra CSS. Ela é processada apenas para montar essa regra e não é armazenada nem compartilhada.

Ferramentas relacionadas

Gerador de Cartão CSS

Crie o CSS de um contêiner de cartão: fundo, borda, raio dos cantos, espaçamento interno e sombra suave, com pré-visualização imediata e código para copiar e colar.

Conversor de Tamanho de Arquivo

Converta entre bytes, KB, MB, GB, TB e as unidades binárias IEC (KiB, MiB, GiB, TiB), combinando decimal e binário como preferir.

Gerador de Docker Compose

Gere um docker-compose.yml a partir de definições de serviços com imagem, portas e volumes, com padrões de boas práticas.

Conversor de base numérica

Converta números entre binário, octal, decimal, hexadecimal e qualquer base personalizada de 2 a 36, com o detalhamento posicional.

Visualizador de Markdown

Escreva Markdown e veja a renderização HTML atualizar ao vivo. Sintaxe com estilo GitHub, incluindo tabelas, listas de tarefas, blocos de código cercados e autolinks.

Gerador de Configuração Nginx

Gere blocos de servidor Nginx com TLS, HTTP/2, gzip, cache de navegador e regras de proxy reverso a partir de um formulário simples.

Ferramenta disponível em outros idiomas