HTMLSVG to CSS Data URI Encoder
Convert SVG markup into a URL-encoded CSS data URI for background-image, plus a base64 variant — with a live preview. Encodes #, <, > and quotes correctly. 100% in-browser; your SVG never leaves your machine.
Ctrl+Enter to run | Ctrl+K to switch tools | Recent button shows input history
Repeating this work? Turn this kind of browser utility into an API batch, MCP prompt, extension workflow, or shared team recipe.
Buy Pro Browse tool packsFAQ
Why URL-encode instead of base64?
URL-encoded SVG is usually smaller, stays human-readable, and gzips better. Base64 inflates size by about 33% but is sometimes needed for older tooling.
Which characters must be encoded?
At minimum # (would be read as a fragment), <, >, and double quotes. This tool encodes them all and swaps double quotes for single quotes to keep the output compact.