svgsvgsvg.com

SVG to Data URI Converter

Paste SVG markup and get a data URI ready to use in CSS or HTML — no server, no upload.

Preview

SVG preview

Usage Examples

CSS background-image

.icon {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%0A%20%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2240%22%20fill%3D%22%23f97316%22%2F%3E%0A%3C%2Fsvg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

HTML img src

<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%0A%20%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2240%22%20fill%3D%22%23f97316%22%2F%3E%0A%3C%2Fsvg%3E" alt="" width="100" height="100">

What is an SVG data URI?

A data URI (also called a data URL) is a way to embed a file's contents directly in a URL string instead of linking to an external file. For SVG, the format is:

data:image/svg+xml,<encoded SVG here>

This lets you use an SVG as a CSS background-image, an <img> src, or a url() value in any context that accepts a URL — without making an extra HTTP request or managing a separate file.

URL-encoded vs Base64 — which should I use?

URL-encoded is shorter because SVG characters like <, >, and spaces are the only ones that need escaping. Smaller CSS files mean faster page loads. Use this for CSS and modern HTML.

Base64 encodes every byte, making the output roughly 33% larger, but it is required by some older tools, email clients, and frameworks that do not accept raw URL-encoded data URIs. Use base64 when a tool specifically asks for it.

Frequently Asked Questions

Why use a data URI instead of linking to an SVG file?+

Embedding the SVG as a data URI eliminates one HTTP request. For small icons and decorative shapes used in CSS, this reduces page load time and removes a dependency on an external file that could 404 or be blocked. The trade-off is that data URIs are not cached separately by the browser — if the same SVG is used in many places, an external file loaded once and cached is more efficient.

Does it work in all browsers?+

Yes. SVG data URIs are supported in all modern browsers and have been since IE9 (2011). Both the URL-encoded and base64 variants work in Chrome, Firefox, Safari, and Edge. Internet Explorer required the base64 form in some contexts; that is no longer a concern for almost all projects.

My SVG uses double quotes — does that matter?+

In URL-encoded data URIs embedded inside a CSS url("") value, double quotes inside the SVG must be percent-encoded as %22. This converter handles that automatically via encodeURIComponent. Alternatively, replace all double quotes in your SVG attributes with single quotes before encoding — both are valid XML.

Is my SVG sent to a server?+

No. All encoding happens in your browser using JavaScript. Your SVG markup never leaves your device.

Related Tools

SVG to CSS Background
Generate a complete CSS background-image rule from SVG markup — configure size, repeat, and position with live preview. Copy as a CSS class or inline style.
→
SVG Optimizer
Remove comments, metadata, and redundant attributes from SVG markup. Minify or format the result — no upload required.
→
SVG to PNG Converter
Export SVG markup as a PNG image at 1×, 2×, or 4× scale — retina-ready output with transparent or white background.
→

How to use

  • Paste your SVG markup into the input box — the data URI updates instantly.
  • Use the URL-encoded output for CSS background-image and modern HTML — it is shorter.
  • Use the Base64 output when a tool or email client specifically requires it.
  • Copy either output with the Copy button, or grab a ready-made CSS or HTML snippet from the Usage Examples section.