Overview
A converter that turns SVG markup into a CSS background-image data URI. Paste any SVG, and the tool cleans whitespace, swaps double quotes for single quotes, percent-encodes the markup, and emits a ready-to-use background declaration with size, repeat and position already set. A live preview renders the encoded result as an actual background.
How It Works
Paste your SVG source into the left editor; a sample checkmark icon loads by default, and the Sample button restores it while Clear empties the editor. The right panel shows the generated CSS: a background-image url with the data:image/svg+xml URI, plus background-size: contain, background-repeat: no-repeat and background-position: center. A preview box renders the URI as a real element background so you can confirm the icon survived encoding. Both panes support downloading, and the CSS output is editable only on the input side.
Step-by-Step Usage Guide
- Paste your SVG markup, or restore the sample icon.
- Check the live background preview on the right.
- Copy or download the generated CSS declaration.
- Apply it to any element that should show the icon.
Technical Specifications & Standards
The encoder percent-encodes the cleaned markup with encodeURIComponent and then un-escapes four safe sequences, space, equals, colon and slash, which keeps the URI short while remaining valid. Double quotes become single quotes first so the url wrapper can keep its double quotes without escaping. The critical character is the hash: an unencoded # starts a fragment and truncates the URI, silently corrupting hex colors like #6366f1, and encodeURIComponent handles it as %23 automatically. Keep the xmlns attribute, since data URIs are parsed as standalone documents without the HTML context that would supply the namespace. The tool does not base64-encode, and that is deliberate: UTF-8 percent-encoded SVG data URIs are typically smaller than base64 and remain diffable. Multiline markup is collapsed to single spaces before encoding.
Targeted Use Cases
- Inlining small icons without extra HTTP requests.
- Shipping a logo as a background so text remains selectable above it.
- Coloring icon backgrounds via CSS while keeping one source file.
- Embedding SVG patterns in generated stylesheets.
Notes & Gotchas
- Keep the xmlns attribute on the root svg or browsers may render nothing.
- Check the preview after pasting; a missing graphic usually means malformed markup or a stripped namespace.
- Prefer this URI form over base64 for size and readability.
- Use background-size: contain or explicit sizes so the icon scales predictably.
Frequently Asked Questions
Why does my SVG disappear after conversion?
Usually the root element lost its xmlns attribute, so the data URI parses as an unknown document. Restore the namespace, or the markup may contain an unescaped character; the live preview shows the failure immediately.
Why single quotes inside the data URI?
The converter replaces double quotes with single quotes before encoding, so the CSS url() wrapper can use double quotes without nested escaping. Both quoting orders are valid as long as they do not collide.
Is this better than base64-encoding the SVG?
For typical icons, yes. Percent-encoded UTF-8 data URIs are usually smaller than base64, which inflates by a third, and the URI stays human-readable and diffable.
Does the tool optimize or resize the SVG?
No. It encodes your markup exactly as cleaned, with whitespace collapsed and quotes normalised. Run a dedicated SVG optimizer first if the file carries editor metadata.