Last updated
Base64 to SVG Decoding
SVG images are often encoded as Base64 data URIs for embedding in CSS or HTML.
Decoding a Base64 SVG data URI gives you back the original SVG XML source,
which you can then edit, optimize, or save as a standalone .svg file.
Base64-encoded SVGs are common in icon libraries, CSS background images, and
inline style attributes.
Data URI Format for SVG
Text
Base64 SVG data URI:
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==
URL-encoded SVG data URI:
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3EDecoding in JavaScript
JavaScript
function base64ToSvg(input) {
// Handle data URI format
let base64 = input.trim();
if (base64.startsWith('data:')) {
const parts = base64.split(',');
if (parts[0].includes(';base64')) {
base64 = parts[1];
} else {
// URL-encoded, not base64
return decodeURIComponent(parts[1]);
}
}
// Decode base64 to SVG string
try {
return decodeURIComponent(escape(atob(base64)));
} catch {
return atob(base64); // fallback for ASCII-only SVGs
}
}
// Example
const dataUri = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgZmlsbD0iIzM0OThEQiIvPjwvc3ZnPg==';
console.log(base64ToSvg(dataUri));
// <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="#3498DB"/></svg>