Skip to content
ToolQivo

SVG to Data URI

Convert SVG to a CSS-safe data URI without Base64 bloat.

Image Tools Reviews Free · no sign-up

The encoded version, decoded and drawn

The encoded SVG rendered back

Quick Tool Overview

SVG to Data URI produces the CSS-safe URL-encoded form as well as Base64, and shows both sizes — URL encoding is typically 25 to 30 percent smaller and stays readable, so a colour can be changed later without re-encoding. The markup is minified first, which usually saves more than the encoding choice does.

What it does
Encodes SVG for inlining in CSS
You give it
SVG markup or a file
You get back
A data URI and a background rule
Best for
Inlining icons and patterns in stylesheets
Image Tools Free, unlimited use No sign-up Runs in your browser

About the SVG to Data URI

Inlining an SVG in CSS removes a request entirely, and almost everyone does it with Base64 — which is the wrong choice.

SVG is text, so it can be URL-encoded instead, escaping only the handful of characters that would break a CSS url() value. The result is typically 25 to 30 percent smaller than Base64 and stays readable, so a colour can be changed later without re-encoding the whole thing. Both are produced here with their sizes side by side. The minifier runs first, since stripping editor metadata usually saves more than the encoding choice does.

Key features of the SVG to Data URI

URL encoding, not just Base64

Typically 25 to 30 percent smaller, because SVG is text and Base64 adds a third for nothing.

Stays editable

Fill values are still readable in the URL-encoded string, so a colour change is a find and replace.

Minified first

Editor metadata is stripped before encoding, which usually saves more than either encoding choice.

Both sizes shown

The two encodings side by side, so the smaller one is obvious rather than assumed.

Rendered back

The encoded version is decoded and drawn, so a broken escape shows immediately.

How to use the SVG to Data URI

  1. 1

    Paste the SVG

    Or load a file. It is minified first.

  2. 2

    Compare the encodings

    URL-encoded and Base64, with the size of each.

  3. 3

    Take the CSS

    A complete background-image rule, or just the URI.

  4. 4

    Check the preview

    The encoded version is rendered back, so a broken escape is visible.

Frequently asked questions

Because SVG is text and Base64 adds 33 percent for nothing. URL encoding only escapes the few characters CSS cannot take, and comes out 25 to 30 percent smaller.

Reviews of the SVG to Data URI

What people who use the SVG to Data URI think of it. Reviews come from visitors and are posted as written.

No ratings yet

Yours would be the first.

  • 5 0 reviews rated 5 stars
  • 4 0 reviews rated 4 stars
  • 3 0 reviews rated 3 stars
  • 2 0 reviews rated 2 stars
  • 1 0 reviews rated 1 star

Write a review

Used this tool? Your rating helps the next person decide.

Your rating

Plain text only — links, email addresses and HTML are not accepted. Your name and review are shown publicly; nothing else is collected. See the privacy policy.

0 reviews

Newest first

No reviews yet

Be the first to rate the SVG to Data URI. It takes half a minute and no account.

Write the first review

More image tools