Image / SVG Developer Tools

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.

SVG Markup Encoding

CSS Usage Example

More Image / SVG Developer Tools

View all 18

SVG Optimizer Data URI to Image SVG Minifier Image to Base64 SVG Formatter Base64 to Image BlurHash Generator SVG to PNG Converter

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-image or 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.

Frequently Asked Questions

For small icons and backgrounds in CSS, so the image loads with the stylesheet and needs no extra HTTP request.

Both work in CSS and img tags. For SVG, URL-encoding is usually smaller and stays readable, because SVG is already text; Base64 adds about 33% to the size.

For large or frequently reused images. Separate files can be cached by the browser, while data URIs are downloaded again with every stylesheet or page that contains them.