SVG to CSS Data URI

What it does

Converts SVG markup to a CSS background-image data URI. This allows you to embed SVG images directly in CSS without needing an external file, perfect for icons, patterns, and small illustrations.

How to use

Paste your SVG markup into the input area
Click Convert to Data URI
Copy the resulting url("data:image/svg+xml,...") value
Use it in CSS: background-image: url("data:image/svg+xml,...");

Common use cases

Embedding icons directly in CSS files
Creating CSS-only patterns and backgrounds
Reducing HTTP requests for small SVG assets
Generating inline SVG backgrounds for dynamic styling

Privacy

All conversion runs in your browser. No SVG data is sent to any server.

Base64 Image — Convert images to base64 data URIs
HTML Beautifier — Format SVG/HTML markup

FAQ

Should I use this instead of base64 SVG? URL-encoding is usually more efficient for SVGs than base64 encoding, as the output is smaller.

Are all SVG features supported? Yes, any SVG can be converted. However, very complex SVGs will produce very long data URIs.

Does it work in all browsers? Yes, SVG data URIs are supported in all modern browsers.

SVG para CSS Data URI

O que faz

Converte marcação SVG para um data URI background-image CSS. Isso permite incorporar imagens SVG diretamente no CSS sem precisar de um arquivo externo, perfeito para ícones, padrões e pequenas ilustrações.

Como usar

Cole sua marcação SVG na área de entrada
Clique em Converter para Data URI
Copie o valor url("data:image/svg+xml,...") resultante
Use no CSS: background-image: url("data:image/svg+xml,...");

Casos de uso comuns

Incorporar ícones diretamente em arquivos CSS
Criar padrões e backgrounds apenas com CSS
Reduzir requisições HTTP para ativos SVG pequenos
Gerar backgrounds SVG inline para estilização dinâmica

Privacidade

Todo o processamento roda no seu navegador. Nenhum dado SVG é enviado para nenhum servidor.

Ferramentas relacionadas

Imagem Base64 — Converta imagens para data URIs base64
Embelezador HTML — Formate marcação SVG/HTML

Perguntas frequentes

Devo usar isso em vez de SVG base64? Codificação URL geralmente é mais eficiente para SVGs do que codificação base64, pois a saída é menor.

Todos os recursos SVG são suportados? Sim, qualquer SVG pode ser convertido. No entanto, SVGs muito complexos produzirão data URIs muito longos.

Funciona em todos os navegadores? Sim, data URIs SVG são suportados em todos os navegadores modernos.