SVG to Base64 and data URI
Paste or choose an SVG to get it as a data URI, as a CSS background, as an HTML image and as plain Base64, each with a copy button.
Free, no account. The file is read by code running in your browser. It is not uploaded, and nothing about it is stored.
Which form to use
- Data URI, text: the SVG kept as text with only the unsafe characters escaped. The smallest form, and the one to prefer in CSS.
- CSS background: the same thing wrapped in
background-image: url("…"). - HTML image: an
<img>tag with the SVG inside itssrc. - Data URI, Base64: for tools and fields that insist on Base64.
- Base64 only: the bare encoded text, for JSON, email and APIs.
Base64 is not the small option
Base64 turns every three bytes into four characters, so it is a third larger than the file it encodes. SVG is already text, so it does not need Base64 to travel inside CSS or HTML: it only needs a few characters escaped, chiefly #, < and >. The text form here does that and nothing more. It also compresses better when your server gzips the stylesheet, because the SVG’s repeated words stay visible.
When to inline an SVG at all
Inlining saves a request, which helps for a handful of small icons used on every page. It also means the picture cannot be cached on its own and is downloaded again with every copy of the stylesheet. Keep large or rarely used SVGs as separate files.
Questions
Why does my data URI break in CSS?
Usually an unescaped # in a colour such as #ff0000: in a URL, everything after # is treated as a fragment and thrown away. The text form here writes it as %23. Mixed quote marks are the other cause; here the SVG’s double quotes become single quotes so the whole thing can sit inside double quotes.
Can I decode Base64 back to SVG?
Yes. Any Base64 decoder gives back the original text exactly. Nothing is lost in either direction.