How to convert a HTML SVG Node to Base64 with JavaScript in the browser

Although usually, we shouldn't rely on this kind of logic for production stuff, because there's always a better alternative to prevent you from doing this, sometimes this doesn't depend on you but on third party stuff. Whether you are scrapping content from the web or creating an automatization script that modifies some vectorized image, knowing this simple trick of how to convert a rendered SVG node in the browser to a picture in base64 format doesn't harm you.

Consider the following example of a SVG element rendered in the DOM of the browser, this element has an id that makes it part of the dom, namely mySvgElement:

<svg id="mySvgElement" xmlns="http://www.w3.org/2000/svg" height="179.2" width="179.2">
	<g>
		<path transform="scale(0.1,-0.1) translate(0,-1536)" d="M1536 224v704q0 40 -28 68t-68 28h-704q-40 0 -68 28t-28 68v64q0 40 -28 68t-68 28h-320q-40 0 -68 -28t-28 -68v-960q0 -40 28 -68t68 -28h1216q40 0 68 28t28 68zM1664 928v-704q0 -92 -66 -158t-158 -66h-1216q-92 0 -158 66t-66 158v960q0 92 66 158t158 66h320 q92 0 158 -66t66 -158v-32h672q92 0 158 -66t66 -158z" style="&#10;    fill: #03a9f4;&#10;"/>
	</g>
</svg>

 COPY SNIPPET

Rendered in the browser it will display a picture like this:

In order to convert this element to its base64 representation, we would simply need the DOM element and the help of the XMLSerializer class. The XMLSerializer interface provides the serializeToString() method to construct an XML string representing a DOM tree. In our case, with the mentioned element we would just do:

// 1. Keep a DOM reference to the SVG element
var SVGDomElement = document.getElementById("mySvgElement");

// 2. Serialize element into plain SVG
var serializedSVG = new XMLSerializer().serializeToString(SVGDomElement);

// 3. convert svg to base64
var base64Data = window.btoa(serializedSVG);
// The generated string will be something like: 
// PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdm.........

// If you want to display it in the browser via URL:
console.log("data:image/svg+xml;base64," + result);

 COPY SNIPPET

Note that the serialized string generated by the XMLSerializer will return the plain SVG, so encoded into base64, we would obtain the plain base64 data:

PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTc5LjIiIHdpZHRoPSIxNzkuMiI+Cgk8Zz4KCQk8cGF0aCB0cmFuc2Zvcm09InNjYWxlKDAuMSwtMC4xKSB0cmFuc2xhdGUoMCwtMTUzNikiIGQ9Ik0xNTM2IDIyNHY3MDRxMCA0MCAtMjggNjh0LTY4IDI4aC03MDRxLTQwIDAgLTY4IDI4dC0yOCA2OHY2NHEwIDQwIC0yOCA2OHQtNjggMjhoLTMyMHEtNDAgMCAtNjggLTI4dC0yOCAtNjh2LTk2MHEwIC00MCAyOCAtNjh0NjggLTI4aDEyMTZxNDAgMCA2OCAyOHQyOCA2OHpNMTY2NCA5Mjh2LTcwNHEwIC05MiAtNjYgLTE1OHQtMTU4IC02NmgtMTIxNnEtOTIgMCAtMTU4IDY2dC02NiAxNTh2OTYwcTAgOTIgNjYgMTU4dDE1OCA2NmgzMjAgcTkyIDAgMTU4IC02NnQ2NiAtMTU4di0zMmg2NzJxOTIgMCAxNTggLTY2dDY2IC0xNTh6IiBzdHlsZT0iJiMxMDsgICAgZmlsbDogIzAzYTlmNDsmIzEwOyIvPgoJPC9nPgo8L3N2Zz4=

 COPY SNIPPET

If you want to display it in the browser using the Data URL representation, you would need to add as prefix to the generated data "data:image/svg+xml;base64,":

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTc5LjIiIHdpZHRoPSIxNzkuMiI+Cgk8Zz4KCQk8cGF0aCB0cmFuc2Zvcm09InNjYWxlKDAuMSwtMC4xKSB0cmFuc2xhdGUoMCwtMTUzNikiIGQ9Ik0xNTM2IDIyNHY3MDRxMCA0MCAtMjggNjh0LTY4IDI4aC03MDRxLTQwIDAgLTY4IDI4dC0yOCA2OHY2NHEwIDQwIC0yOCA2OHQtNjggMjhoLTMyMHEtNDAgMCAtNjggLTI4dC0yOCAtNjh2LTk2MHEwIC00MCAyOCAtNjh0NjggLTI4aDEyMTZxNDAgMCA2OCAyOHQyOCA2OHpNMTY2NCA5Mjh2LTcwNHEwIC05MiAtNjYgLTE1OHQtMTU4IC02NmgtMTIxNnEtOTIgMCAtMTU4IDY2dC02NiAxNTh2OTYwcTAgOTIgNjYgMTU4dDE1OCA2NmgzMjAgcTkyIDAgMTU4IC02NnQ2NiAtMTU4di0zMmg2NzJxOTIgMCAxNTggLTY2dDY2IC0xNTh6IiBzdHlsZT0iJiMxMDsgICAgZmlsbDogIzAzYTlmNDsmIzEwOyIvPgoJPC9nPgo8L3N2Zz4=

 COPY SNIPPET

Which should produce now:

Happy coding !