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.
Related Tools
Base64 Decode & Encode Online — Free Base64 Converter
Encode or decode Base64 strings directly in your browser
Text Encoder & Decoder
Convert text to Base64 or decode Base64 to plain text
Image to Base64
Convert images to Base64 encoded strings
Base64 to Image
Decode Base64 strings back to viewable images
File to Base64
Encode any file to a Base64 string
Base64 to File
Decode any Base64 string back to its original file
Base64 to PDF
Decode Base64 strings to PDF documents
JWT Decoder
Decode and inspect JWT tokens
URL Encode/Decode
Encode or decode URLs with percent-encoding
HTML Entity Encode/Decode
Convert special characters to HTML entities and back
Hex ↔ Base64 Converter
Convert between hex and Base64 formats
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