SVG to data URI converter

Paste an SVG or open a file and get a data URI to use as a CSS background-image or an <img> src: URL-encoded, which is smaller, or base64.

Runs in your browser, nothing is uploaded

This box uses the URL-encoded data URI as its CSS background-image, so what you see is what the snippet draws.

Snippets use

Have a PNG or JPG? Vectorize it

SVG.new traces PNG, JPG and WebP images into SVG paths you can edit, recolor and download. Your first conversion needs no account.

Convert PNG to SVG

Do this from Claude Code or Codex

Your agent can paste a data URI into a stylesheet already. Add the SVG.new MCP server and Claude Code or Codex can also make the SVG first, from a PNG, JPG or WebP in your repo, and recolor it to match.

Claude CodeCodex

How to use an SVG as a data URI

  1. 1

    Paste the SVG or open the file

    Paste the markup or drop an .svg file on the code box. Small, simple SVGs such as icons, arrows and patterns make the best data URIs.

  2. 2

    Copy the data URI or a snippet

    The URL-encoded data URI is the smaller one. The CSS and <img> snippets use whichever encoding you pick, and the <img> tag gets the width and height of your SVG.

  3. 3

    Paste it into your CSS or HTML

    Keep the double quotes around the URI in url("…") and src="…"; the URI itself uses single quotes inside.

URL-encoded or base64?

Base64 turns every 3 bytes of the SVG into 4 characters, so the data URI is about 33% larger than the file, and gzip compresses it less well than the plain text. URL-encoding leaves the SVG readable and replaces only the characters that would break the URL or the CSS string: <, >, #, % and a few more. Spaces, =, : and / stay as they are, because browsers accept them in a data URI.

Use base64 when a tool or a framework only accepts base64. Otherwise the URL-encoded version is smaller and you can still read and edit it.

Large or detailed SVGs are better as separate files, which the browser can cache. Shrink the SVG with the SVG optimizer before you convert it; for React, the SVG to JSX converter makes a component instead.

Questions about SVG data URIs

Is a URL-encoded SVG data URI smaller than base64?
Usually. Base64 turns every 3 bytes into 4 characters, so it is about a third larger than the SVG. URL-encoding keeps the SVG as text and escapes only the characters a URL cannot hold, such as <, >, # and %, and it also compresses better with gzip. The tool shows both sizes for your SVG.
Why are the double quotes changed to single quotes?
So the data URI can sit inside url("…") in CSS and inside src="…" in HTML without more escaping. Only the quotes around attribute values change. Any other double quote, such as one in your text, is percent-encoded as %22, so the picture stays the same.
Can I change the color of an SVG background image with CSS?
Not with fill or color: a background image is drawn on its own and does not see your page’s CSS. Use the CSS mask snippet instead. The SVG becomes a mask and background-color paints it, so currentColor makes it follow the text color. Or change the fill in the SVG before you convert it.
Do I need ;charset=utf-8 or ;utf8 in the data URI?
No. Characters outside ASCII are percent-encoded as UTF-8 bytes, which is what an SVG file is read as by default. ;utf8 is not a valid parameter anyway; browsers just ignore it.
Is my SVG uploaded?
No. The data URIs are made in your browser, and the SVG never leaves your computer.

More free SVG tools

All three tools run in your browser. For turning images into SVG, see the image to SVG converter and the API docs.