URL-encoder for SVG
Encode SVG to be used with CSS
Result
This tool converts raw SVG markup into a URL-encoded data URI you can paste directly into a CSS `background-image` or an HTML `<img src>`, no separate image file or hosting needed. It's a fast way to inline small icons and illustrations right into your stylesheet or markup.
Paste SVG markup like this and get back a ready-to-use data URI:
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><circle cx="5" cy="5" r="4"/></svg>
→
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' ...%3E
Why encode an SVG instead of linking to the file?
An inlined data URI skips a separate HTTP request, which helps for small icons that would otherwise add extra round-trips to a page.
Does encoding change how the SVG looks?
No, encoding only changes how the SVG is represented as text. The rendered image is identical to the original file.
Can I use the output directly in CSS?
Yes, the encoded string is ready to paste inside a `url(...)` in a CSS `background-image` or `content` property.
Is there a size limit for encoding?
Very large SVGs still work, but they produce a long data URI, so this approach is best kept for small icons rather than complex illustrations.