SVG to Base64 / CSS Converter

New

Convert SVG to a data URI for CSS backgrounds, masks and HTML. Paste SVG code or drop an .svg file, minify it, and choose URL-encoding or Base64. Copy a ready-made CSS background, a recolorable CSS mask, an <img> tag or the plain data URI, and see which encoding is smaller. Paste a data URI to decode it back to SVG. Everything runs locally in your browser.

SVG code or data URI

Encoding

Minify SVG (remove comments, editor data and whitespace)

How to embed an SVG in CSS

Paste the SVG code, or drop or open an .svg file.
Keep Minify SVG on to remove comments, editor data and whitespace.
Choose the encoding. URL-encoding is usually smaller for SVG.
Pick the output, such as CSS background or CSS mask, and copy it.

.icon {
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E…%3C/svg%3E") no-repeat center / contain;
}

URL-encoded or Base64?

	URL-encoded	Base64
Size	Usually smaller: most characters stay as they are	About 33% larger than the SVG
Readable	Yes, you can still read and edit the SVG	No
Gzip compression	Compresses well	Compresses poorly
Works in	All modern browsers	All browsers

Base64 encodes every 3 bytes as 4 characters. URL-encoding only escapes the characters CSS and HTML need, such as <, >, # and %, and this tool also turns double quotes into single quotes so the data URI fits inside url("…"). Use Base64 when another tool or system requires it.

Recolor an SVG icon with CSS mask

An SVG in background-image keeps its own colors. To give a one-color icon the current text color, or change it on hover, use it as a mask instead and set the color with background-color:

.icon {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,…") no-repeat center / contain;
  mask: url("data:image/svg+xml,…") no-repeat center / contain;
}
.icon:hover {
  background-color: #3273dc;
}

What the minifier removes

The XML declaration (<?xml …?>), doctype and comments
<metadata> and data added by editors such as Inkscape, Sodipodi, Illustrator, Sketch and Figma
Unused attributes such as version, xml:space and data-name
Whitespace between tags. Text inside <text> elements is kept as written.

Paths, shapes, styles and numbers are not changed, so the image looks exactly the same. The xmlns attribute is added when it is missing, because SVG in a data URI does not work without it.

Limits of SVG in CSS and img

When an SVG is used as an image, a CSS background or a mask, browsers draw it as a static picture:

Scripts and event handlers don't run, and links inside the SVG don't work.
External files are not loaded: linked images, fonts and stylesheets. Embed them in the SVG instead.
The SVG can't be styled by the page's CSS. Use a CSS mask to change a one-color icon's color, or inline the SVG in the HTML.
Add a viewBox so the SVG scales with background-size and mask-size.

Frequently asked questions

What is a data URI?

A data URI puts a file's content directly in a URL, starting with data: and the file type, such as data:image/svg+xml,…. The browser doesn't make a separate request for it, which suits small icons used in CSS.

Should I inline every SVG as a data URI?

No. Data URIs are best for small icons and backgrounds used on many pages. Larger images are better as separate files, which the browser can cache on their own and load in parallel, and which keep your CSS small.

How do I convert a data URI back to SVG?

Paste the data URI, or a CSS rule or <img> tag that contains it, into the input. The tool decodes it and shows the SVG code, which you can copy, download or encode again.

Why does my SVG show as a broken image?

Usually the SVG is not valid XML, for example an unclosed tag or an & that is not written as &, or the # in a color was not encoded. The tool reports XML errors and encodes all special characters for you.

Is my SVG uploaded anywhere?

No. Converting, minifying and decoding run in your browser, and the file is never sent to a server.

Base64 encoder and decoder — Encode and decode any text or file as Base64.
URL encoder and decoder — Percent-encode text for URLs and query strings.
CSS box shadow generator — Create layered box shadows with sliders and presets.
CSS gradient generator — Create linear, radial, and conic gradients with a live preview.