SVG to CSS
NewConvert SVG code to CSS background-image data URI for inline use.
Frequently Asked Questions
Why does this tool output both URL-encoded and Base64 CSS?
Because both are common ways to inline SVG in CSS. The component generates a standard background-image declaration for a URL-encoded data URI, a base64 version, and a shorthand background declaration.
Does it optimize or rewrite the SVG before converting it?
Only minimally. It trims the markup and removes whitespace between tags, but it does not run a full SVG optimizer or rewrite the drawing structure.
Why does it refuse input that does not start with <svg>?
The validator is explicit: the input must look like raw SVG markup, starting with an <svg> tag, and it also has to parse as XML without parser errors.
Can I paste an existing CSS url(...) string and have it decode it?
No. This tool is one-way: raw SVG in, CSS snippets out. It does not parse existing CSS declarations or data URIs back into SVG.
Why are spaces left as spaces in the URL-encoded output instead of %20?
After encodeURIComponent, the tool intentionally changes %20 back to literal spaces. That is usually fine inside quoted CSS url(...) values, but it is not a fully percent-escaped URI string.