SVG Forge

SVG para background-image do CSS

Embuta qualquer SVG na sua folha de estilo como um data URI codificado.

ou solte um arquivo / cole o código abaixo
Regra CSS
A saída aparece aqui

Como funciona

  1. 1Cole código SVG ou solte um arquivo .svg.
  2. 2A ferramenta codifica em URL dentro de uma regra background-image.
  3. 3Copie o trecho de CSS direto para a sua folha de estilo.

Grátis, sem cadastro e sem marca d'água — tudo roda localmente no seu navegador, então seus arquivos nunca saem da sua máquina.

Perguntas frequentes

Por que codificar em URL em vez de base64?

O SVG codificado em URL é menor e continua legível no seu CSS; o base64 também está disponível, se preferir.

Quando vale embutir SVG no CSS?

Em ícones decorativos pequenos e padrões — economiza uma requisição HTTP. Artes grandes ficam melhores como arquivo.

Ferramentas relacionadas

SVG para data URI

Codifique SVG para img src, url() do CSS ou qualquer lugar em que caiba um URI.

Otimizador de SVG

Limpeza movida a SVGO: arquivos menores, os mesmos pixels. A economia aparece na hora.

SVG para React

Cole um SVG e receba um componente JSX ou TSX pronto para importar.