Zero Signup ToolsFree browser tools

Developer Tools

SVG to Data URI

Convert SVG markup to a CSS-safe URL-encoded data URI or base64 data URI. Live preview, byte-size comparison, and ready-to-paste CSS snippets.

SVG to data URI

Paste the contents of an .svg file, an inline <svg> element, or copy from a design tool. The xmlns attribute is added automatically when missing.

Try:

Encoded data URI

Pick the encoding you want. CSS URL-encoded is shorter and the modern default for CSS background-image. Base64 is the universal fallback.

data:image/svg+xml;utf8,...

data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%2322c55e%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E %3Cpolyline points=%2220 6 9 17 4 12%22/%3E %3C/svg%3E

Original SVG

198 B

UTF-8 size of the parsed SVG.

CSS URL-encoded

266 B

Including the data:image/svg+xml;utf8, prefix.

Base64-encoded

290 B

Including the data:image/svg+xml;base64, prefix.

CSS URL-encoded is 8% smaller than the base64 form for this SVG. That difference is transferred over the wire on every page load when the data URI lives in a stylesheet.

Live preview

SVG preview

Ready to paste

Drop these into your stylesheet or HTML directly. The data URI is already wrapped in the right quotes for each context.

CSS background-image

.icon {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%2322c55e%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E %3Cpolyline points=%2220 6 9 17 4 12%22/%3E %3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

HTML <img src>

<img src="data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%2322c55e%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E %3Cpolyline points=%2220 6 9 17 4 12%22/%3E %3C/svg%3E" alt="" />

Why CSS URL-encoded instead of base64

  • SVG markup is text. Base64 wraps every 3 bytes into 4 base64 characters, growing the file by about 33 percent. URL-encoding only touches the few characters that break CSS, so the data URI stays close to the original byte count.
  • The MIME type image/svg+xml;utf8 tells the browser the payload is text, not base64-decoded binary. Browsers accept this for SVG, but it does not work for raster images like PNG or JPG.
  • Wrapping the URI in url("...") (double quotes) is the safest pattern, because the encoder escapes every literal double quote inside the SVG and leaves single quotes intact for attribute values.
  • Keep base64 in your back pocket for legacy build pipelines, CMS fields that strip % characters, or systems that do not accept text-form data URIs.

What gets escaped

  • % is encoded first as %25. Otherwise every percent introduced by the other escapes would be re-encoded.
  • " becomes %22 so it cannot close the surrounding url() quotes.
  • < > # become %3C %3E %23. They confuse some CSS parsers when inside the URI.
  • & ? become %26 %3F. Safer in URIs that get pasted through XML processors or templating layers.
  • { } become %7B %7D. They are not strictly reserved, but a few CSS bundlers misread them as template placeholders.
  • Newlines, carriage returns, and tabs are collapsed to single spaces so the data URI is one line.

How to use

  1. Paste your SVG markup into the input area. Use the inline <svg> form rather than a JPG or PNG. Click a preset if you want to try the tool on a known good icon first.
  2. Watch the live error notice. If the SVG is malformed the message points at the issue. Otherwise the encoded data URI appears under the input.
  3. Switch between CSS URL-encoded (the modern default, shorter, recommended for CSS) and Base64 (the universal fallback for legacy pipelines).
  4. Use the preview toggles (Checker, Light, Dark) to verify the SVG renders correctly against the background you plan to use it on.
  5. Click Copy CSS to grab a complete background-image rule, or Copy HTML to grab an <img> tag. Paste into your stylesheet, component, or template.

About this tool

SVG to Data URI converts inline SVG markup into a ready-to-paste data: URI for CSS background-image, HTML img src, or any other place that accepts a data URI. The tool produces two encodings side by side. The CSS URL-encoded form uses the data:image/svg+xml;utf8 prefix and only percent-encodes the characters that genuinely break inside a CSS url("...") declaration (double quote, less than, greater than, hash, percent, ampersand, question mark, and curly braces), so the resulting URI is typically 25 to 40 percent shorter than the base64 equivalent for the same SVG. The base64 form uses the data:image/svg+xml;base64 prefix and is provided as the universal fallback for build pipelines, CMS fields, or templating systems that strip percent characters or cannot tolerate raw quotes in the URI. The SVG you paste is parsed with the browser's DOMParser so syntax errors are surfaced as a clean message before encoding, the xmlns attribute is added automatically when missing (CSS background-image rendering needs it), and a live preview renders directly from the encoded URI on a checkered, light, or dark background so what you see is exactly what you copy. A byte-size panel compares the original SVG, the CSS URL-encoded URI, and the base64 URI in real time, and the ready-to-paste section gives a complete CSS rule with the data URI already wrapped in double quotes inside url(), plus an HTML img tag using the same URI. Useful for inlining icons inside CSS files (eliminating an HTTP request per icon), shipping decorative SVG backgrounds without a sprite, working around CSP rules that block external image hosts, embedding logos in email signatures, and any time you want an SVG to ride along with your stylesheet or HTML instead of living as a separate file. Everything is generated locally in your browser. The SVG markup, the encoded data URI, the preview, and the byte counts never leave your device.

Free to use. Works in your browser. No signup, no login.

Related tools

You may also like

All tools
Developer

SVG Optimizer

Clean and minify SVG markup with editor-metadata removal, number rounding, and default-attribute stripping.

Open tool

Image

Image to Base64

Encode images as Base64 data URIs with CSS and HTML snippets.

Open tool

Image

Base64 to Image

Decode a Base64 string or data URL into a previewable, downloadable image.

Open tool

Developer

URL Encoder Decoder

Encode and decode percent-encoded URLs.

Open tool

Generator

CSS Gradient Generator

Linear, radial, and conic gradients with multi-stop editor and live preview.

Open tool

All toolsDeveloper Tools