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.
Outils associés
Encodeur et décodeur Base64 en ligne
Encodez ou décodez des chaînes Base64 directement dans votre navigateur
Encodeur et décodeur de texte
Convertissez du texte en Base64 ou décodez Base64 en texte brut
Image vers Base64
Convertissez des images en chaînes encodées Base64
Base64 vers image
Décodez des chaînes Base64 en images visibles
Fichier vers Base64
Encodez n'importe quel fichier en chaîne Base64
Base64 to File
Decode any Base64 string back to its original file
Base64 vers PDF
Décodez des chaînes Base64 en documents PDF
Décodeur JWT
Décodez et inspectez les tokens JWT
Encodeur/Décodeur URL
Encodez ou décodez des URLs avec l'encodage pourcent
Encodeur/Décodeur Entités HTML
Convertissez les caractères spéciaux en entités HTML
Convertisseur Hex ↔ Base64
Convertissez entre les formats hex et 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