SVG to Data URI Converter for CSS Backgrounds
Paste SVG code to get a data URI that drops straight into background-image: url(data:image/svg+xml,...), so icons and patterns need no extra file request. To Base64-encode plain text, use the Base64 Encoder/Decoder; for bitmap images, see Image to Base64; for repeating SVG patterns, try the CSS Pattern Background Generator.
🔒 Runs in your browser · Your data is never sent to a server
How to use
- Paste your SVG into the "SVG code" box.
- Pick URL-encoded (compact) or Base64 under "Method".
- Check the preview. If you need it, tick "Also output background positioning".
- Take the result with "Copy CSS" or "Copy data URI".
Notes
- URL encoding escapes only the characters % # < > and backslash, quotes, and non-ASCII characters, so it is usually shorter than Base64, though harder to read.
- Base64 grows the data by about 1.33x and compresses poorly with gzip, so it suits small SVGs or cases where compatibility matters most.
- An SVG without xmlns will not render as a background image, so the tool adds it. The XML declaration, DOCTYPE, and comments are removed and whitespace is collapsed.
- The output assumes it sits inside a CSS url() wrapped in double quotes. Double quotes in the SVG become single quotes (or %22). If you paste it into an HTML attribute instead, watch for HTML escapes such as &.
- Scripts and external resources in an SVG loaded as a background image are not run or fetched. To change colors, edit fill and similar attributes before encoding.
- Everything runs in your browser; the SVG you paste is never sent to a server.
Glossary
Data URI
A URL that carries the data itself, like `data:image/svg+xml,...`. It avoids a separate file request and can be used directly in CSS `url()` or `<img src>`.
Percent-encoding
Writing characters that are unsafe in URLs as "%" plus hex digits, such as `%23` for `#`. SVG data URIs usually escape only a few characters like `#`, `<`, and `>`.
xmlns
The XML namespace attribute. For SVG it is `xmlns="http://www.w3.org/2000/svg"`, and it is required when the SVG is loaded as a standalone image.
FAQ
Should I choose URL encoding or Base64?
URL encoding (compact) is the usual choice. SVG is text, so it stays shorter than Base64 and compresses well with gzip. Pick Base64 when you need to match an older toolchain or environment.
I pasted the CSS but the SVG doesn't show up.
An SVG without xmlns="http://www.w3.org/2000/svg" will not render as a background image. This tool adds it automatically, but an SVG with no width, height, or viewBox has no intrinsic size and may stay invisible unless you set background-size.
How are "#" and "%" inside the SVG handled?
URL encoding turns # into %23 and % into %25, because otherwise the browser reads them as part of the URL and the SVG breaks. Base64 needs no such escaping.
Can I recolor a background SVG with CSS?
No. An SVG loaded as a background image is not affected by the page CSS, so set colors with fill or stroke inside the SVG before encoding.
Share this page