Paste SVG code or open an .svg file to get a compact, URL-encoded data URI ready for CSS background-image, mask-image or an img tag. The tool minifies the SVG, encodes only the characters that need it, compares the size with Base64 and shows a live preview.
Last updated:
Preview
Size comparison
Advertisement
Advertisement
How to use the SVG to CSS Data URI
Paste your SVG code into the box, or open or drop an .svg file.
Choose the encoding: optimized URL encoding (usually smallest) or Base64.
Pick the output: CSS background-image, CSS mask, plain data URI or an HTML img tag.
Check the preview and size bars to confirm the icon renders and see how much smaller URL encoding is than Base64.
Copy the code into your stylesheet or HTML, or download it.
Why URL-encoded SVG beats Base64
Base64 turns every 3 bytes into 4 characters, so a Base64 data URI is always about 33% larger than the SVG. URL encoding leaves letters, digits, spaces and most punctuation untouched and only escapes a handful of characters, so a typical icon grows by just a few percent. Because the result is still readable text, gzip and Brotli also compress it better.
Character
Encoded as
Why
#
%23
Would start a URL fragment and cut the SVG off, a common cause of broken hex colors
%
%25
Starts a percent-escape
<>
%3C%3E
Not allowed unescaped in URLs; older browsers reject them
"
' or %22
Would end url("…"); attributes are switched to single quotes
Line breaks
removed or %0A
Not allowed inside a CSS string
{ } | \ ^ ` [ ]
percent-encoded
Unsafe in URLs
é, emoji and other non-ASCII
UTF-8 percent bytes
Data URIs are ASCII-only
Background image or mask?
background-image draws the SVG with its own colors. Use it for multicolor illustrations, patterns and decorative shapes.
mask-image uses the SVG only as a stencil and fills it with the element's background-color. Set background-color: currentColor and the icon follows the text color, hover states and dark mode, which a background image cannot do. Include the -webkit-mask line for older Safari and Chromium versions.
Tips for small, reliable data URIs
Run large SVGs through an SVG optimizer first: removing editor data and rounding path coordinates often halves the size.
Keep a viewBox so the image scales cleanly with background-size.
Write colors as short hex (#fff) or named colors: every # costs three characters once encoded.
Reuse the same data URI through a CSS custom property, e.g. --icon: url("…"), instead of repeating it in many rules.
Frequently asked questions
How do I use an SVG as a CSS background image?
Convert the SVG to a data URI and put it in url(): background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' …%3E…%3C/svg%3E"). Paste your SVG above and copy the ready-made rule. The SVG must include xmlns="http://www.w3.org/2000/svg", which the tool adds if it is missing.
Is URL encoding or Base64 better for SVG data URIs?
URL encoding is usually better. SVG is text, so percent-encoding only a few characters keeps it readable and typically 20% to 30% smaller than Base64, which always adds 33%. It also compresses better with gzip or Brotli because the text stays repetitive. Base64 is mainly useful when a system does not accept special characters in URLs.
Which characters must be encoded in an SVG data URI?
At minimum % and # (the hash would start a URL fragment, so fill="#f00" must become %23f00), plus < and > and the quote character used around the URL. Line breaks should be removed or encoded. This tool also encodes { } | \ ^ ` [ ] and non-ASCII characters for safety, and swaps double quotes in attributes for single quotes.
Why doesn't currentColor work in an SVG background image?
An SVG used as a background-image or img is rendered as a separate isolated image, so it cannot inherit CSS like color, fonts or hover states from your page. To recolor an icon with CSS, use it as a mask-image instead and set background-color on the element, which the CSS mask output does.
Why does my SVG data URI not show up?
The usual causes are a missing xmlns attribute, an unencoded # in a color, unescaped double quotes inside url("…"), or invalid XML. External images, fonts and scripts inside the SVG are also blocked when it is used as an image. The preview and render check above flag these problems.
Does a data URI make my page faster?
For small icons it saves an HTTP request and avoids a flash while the icon loads. For large or repeated images it can be slower, because the data URI is downloaded again inside every stylesheet or page that contains it and cannot be cached separately. Keep inline SVGs to a few kilobytes.
Is my SVG uploaded?
No. Minifying, encoding and previewing happen entirely in your browser, so your artwork stays on your device.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.