Splice

SVG to data URI converter

Embed an SVG straight into CSS or HTML without a separate file. Get a compact URL-encoded data URI (usually smaller than base64 for SVG), a base64 version where you need one, and snippets ready to paste into a stylesheet or an <img> tag.

Loading the tool…

How to use it

  1. 1

    Drop an SVG or paste its code.

  2. 2

    Choose URL-encoded (smaller) or base64.

  3. 3

    Copy the data URI, the CSS background-image rule or the <img> tag.

Questions

URL-encoded or base64 — which should I use?

URL-encoded is usually smaller for SVG because the markup stays readable text; base64 inflates it by about a third. Use base64 only where a tool requires it.

Can I change the color of an SVG used as a background?

Not from CSS once it's a data URI — the colors are baked in. Recolor it first, or inline the SVG where it needs to follow the page's colors.

Is there a size limit?

Browsers accept very large data URIs, but big ones bloat your CSS and can't be cached separately. They suit small icons and patterns best.

More free SVG tools

Need more than one change?

The Splice editor edits SVGs visually — shapes, text, colors, layers — across many files at once, with the code in sync.

Open the editor