TinySandyFree Online Tools

SVG to Data URI Converter

Turn an SVG icon or pattern into a data URI you can drop straight into CSS, so the image travels inside the stylesheet with no extra request. The URL-encoded option escapes only the characters that need it, swaps double quotes for single ones and is usually much smaller than Base64; both versions come with a ready background-image rule and a byte count.

CSS & Frontend Runs in your browser

Convert SVG to a Data URI

Drag and drop an SVG file here, or click to browseOr paste the markup below.
Encoding

How to Use the SVG to Data URI

  1. Paste SVG markup or choose an .svg file.
  2. Choose URL-encoded or Base64 output and the CSS property you need.
  3. Check the preview and the size comparison.
  4. Copy the data URI or the complete CSS rule.

About This Tool

Front-end developers inlining small icons, checkmarks, arrows and background patterns in CSS, and email or widget authors who cannot rely on separate image files.

Input: SVG markup or .svg file  ·  Output: Data URI and CSS.

Features and Limitations

Features

  • Minimal URL encoding: only %, #, <, >, quotes, braces and other unsafe characters are escaped.
  • Collapses whitespace and comments-free line breaks to keep the URI short.
  • Adds the missing xmlns attribute, without which browsers will not draw an SVG used as an image.
  • Shows the original, URL-encoded and Base64 sizes side by side.

Limitations

  • Data URIs cannot be cached separately from the stylesheet, so large or frequently reused images are usually better as separate files.
  • An SVG used as a CSS image cannot load external files, fonts or scripts, and it cannot be styled from your page's CSS (use mask-image if you need to recolour it).
  • Very large SVGs (over a few kilobytes) make stylesheets slower to parse; optimise them first.
  • Processing happens on your device, so very large files depend on your browser's available memory.

Example

The 200-byte checkmark becomes url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' …%3E"); the Base64 version of the same icon is about 30 % larger.

Frequently Asked Questions

Is URL-encoding or Base64 better for SVG?

URL-encoding is usually smaller because SVG is text, and Base64 adds about 33 % overhead. Base64 is mainly useful where a tool or platform only accepts Base64 data URIs.

Why does my SVG not show up as a background?

The most common causes are a missing xmlns="http://www.w3.org/2000/svg" attribute and unescaped # characters in colours. This converter fixes both.

Can I change the icon colour with CSS?

Not directly: a background image is isolated from page styles. Either edit the colour in the SVG before converting or use the URI as a mask-image on an element with a background-color.

Should I optimise the SVG first?

Yes. Running it through the SVG Optimizer first removes editor metadata and extra precision, which shrinks the data URI too.

Related Tools

More like this: all CSS & Frontend tools, all Developer & Web tools or the TinySandy home page.