SVG to Base64 Converter

Encode SVG markup as Base64 — copy the plain string or the full data URI. Runs entirely in your browser.

SVG Markup

Preview

Base64 string(raw encoded data, no prefix)

PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmOTczMTYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cmVjdCB4PSIzIiB5PSIzIiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHJ4PSIyIi8+CiAgPHBhdGggZD0iTTMgOWgxOCIvPgogIDxwYXRoIGQ9Ik05IDIxVjkiLz4KPC9zdmc+

Base64 data URI(ready for CSS or HTML)

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmOTczMTYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cmVjdCB4PSIzIiB5PSIzIiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHJ4PSIyIi8+CiAgPHBhdGggZD0iTTMgOWgxOCIvPgogIDxwYXRoIGQ9Ik05IDIxVjkiLz4KPC9zdmc+

Usage Examples

CSS background-image

.icon {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmOTczMTYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cmVjdCB4PSIzIiB5PSIzIiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHJ4PSIyIi8+CiAgPHBhdGggZD0iTTMgOWgxOCIvPgogIDxwYXRoIGQ9Ik05IDIxVjkiLz4KPC9zdmc+");
  background-size: contain;
  background-repeat: no-repeat;
}

HTML img src

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmOTczMTYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cmVjdCB4PSIzIiB5PSIzIiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHJ4PSIyIi8+CiAgPHBhdGggZD0iTTMgOWgxOCIvPgogIDxwYXRoIGQ9Ik05IDIxVjkiLz4KPC9zdmc+" alt="" width="24" height="24">

How SVG Base64 encoding works

SVG markup is UTF-8 text. To produce a valid Base64 string, the text is first converted to a byte sequence using encodeURIComponent and unescape, then passed to btoa(). The result contains only letters, digits, +, /, and = padding — safe in any URL or attribute value without further escaping.

Frequently Asked Questions

What is SVG Base64 encoding?+

Base64 converts binary or text data into a string of printable ASCII characters. For SVG, the XML markup is encoded to bytes and then represented as a string containing only letters, digits, +, /, and = — safe to embed in URLs, CSS values, and HTML attributes without any characters that could break parsing.

When should I use the plain Base64 string vs the full data URI?+

Use the plain Base64 string when a tool, API, or email client explicitly asks for a base64-encoded SVG without the data: prefix. Use the full data URI in CSS background-image, HTML img src, and anywhere a URL is expected — browsers need the MIME type prefix to know how to interpret the data.

Is Base64 better than URL-encoding for SVG?+

Neither is strictly better. Base64 output is about 33% larger than the original SVG but contains no special characters and is safe in more contexts. URL-encoding is shorter and more efficient for CSS. For CSS background-image, URL-encoding is recommended; use Base64 only when a tool or context specifically requires it.

Is my SVG sent to a server?+

No. The encoding runs entirely in your browser using the built-in btoa() function. Your SVG markup never leaves your device.

Related Tools

SVG to Data URI Converter

Convert SVG markup to a data URI instantly — URL-encoded or Base64. Use in CSS or HTML with no upload required.

→

SVG to CSS Background

Generate a complete CSS background-image rule from SVG markup — configure size, repeat, and position with live preview. Copy as a CSS class or inline style.

→

SVG to PNG Converter

Export SVG markup as a PNG image at 1×, 2×, or 4× scale — retina-ready output with transparent or white background.

→

How to use

Paste your SVG markup — the Base64 output updates instantly.
Copy the plain Base64 string when a tool or API asks for encoded SVG without a prefix.
Copy the data URI to use directly in CSS background-image or HTML img src.