> svg | data uri | css <
// Convert SVG to URL-encoded data URI, Base64 and CSS background-image instantly
Markup or File
Paste SVG markup directly or upload an .svg file. The tool produces all four output formats from a single input.
CSS-Ready Output
Generates ready-to-paste background-image declarations using URL-encoded data URIs that compress better than Base64 for SVG.
Byte Size Comparison
Shows raw, URL-encoded and Base64 byte counts so you can pick the smallest payload for inlining in HTML or CSS.
// ABOUT SVG DATA URIS
How It Works:
SVG is text-based XML defined by the SVG 1.1 specification, so it can be embedded directly into a data URI as defined by RFC 2397. URL-encoding (encodeURIComponent plus escaping single and double quotes) usually yields a smaller, more CSS-friendly payload than Base64 because Base64 inflates the byte count by roughly 33%.
Example:
data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22.../%3E
Common Use Cases:
- >Inline icons in CSS background-image
- >Embed SVG without extra HTTP requests
- >Build single-file HTML demos and emails
- >Reduce DOM weight versus inline <svg>
- >Cache-friendly UI sprites
>> frequently asked questions
Q: Should I use URL-encoded or Base64 SVG data URIs?
A: For SVG, URL-encoded data URIs are almost always smaller than Base64 because Base64 inflates the byte count by roughly 33 percent. Use URL-encoded for CSS and inline HTML where you want the smallest payload; Base64 is mainly useful where the consumer cannot parse percent-encoded XML, such as some legacy email clients or quick-and-dirty copy-paste into binary-safe fields.
Q: Why does my CSS background-image not render?
A: Browsers require careful quoting around URL-encoded SVG values inside url("...") because the SVG itself contains double quotes for its own attributes. This tool emits url("...") with every inner double quote encoded as %22 and every single quote as %27, so the snippet is safe to paste directly into CSS without any further escaping.
Q: Is my SVG uploaded to a server?
A: No. Conversion runs entirely in your browser using the FileReader API for uploaded files and standard string APIs for pasted markup. Nothing is sent to any server, so the tool is safe for proprietary brand assets, unreleased iconography, or design system primitives that have not been published yet on a public CDN or repository.
Q: Can I optimize my SVG before converting?
A: This tool does not minify or optimize SVG itself, but you can paste pre-optimized output from a tool like SVGO and the data URI it produces will be just as compact. Removing XML comments, editor metadata, default attributes, and unused namespaces typically shaves 30 to 60 percent off the eventual data URI payload.
Q: Are there size limits?
A: There is no hard limit imposed by this tool, but very large SVGs (over a few hundred kilobytes) defeat the purpose of inlining because they bloat your CSS or HTML and prevent normal HTTP caching of the asset. For complex artwork or illustrations, prefer linking the SVG file as a separate resource so the browser can cache and reuse it.