Convert SVG to a data URI for CSS and HTML
Convert SVG code into an optimized data URI (usable in CSS or HTML), in your browser.
URL-encoded mode yields a shorter data URI than Base64 for SVG.
🔒 100% client-side — no data sent
Convert your SVG code into an optimized data URI, ready to embed in CSS or HTML. You avoid an extra network request by inlining the image directly in your stylesheet. The conversion runs 100% in the browser, with no file upload.
What is it for?
- ▸ Embed an SVG icon as a CSS background-image without an external file
- ▸ Reduce the number of HTTP requests on a web page
- ▸ Inline a small logo directly in a src attribute
- ▸ Optimize and encode an SVG for an email or a component
FAQ
What is a data URI for an SVG?
It is a string that encodes the whole image directly in the URL, in the form data:image/svg+xml. It lets you display the SVG without a separate file, by inserting it in CSS or HTML.
Should I encode in UTF-8 or base64?
For SVGs, UTF-8 encoding (with escaped characters) is often lighter and more readable than base64. The tool produces an optimized version you can paste as-is into your CSS.
Is my SVG code uploaded anywhere?
No, the encoding happens entirely in your browser. Your SVG is never sent to or stored on a server.