SVG to Data URI
Convert SVG markup into a data URI, ready to use directly in CSS background-image or an <img> src attribute.
Paste your SVG markup below - this tool generates a ready-to-use data URI in either URL-encoded or Base64 form.
For decoding a data URI back into a viewable/downloadable image, see the Data URI to Image tool.
What Is an SVG Data URI?
A data URI embeds the SVG's content directly into a URI string (data:image/svg+xml,...), letting you use it inline in CSS or HTML without a separate file request - commonly used for small icons.
Why Use This Tool?
Data URIs need their special characters correctly escaped (for URL-encoded form) or base64-encoded - doing this by hand is error-prone, especially with quotes inside the SVG.
How to Use It
- Paste your SVG markup.
- Choose URL-encoded or Base64 output.
- Copy the resulting data URI into your CSS
background-imageor an<img src>.
Limitations
URL-encoded data URIs are generally more compact than Base64 for SVG (since SVG is text), but Base64 is sometimes preferred for compatibility with certain tools - this tool provides both so you can choose.