SVG to Data URI Converter — Inline SVG as CSS Background
Convert SVG code to data URIs for use in CSS background-image, HTML img tags, or inline embedding. Choose between URL-encoded (smaller) or Base64 format. Preview your SVG and copy ready-to-use code snippets.
Why convert SVG to data URI?
SVG data URIs let you embed vector graphics directly in CSS or HTML without separate HTTP requests. This is especially useful for small icons, logos, and UI elements where the overhead of an HTTP request exceeds the file transfer time.
There are two encoding methods: URL-encoding (recommended for SVG) preserves readability and is typically smaller, while Base64 encoding produces a longer string but avoids potential parsing issues with special characters in some contexts.
URL-encoded advantages
- Typically 20-30% smaller than Base64 for SVG files
- Partially human-readable — you can still see the SVG structure
- Recommended by most performance optimization guides
Best practices
- Minify your SVG before converting (remove comments, whitespace, editor metadata)
- Use data URIs for small SVGs under 10KB — larger files should be external
- Always set xmlns='http://www.w3.org/2000/svg' in your SVG for data URI compatibility
FAQs
Should I use URL-encoding or Base64 for SVG data URIs?
URL-encoding is recommended for SVG. It produces smaller output (typically 20-30% smaller than Base64) and keeps the SVG partially readable. Use Base64 only if you encounter parsing issues with special characters in your specific context.
Why is my SVG not rendering in the data URI?
Make sure your SVG includes the xmlns attribute (xmlns='http://www.w3.org/2000/svg'). Also check that there are no unescaped special characters like # in color values, and that the SVG is well-formed XML.
What is the maximum size for SVG data URIs?
There is no hard limit in modern browsers, but performance degrades with large data URIs. Keep SVG data URIs under 10KB for best results. For larger SVGs, use an external file served through a CDN.
Can I use SVG data URIs in CSS custom properties?
Yes. You can store an SVG data URI in a CSS custom property (variable) and use it with url(). This is a great pattern for theming, letting you swap icons by changing a single variable value.
Ferramentas relacionadas
Codificador e decodificador Base64 online
Codifique ou decodifique strings Base64 diretamente no seu navegador
Codificador e decodificador de texto
Converta texto para Base64 ou decodifique Base64 para texto simples
Imagem para Base64
Converta imagens para strings codificadas em Base64
Base64 para imagem
Decodifique strings Base64 de volta para imagens visíveis
Arquivo para Base64
Codifique qualquer arquivo para uma string Base64
Base64 to File
Decode any Base64 string back to its original file
Base64 para PDF
Decodifique strings Base64 para documentos PDF
Decodificador JWT
Decodifique e inspecione tokens JWT
Codificador/Decodificador URL
Codifique ou decodifique URLs com codificação percentual
Codificador/Decodificador Entidades HTML
Converta caracteres especiais em entidades HTML
Conversor Hex ↔ Base64
Converta entre formatos hex e Base64
Base64 to Text
Decode Base64 strings to plain readable text
Base64 Validator
Check if a string is valid Base64 encoding
Base64 to JSON
Decode Base64 and pretty-print as formatted JSON
Data URI Generator
Generate Base64 data URIs from text or files
Base64 to Hex
Convert Base64 strings to hexadecimal and back
UTF-8 Encoder & Decoder
Encode text to UTF-8 bytes or decode bytes to text