SVG to Base64

SVG to Base64 data URIs

SVG icons are small, sharp at any size and perfect for embedding. The SVG to Base64 converter takes SVG markup — pasted or uploaded — and encodes it into a data:image/svg+xml;base64,… URI or one of the other output formats, with a preview so you can see the graphic immediately.

Example

SVG input:

<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><circle cx="5" cy="5" r="4" fill="red"/></svg>

Data URI:

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCI+PGNpcmNsZSBjeD0iNSIgY3k9IjUiIHI9IjQiIGZpbGw9InJlZCIvPjwvc3ZnPg==

The CSS option wraps it as background-image: url("…");, a common way to use icons in stylesheets without extra requests.

Base64 or URL-encoded SVG?

Because SVG is text, there is an alternative to Base64: a URL-encoded data URI such as data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'…. It is often smaller, since Base64 always adds 33%, while URL encoding only affects a few characters, and it compresses better with gzip. Base64 is simpler and more robust, though: no worries about quotes, # characters in colours or line breaks. Choose Base64 when convenience matters and URL encoding when every byte counts.

Things to know about SVG data URIs

• The SVG must include xmlns="http://www.w3.org/2000/svg". Inline SVG in HTML works without it, but as an image it will not render.
• currentColor and page CSS do not apply inside an SVG used as an image; the graphic is isolated from the page. Use inline SVG if the icon must change colour with its text.
• Scripts and external resources inside the SVG are not run or loaded when it is used as an image, which also makes data-URI SVGs safer to display.
• Minify the SVG first — editors often add metadata, comments and excess precision that inflate the result.

Build tools can do this automatically: many CSS and bundler plugins inline small SVG files as data URIs during the build, which keeps your source files readable while still avoiding extra requests.

Recolouring a Base64 icon with a CSS mask

Since an SVG used as an image ignores currentColor, a common workaround is to use the data URI as a mask and let the element's background provide the colour:

.icon {
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i…") center / contain no-repeat;
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i…") center / contain no-repeat;
}

The shape comes from the SVG and the colour from the text around it, so the icon changes on hover or in dark mode like an icon font would. Only the shape's opacity matters in a mask, so the fill colour inside the SVG is irrelevant. Keep the prefixed -webkit-mask line for older Safari and Chromium versions.

Input handling

The input must contain an <svg> element; other text is rejected with a clear message. You can also upload an .svg file. Tidy the markup with the SVG Formatter or view it with the SVG Viewer; to go the other way, Base64 to Image decodes SVG data URIs too.

The conversion runs in your browser; your graphics are not uploaded.