SVG to CSS Data URI

Convert SVG files to CSS-embeddable data: URIs and background-image declarations.

Tested tool guide Tested browser tools Checked August 16, 2026

What SVG to CSS Data URI does, with a checked example

Paste an SVG file's markup and this converter returns two things: a data:image/svg+xml data URI and a complete background-image declaration that uses it. The markup is percent-encoded character by character so the result is valid both as a URL and inside CSS, and nothing leaves the browser. What most often trips people up is the hash sign: every # in the SVG (hex colors, url(#id) references) must become %23, or the browser reads it as a URL fragment and the image fails silently. The other surprise: a data-URI SVG is an opaque image, so your page's CSS cannot recolor or restyle anything inside it.

Worked example

A concrete input and expected output from the current implementation.

Input

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><circle cx="5" cy="5" r="4" fill="#f90"/></svg>

Expected output

data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2010%2010%22%3E%3Ccircle%20cx=%225%22%20cy=%225%22%20r=%224%22%20fill=%22%23f90%22/%3E%3C/svg%3E

background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2010%2010%22%3E%3Ccircle%20cx=%225%22%20cy=%225%22%20r=%224%22%20fill=%22%23f90%22/%3E%3C/svg%3E");

Every character that is unsafe in a URL or CSS string is percent-encoded: < becomes %3C, double quotes become %22, spaces become %20, and the fill color's # becomes %23. The browser decodes the payload back into the original SVG when rendering, so the drawn circle is identical to the source file - the encoding only makes the URI safe to carry inside url("...").

How the result is produced

Percent-encoding

The converter percent-encodes the SVG markup so the result is valid both as a URL and as a CSS value: < becomes %3C, > becomes %3E, double quotes become %22, spaces become %20, and # becomes %23. The encoded payload is prefixed with data:image/svg+xml, and the tool hands back the bare URI plus the same URI wrapped in url("...") so it can be dropped straight into a background-image rule.

What the encoded size tells you

Every encoded character takes three bytes, so quotes, spaces, and angle brackets in the source triple in size in the URI. A minified icon of a few hundred bytes stays compact; a file carrying an XML prolog, comments, and indentation grows quickly. Minifying the SVG before conversion - stripping the XML prolog, doctype, and whitespace - keeps the output short, and there is no practical size limit in modern browsers anyway.

Good uses

Making a stylesheet self-contained: embed a logo or icon set as background-image so the page renders with no extra HTTP request and no broken asset paths when files move or the page is opened from disk.
Masking and decoration: use the URI in mask-image or as a background on buttons and badges, keeping small SVG artwork inside the CSS rule instead of a separate file fetch.
Hover and state swaps: because the embedded SVG is an opaque image, generate a second URI with a different fill for hover or active states and switch the declaration - the standard workaround for recoloring.

Limits and checks

Check the output for any raw #. Hex colors like fill="#f90" or internal references like url(#gradient) that a converter leaves unencoded truncate the URI at the first #, and the image fails silently. The encoded output should contain no #, no spaces, and no < or > characters.
Remember the result is an image, not a document. CSS in your stylesheet cannot reach inside the SVG - no descendant selectors, no currentColor inheritance, no recoloring on hover. If the goal is styling the parts, use an inline <svg> element in the HTML instead of a data URI.
Whitespace costs you. Every space, quote, and angle bracket in the source becomes three characters in the URI, so a pretty-printed SVG can balloon to many times its file size. Minify the SVG before converting, and keep this approach for small icons rather than large, complex illustrations.

Common questions

My background-image renders blank. What am I doing wrong?

The usual cause is a raw # left unencoded: the browser reads everything after it as a URL fragment and the image never loads. Confirm every # in the output is %23 and there are no spaces or < > characters, and that the URI sits inside url("...") quotes. Also check the SVG does not reference external files - images, fonts, or CSS do not load inside a data URI.

Where else can I use the data URI besides background-image?

Anywhere a URL is accepted: an <img> src, a favicon <link> href, mask-image, or pasted into a browser address bar to preview. It cannot act as a file, though: nothing inside the SVG can be styled or addressed from the page, and the SVG cannot pull in external images, fonts, or stylesheets, so keep it fully self-contained.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.