Encode SVG markup as Base64 or decode an SVG Base64 value back into readable XML—privately in your browser.
LOCAL BROWSER UTILITY
Your SVG never leaves this device. The 1 MB limit keeps conversion responsive and discourages embedding oversized artwork.
Keyboard friendly: use Ctrl/Cmd + V to paste, Ctrl/Cmd + A to select all, and Ctrl/Cmd + C to copy selected text.
Paste markup, choose a file, or drop an SVG below.
Raw Base64 and complete SVG data URIs are detected automatically.
PREVIEW-SAFE VERSION
Conversion input remains untouched. The image preview uses a separate sanitized copy with active content and unsafe references removed.
A preview-safe version will appear after a complete SVG is detected.
Enter a complete SVG to see a preview.
OUTPUT
Encode SVG markup or decode a Base64 value to create copyable output.
ABOUT THIS TOOL
The SVG to Base64 Converter turns readable SVG markup into a Base64 value or data URI, and decodes existing SVG Base64 back into editable XML. It handles Unicode text correctly and keeps both directions together in one focused workspace.
It helps frontend developers embedding small icons, designers handing off vector assets, email developers working within restrictive templates, and anyone inspecting an unfamiliar SVG data URI without installing a package or command-line tool.
Encoding converts the SVG’s UTF-8 bytes into Base64 rather than applying btoa directly to JavaScript text, which would fail for many non-ASCII characters. Decoding reverses those bytes with a strict UTF-8 decoder, checks the size limit, and confirms that the result contains an SVG root before offering it as markup or a download.
Conversion happens entirely in your browser. Pasted markup, decoded data, and selected SVG files are not sent to the server, saved to an account, or added to Web Doctor history.
Base64 represents the UTF-8 bytes of an SVG document with a restricted set of text characters. The result can travel inside a data URI, CSS declaration, or HTML image source without referring to a separate file.
Paste complete SVG markup or choose an .svg file, then select Encode SVG. Copy raw Base64 when another system supplies the data-URI wrapper, or copy the complete data URI when you need a ready-to-use source.
Switch to Base64 → SVG and paste either raw Base64 or a complete SVG data URI. Decode it, review the readable XML, then copy the exact SVG source or download it as an .svg file.
Base64 is widely supported and predictable, but it usually makes SVG text larger. URL encoding keeps much of the SVG readable and can produce a smaller CSS data URI. Compare both advanced outputs in the context where you will use them.
Inline data is useful for small, self-contained graphics that belong to one component or document. Prefer a normal SVG file when artwork is large, reused across pages, changed independently, or should benefit from browser caching.
No. Encoding, decoding, size calculations, formatting, and preview preparation run locally in your browser. Your SVG content is not submitted to this site or stored in an account.
Typical problems include copying raw Base64 where a complete data URI is expected, broken Unicode from naive btoa() conversion, unescaped # characters in CSS, incomplete SVG roots, and embedding files that are too large to be useful inline.
HOW TO USE IT
Paste complete SVG markup or choose a local .svg file; the source should include an <svg> root element.
Select Encode to produce plain Base64 and a ready-to-use data:image/svg+xml;base64 URI.
For the reverse direction, paste either plain Base64 or a complete SVG Base64 data URI into the Decode field.
Review the decoded markup, copy only the format your implementation needs, and test the resulting asset in its actual context.
COMMON PROBLEMS
Direct btoa() calls cannot represent arbitrary Unicode. This tool encodes UTF-8 bytes so text, symbols, and international characters survive the round trip.
Some APIs want only the encoded payload; CSS and HTML image sources often accept the data URI. Copy the output that matches the receiving field.
Base64 increases payload size and prevents an asset from being cached independently. Prefer a normal optimized SVG file when the asset is large, shared, or frequently reused.