Skip to content
Lizely

SVG to Base64 Converter

Encode complete Unicode SVG source as a UTF-8 Base64 data URL or decode that exact data URL back to text.

Privacy: your files never leave your device. All processing happens locally in your browser.

How to use

  1. 1.Choose encode or decode and paste a complete SVG document or matching Base64 data URL.
  2. 2.Run the conversion and inspect the full text result.
  3. 3.Copy the result and test it in the exact trusted destination with size and security policies.

About SVG to Base64 Converter

SVG to Base64 Converter turns a complete SVG text document into a data:image/svg+xml;base64 data URL and decodes that exact data URL form back to UTF-8 SVG text. Paste source with an svg root, choose Encode, and copy the result. For the reverse direction, paste a matching Base64 data URL and recover the original Unicode document. The tool handles ASCII, accented text, CJK characters, emoji, attributes, markup, and line breaks as UTF-8 bytes before Base64 encoding.

Base64 is a binary-to-text representation defined by RFC 4648. It does not compress data. Four Base64 characters normally represent three source bytes, so encoded output is usually about one third larger before the data URL prefix. SVG often compresses well with HTTP content encoding when served as a separate resource; embedding a large Base64 string can instead enlarge HTML or CSS, prevent independent caching, and make debugging harder. Measure the delivered result rather than assuming inline data is faster.

Unicode must be encoded as bytes before Base64. Directly applying a Latin-1-only browser function to a JavaScript string can fail or corrupt non-ASCII characters. This implementation uses TextEncoder for UTF-8, processes byte chunks to avoid a large argument list, and then applies Base64. Decoding reverses those steps with fatal UTF-8 validation, so malformed byte sequences produce an error instead of replacement characters and a falsely successful document.

The input check requires a complete svg root and closing tag after trimming an optional byte-order mark and surrounding whitespace. It is intentionally a structural boundary, not a full XML or SVG validator. Namespaces, element content, attributes, references, dimensions, paths, styles, and accessibility are not repaired. A syntactically accepted string may still be invalid SVG, render differently across browsers, or reference unavailable resources. Validate the document in its real consumer.

This tool never previews or executes the supplied SVG. That is a security boundary: SVG can contain scripts, event handlers, foreign content, links, external resources, filters, and other active behavior depending on how it is embedded and which content security policy applies. Base64 encoding does not sanitize or make active content trustworthy. Do not place untrusted output into an iframe, object, image context, CSS property, or DOM without a maintained sanitizer and an embedding policy designed for that context.

The decoder accepts only the exact data:image/svg+xml;base64, prefix. It does not guess plain Base64, URL-encoded SVG, alternate media type parameters, arbitrary data URLs, or whitespace-normalized payloads. A narrow contract prevents accidental decoding of unrelated data and keeps round-trip behavior testable. The 500,000-character source limit bounds memory and main-thread work, but the resulting data URL can still be large enough to exceed limits in browsers, databases, headers, QR codes, or build tools.

Eight external fixtures anchor RFC 4648 output for ASCII markup, two-byte, three-byte, and four-byte UTF-8 characters, attributes, newlines, nested markup, and namespace text. Additional tests round-trip a multilingual SVG and reject wrong prefixes, malformed documents, malformed Base64, and invalid UTF-8. Conversion and clipboard access stay in the current browser tab; no SVG or generated data URL is uploaded.

For reliable use, encode only content you own or trust, copy the complete data URL, and test it in the exact destination with the site's CSP and size budgets. Prefer a separately cached SVG file for larger reusable assets. If untrusted SVG must be displayed, use a maintained sanitization pipeline and strict serving headers; encoding alone provides no protection.

Methodology & sources

Validates a bounded complete svg-root text document, converts Unicode to UTF-8 with TextEncoder, Base64-encodes bytes in bounded chunks, and decodes with fatal UTF-8 validation. It never renders or sanitizes input; eight RFC 4648/UTF-8 fixtures lock output.

Frequently asked questions

Does Base64 encoding sanitize an SVG?
No. Encoding changes representation only. Scripts, event handlers, external references, and other active content remain potentially dangerous when decoded or embedded.
Why is the Base64 result larger than the SVG source?
Base64 normally expands bytes by roughly one third, plus the data URL prefix. It is not compression and can reduce caching efficiency.
Why does the decoder require an exact data URL prefix?
A narrow input contract prevents unrelated Base64 or media types from being interpreted as SVG and makes UTF-8 round trips deterministic.

Related tools

Developer Tools guides

View all