SVG 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
Let AI do the hard part. Fix broken HTML, convert to email-safe HTML, or clean up any markup in one click — 3 free AI runs per day, no account needed.
Try the AI HTML FixerFAQ
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.