SVG Data URI converter

Convert SVG to Data URI, Base64 and Encoded URI Online

Generate three common Data URI formats from the same SVG: minified SVG URI, Base64 URI, and encodeURIComponent URI.

Convert SVG to Data URIThe URI panel opens with all three formats visible.

Embed an SVG icon inside CSS background-image.

Compare encoded and Base64 forms before shipping a snippet.

Copy a compact inline SVG URI for docs, prototypes, or small UI assets.

SVG Code

XML

Minified Data URI

Base64 Data URI

encodeURIComponent Data URI

SVG Code

XML

The preview strips scripts and inline event attributes, then renders SVG in a sandbox.

Paste SVG markup into the editor.

Preview the SVG to confirm it renders correctly.

Open the URI panel and copy the format that best fits your use case.

Three formats side by side

The URI panel shows Minified Data URI, Base64 Data URI, and encodeURIComponent Data URI in separate scrollable sections.

Data URIs are often used for small icons, CSS backgrounds, demos, and single-file prototypes.

Minified URI can be shorter for simple SVGs, while Base64 may be easier to move through systems that dislike reserved URL characters.

For CSS, encoded or minified SVG URIs are often readable and compact. Base64 can be safer in systems that escape URL characters unpredictably.

Large Data URIs can bloat CSS or HTML. Use them for small icons and simple graphics, not large illustrations.

Yes. The SVG is converted into each Data URI format in your browser.