SVG to data URI
Embed an SVG as a data: URI for CSS background-image or an img src, in base64 or the smaller, readable URL-encoded form.
SVG to data URI prints one data: URI for a stylesheet or an img tag, as base64 or as a shorter, readable URL form. The URL form escapes only the handful of characters that break a URL, after swapping every double quote for a single one. That assumes the file does not mix both quote styles with different meaning.
Questions
What is the difference between the base64 and url encodings?
base64 always produces a working data URI regardless of what the SVG contains. The url form is smaller and stays human-readable in a stylesheet, but only escapes the small set of characters that break a URL, so it depends on an assumption about how the file uses quote characters.
Which characters does the url form escape?
Double quote, percent, hash, both curly braces, and the angle brackets, seven characters in total, after first swapping every double quote in the source for a single quote.
When would the url encoding produce a broken result?
If the SVG document already mixes single and double quotes with different meaning somewhere in its markup, since the swap from double to single quotes assumes that is not happening. That is true of svgo output and of ordinary hand-written SVG, but it is a real limitation rather than something silently handled.
Does it change or save my SVG file?
No. It only reads the file and prints one data URI as text; no file is written back and the SVG itself is untouched.
What happens if the file is not a valid SVG?
It refuses with a message saying the root element is not svg, the same check every SVG-reading tool on this site runs before doing any work.
Compare
| Tool | Runs on the CLI | Live as you type |
|---|---|---|
| SVG to data URI | Yes | Yes |
| SVG to JSX component | Yes | Yes |
| Build an SVG sprite | Yes | No |