How it works
The SVG to Data URI Converter encodes an SVG file into a CSS-compatible data URI string โ producing data:image/svg+xml;base64,... or the more efficient URL-encoded format โ ready to use directly in CSS background-image properties or HTML src attributes without an HTTP request.
Inlining SVGs as data URIs in CSS eliminates an HTTP request per icon. For small SVGs used repeatedly (icons, patterns, backgrounds), this can meaningfully reduce the number of round trips required to fully render a page โ particularly beneficial for HTTP/1.1 connections and first-load performance.
How to use it: paste your SVG markup or upload an SVG file. Choose encoding format: Base64 (data:image/svg+xml;base64,...) or URL-encoded (data:image/svg+xml,%3Csvg...) โ URL encoding is smaller than Base64 for most SVGs. Click Copy to get the complete data URI string.
Base64 vs URL-encoded: contrary to intuition, URL-encoding (percent-encoding) is typically smaller than Base64 for SVGs because SVG is text โ Base64 expands size by 33%, while URL-encoding only expands special characters. The URL-encoded format is preferred for CSS background-image use.
CSS usage: .icon { background-image: url("data:image/svg+xml,%3Csvg..."); }. The data URI can be used anywhere a URL is accepted in CSS: background-image, content (for pseudo-elements), and border-image.
Size limit: browsers impose no hard limit on data URI size, but very large data URIs (over 100KB) can slow down CSS parsing. Data URIs are best for SVGs under 5KB.
Frequently Asked Questions
- URL-encoded is usually smaller and preferred for CSS. Base64 adds 33% overhead to the original file size. URL-encoding only encodes the characters that need escaping (<, >, #, etc.), which are a minority of most SVG content. A 1KB SVG might be 1.1KB URL-encoded vs. 1.37KB in Base64.
- Yes. Use: background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'..."). The quote escaping inside the URL can be complex โ the tool generates correctly escaped output ready to paste.
- There is no hard spec limit, but browsers have practical limits around 2MB. Very large data URIs can slow CSS parsing. Keep SVG data URIs under 5KB for best performance. For larger SVGs, use an external file reference instead.
- Yes. Inline SVG (<svg>...</svg>) directly in HTML is often better than a data URI โ it's readable, can be styled with CSS, and supports JavaScript interaction. Data URIs are best for SVGs used in CSS backgrounds where inline SVG is not available.