SVG to Data URI Transformer
Loading tool…
A data URI inlines an SVG in CSS or HTML so the browser does not make another request. Paste the SVG, copy the data:image/svg+xml URI, and use it in a background-image or an img src. Keep it for small icons. A large illustration belongs in a file so it can be cached on its own.
How to use the SVG to Data URI Transformer
- Paste clean SVG. Remove editor metadata and scripts first. The URI will contain whatever you paste.
- Convert. The result is a single URL-safe string. Quotes inside the SVG are escaped so the URI can sit inside a CSS url().
- Drop it into CSS. Use background-image: url("...") or an img src. If the stylesheet grows past a few kilobytes, switch back to an external file.
When it helps
- One-request icons. A handful of UI glyphs in a CSS file avoids a sprite request on first paint.
- HTML emails and isolated demos. Some templates cannot host extra files. A data URI keeps the image inside the document.
Common questions
Will this make my page faster?
It removes a request, but the bytes move into the CSS, which is often on the critical path. Inline only small SVGs.
Why did the icon disappear in CSS?
Unescaped # and quotes break url(). Use the converted string, not the raw SVG pasted into CSS.
Can I put a data URI in a Content-Security-Policy page?
Only if img-src or style-src allows data:. Otherwise the browser will block it.
Is the SVG optimized?
No. Optimize first, then convert, so you do not inline unused metadata.
Read the guide: SVG to Data URI Converter: Embed SVGs Inline Without HTTP Requests