SVG to Data URI Converter
Convert SVG markup to a URL-encoded or Base64 data URI for CSS, HTML and JavaScript. Instant conversion, entirely in your browser.
1 SVG input
2 Data URI output
Ready for CSS or HTMLYour file is processed on this device and never uploaded.
How it works
From input to output,
in a few clicks.
Embed small icons and illustrations directly in your CSS or HTML without another network request. Choose compact URL encoding for readable CSS or Base64 for broad compatibility.
- Paste your SVGAdd the complete SVG markup, including its opening and closing svg tags.
- Choose an encodingURL encoding is usually smaller for SVG; Base64 is useful when your workflow requires it.
- Copy the data URIUse the result as a CSS background, image source, or anywhere data URIs are supported.
Good to know
Frequently asked questions
Should I use URL encoding or Base64 for SVG?
URL-encoded SVG is typically smaller and easier to read than Base64. Base64 can be helpful for systems that specifically expect it, but it usually increases the payload size.
Can I use an SVG data URI in CSS?
Yes. Wrap the generated URI in url("…") and use it as a background-image, list-style-image, cursor, or another CSS image value.
Is my SVG uploaded for conversion?
No. Encoding and preview generation run locally in your browser. Your SVG markup is never sent to SVGMod or any other server.