SVGBase

SVG to Base64 Converter

Encode SVG as a Base64 Data URI or plain Base64. Preview your artwork, copy HTML or CSS, and download the result. Free and local, with no sign-up.

SVG source

Your SVG content is preserved during encoding.

Base64 output
Local processing · No uploads · 256 KB SVG limit

Data URI includes the image type and base64 prefix; Base64 only has no prefix. Downloads match the selected output. The HTML example is decorative (alt=""); add meaningful alt text when the image conveys information. The CSS rule has an adjustable 240px example height.

Encoded SVG preview

Preview background

Add SVG to encode it as Base64 and preview the image.

This preview displays the encoded SVG in an isolated image context. Scripts and external resources are blocked. Preview background colors are not exported.

Next steps

All SVG tools

How to convert SVG to Base64

  1. 1

    Add your SVG

    Paste SVG markup, upload or drop a .svg file, or try the Unicode example. Conversion happens in your browser.

  2. 2

    Choose the result you need

    Start with the complete Data URI for an image source. Choose Base64 only if your API or configuration requires the encoded payload without a prefix.

  3. 3

    Copy or download

    Copy the selected result or download its matching .txt, .html or .css file. Each conversion verifies that decoding returns the same UTF-8 SVG text.

Data URI, plain Base64, HTML or CSS

Complete Data URI

Includes data:image/svg+xml;charset=utf-8;base64, before the encoded payload. Use the full value where an image URL is expected.

Base64 only

The encoded SVG bytes without an image type or data: prefix. Use this only when the destination explicitly asks for plain Base64.

Ready-to-use snippets

HTML wraps the Data URI in an img tag. CSS provides a complete .svg-background rule with an example height, sizing and positioning.

Use a Base64 SVG in HTML and CSS

These snippets use the same Unicode example as the converter. The preview uses the CSS shown here; decoding either image URL returns the original SVG.

HTML

<img src="data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNDAiIGhlaWdodD0iMTYwIiB2aWV3Qm94PSIwIDAgMjQwIDE2MCI+CiAgPGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJjYXJkIj48c3RvcCBzdG9wLWNvbG9yPSIjNDI2ZTYxIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMjAzZjM2Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+CiAgPHJlY3QgeD0iMTIiIHk9IjEyIiB3aWR0aD0iMjE2IiBoZWlnaHQ9IjEzNiIgcng9IjI0IiBmaWxsPSJ1cmwoI2NhcmQpIi8+CiAgPHBhdGggZD0ibTQ1IDYwLTE3IDIwIDE3IDIwbTE1MC00MCAxNyAyMC0xNyAyMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZjBkN2EwIiBzdHJva2Utd2lkdGg9IjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogIDx0ZXh0IHg9IjEyMCIgeT0iNzYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZpbGw9IiNmZmYiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjIwIj7kvaDlpb0gwrcgQ2Fmw6k8L3RleHQ+CiAgPHRleHQgeD0iMTIwIiB5PSIxMDQiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZpbGw9IiNmMGQ3YTAiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjE0Ij5TVkcgJmFtcDsgQmFzZTY0PC90ZXh0Pgo8L3N2Zz4=" alt="" />

Encoded SVG preview

CSS

.svg-background {
  width: 100%;
  height: 240px;
  background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNDAiIGhlaWdodD0iMTYwIiB2aWV3Qm94PSIwIDAgMjQwIDE2MCI+CiAgPGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJjYXJkIj48c3RvcCBzdG9wLWNvbG9yPSIjNDI2ZTYxIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMjAzZjM2Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+CiAgPHJlY3QgeD0iMTIiIHk9IjEyIiB3aWR0aD0iMjE2IiBoZWlnaHQ9IjEzNiIgcng9IjI0IiBmaWxsPSJ1cmwoI2NhcmQpIi8+CiAgPHBhdGggZD0ibTQ1IDYwLTE3IDIwIDE3IDIwbTE1MC00MCAxNyAyMC0xNyAyMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZjBkN2EwIiBzdHJva2Utd2lkdGg9IjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogIDx0ZXh0IHg9IjEyMCIgeT0iNzYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZpbGw9IiNmZmYiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjIwIj7kvaDlpb0gwrcgQ2Fmw6k8L3RleHQ+CiAgPHRleHQgeD0iMTIwIiB5PSIxMDQiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZpbGw9IiNmMGQ3YTAiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjE0Ij5TVkcgJmFtcDsgQmFzZTY0PC90ZXh0Pgo8L3N2Zz4=");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

For HTML, replace the empty alt attribute when the image needs a text alternative. For CSS, add class="svg-background" to an element and change the example height to fit your layout. Your website must allow data: images in its img-src policy (or default-src fallback).

SVG to Base64 questions

What is the difference between a Data URI and plain Base64?

A Data URI contains the image media type and a base64 marker, followed by the encoded SVG. Plain Base64 contains only the payload after the comma. Use the complete Data URI for an HTML image src or CSS url(); use the payload alone only if the destination requests it.

Will Chinese text, accents and special characters survive?

Yes. The converter encodes UTF-8 bytes rather than treating Unicode text as one-byte characters. It decodes the result and checks an exact match before enabling export. Text appearance still depends on the fonts available on the viewing device.

Does Base64 compress my SVG or make every page faster?

No. Base64 is an encoding, not compression: three input bytes generally become four Base64 characters, plus padding and a Data URI prefix. It can be convenient for small embedded images. A separate SVG file may be better for large or repeatedly used artwork because it can be cached independently. Save SVG code as a separate file.

Are styles, gradients, filters and scripts preserved?

Encoding preserves the authored SVG text, including comments, styles and filters. The preview treats it as an isolated image: scripts do not run and external resources are blocked. Encoding does not sanitize a file for later inline execution; use trusted SVG when embedding markup directly.

Why is the encoded image missing or a different color?

Use the full Data URI where a URL is required, ensure the SVG namespace is present, and allow data: images in your website CSP. CSS backgrounds also need a nonzero element size. A background image has its own color context, so currentColor does not inherit your element color. Open SVG to CSS for background controls.

Is the converter free, and is my SVG uploaded?

It is free and requires no account. Encoding, verification, preview and downloads run locally in your browser. UTF-8 SVG up to 256 KB is accepted, with bounded XML complexity. DTDs and entity declarations are rejected.