SVG to Data URI Converter
Paste SVG markup to create a compact data:image/svg+xml URI for CSS or HTML, or decode an SVG data URI back to markup.
Runs locally in your browser. This tool does not upload your input.
Convert SVG markup to a CSS/HTML-safe data URI and back.
How to convert SVG to a Data URI
Encode SVG markup into a Data URI for CSS or HTML, or decode an existing SVG Data URI back to markup.
What it is for
SVG Data URIs are useful for small inline icons, CSS backgrounds, and compact prototypes.
Two-way conversion
- Paste SVG markup to encode it.
- Paste an SVG Data URI to decode it.
- Copy the result for CSS or HTML.
Keep it small
Data URIs work best for small SVGs. Large illustrations are usually easier to maintain as separate files.
Local conversion
SVG markup and Data URIs are converted locally and are not uploaded.
SVG Data URI FAQ
- Can I use the result in CSS?
- Yes. The encoded output is ready for CSS url(...) usage or HTML attributes.
- Does it sanitize SVG?
- No. It converts text only, so review SVGs from untrusted sources before using them.
- Can it decode any Data URI?
- It is focused on SVG Data URIs, not arbitrary file formats.