Niko Lang Niko Lang - 6 months ago 70
Javascript Question

Convert inline SVG to Base64 string

I want to send an inline SVG image to a PHP script to Convert it to PNG with Imagick. For that I have to know how to get a base64 String out on an inline SVG. For canvas objects its a simple ".toDataURL()" but that doesn't work with inline SVGs, because its not a global function of elements.

test = function(){
var b64 = document.getElementById("svg").toDataURL();
alert(b64);
}


http://jsfiddle.net/nikolang/ccx195qj/1/

But how to do it for inline SVGs?

Answer

Use XMLSerializer to convert the DOM to a string

var s = new XMLSerializer().serializeToString(document.getElementById("svg"))

and then btoa can convert that to base64

var encodedData = window.btoa(s);

Just prepend the data URL intro i.e. data:image/svg+xml;base64, and there you have it.