Convert SVG graphics to CSS background-image data URIs with proper encoding and minification.
Give it an SVG file's markup and the tool returns a ready-to-use CSS declaration that draws the image from a data URI, no separate file needed. It compacts the markup into one line and percent-encodes every character that is unsafe inside a URI, then wraps the result in url("data:image/svg+xml,..."). The thing that trips people up is the hash in colors: fill="#ff0000" has to come out as %23ff0000, because an unencoded # marks the start of a URL fragment and the rest of the image silently disappears. The embedded image is fully offline and adds no HTTP request.
A concrete input and expected output from the current implementation.
Input
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><circle cx="5" cy="5" r="4" fill="#000"/></svg>
Expected output
background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2210%22%20height=%2210%22%3E%3Ccircle%20cx=%225%22%20cy=%225%22%20r=%224%22%20fill=%22%23000%22/%3E%3C/svg%3E"); The drawing was already compact, so the only change is the encoding: the # in fill="#000" becomes %23 (an unencoded hash would start a URL fragment and cut the image short), quotes become %22, angle brackets become %3C and %3E, and spaces become %20, while letters, digits, / and : pass through unchanged.
The SVG is handled as plain text, not rendered: the markup is normalized first, with the XML declaration and comments removed and runs of whitespace collapsed so the whole drawing fits on one line. The encoding pass then replaces every character that is unsafe inside a URI with a percent escape - angle brackets, double quotes, the hash sign (the one that breaks colors), spaces and any literal % - while letters, digits, /, :, - and . stay readable as-is.
Minification removes only text that cannot affect the drawing: the XML declaration, comments, and formatting whitespace, plus shortening color values where SVG defines an exactly equivalent shorter form, such as six-digit hex to three-digit. Coordinates, path data and fill values are preserved untouched, so the rendered image is pixel-identical to the source. The point is a smaller stylesheet: every byte saved by the minifier is a byte the page never downloads.
No. The converter accepts SVG markup only, because the whole technique depends on SVG being text. A raster image is binary, and embedding it in CSS uses a different encoding - base64 - which yields a data:image/png;base64,... URI. Use a general base64 tool for that; this converter only answers SVG questions.
First confirm the SVG renders when opened in a browser tab, since the converter only preserves what is already valid. Then look for external references - images or fonts the SVG points to - which cannot load inside a data URI. Finally, make sure the url() line was not broken when you saved it: a line break inside the quoted string invalidates the declaration.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.