Convert SVG string to base64

Question

I'm looking to convert an SVG string into its base64 format while trying to avoid having to create an element node.

The purpose of this is to create a downloadable link using the <a> tag

Here's the SVG (example):

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1500" height="1500" viewBox="0 0 1500 1500" xml:space="preserve">
<desc>Created with Fabric.js 3.6.3</desc>
<defs>
</defs>
<g transform="matrix(1 0 0 1 25.5 300.5)"  >
<rect style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,91,109); fill-rule: nonzero; opacity: 1;"  x="-25" y="-150" rx="0" ry="0" width="50" height="300" />
</g>
<g transform="matrix(1 0 0 1 50.5 50.5)"  >
<rect style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,91,109); fill-rule: nonzero; opacity: 1;"  x="-50" y="-50" rx="0" ry="0" width="100" height="100" />
</g>
<g transform="matrix(1 0 0 1 950.5 25.5)"  >
<rect style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,91,109); fill-rule: nonzero; opacity: 1;"  x="-550" y="-25" rx="0" ry="0" width="1100" height="50" />
</g>
<g transform="matrix(1 0 0 1 350.5 250.5)"  >
<circle style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,91,109); fill-rule: nonzero; opacity: 1;"  cx="0" cy="0" r="50" />
</g>
<g transform="matrix(1 0 0 1 700.5 1050.5)"  >
<rect style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,91,109); fill-rule: nonzero; opacity: 1;"  x="-50" y="-50" rx="0" ry="0" width="100" height="100" />
</g>
</svg>

Answer 1

You can do using URL.createObjectURL()

var svg = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1500" height="1500" viewBox="0 0 1500 1500" xml:space="preserve"><desc>Created with Fabric.js 3.6.3</desc><defs></defs><g transform="matrix(1 0 0 1 25.5 300.5)"  ><rect style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,91,109); fill-rule: nonzero; opacity: 1;"  x="-25" y="-150" rx="0" ry="0" width="50" height="300" /></g><g transform="matrix(1 0 0 1 50.5 50.5)"  ><rect style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,91,109); fill-rule: nonzero; opacity: 1;"  x="-50" y="-50" rx="0" ry="0" width="100" height="100" /></g><g transform="matrix(1 0 0 1 950.5 25.5)"  ><rect style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,91,109); fill-rule: nonzero; opacity: 1;"  x="-550" y="-25" rx="0" ry="0" width="1100" height="50" /></g><g transform="matrix(1 0 0 1 350.5 250.5)"  ><circle style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,91,109); fill-rule: nonzero; opacity: 1;"  cx="0" cy="0" r="50" /></g><g transform="matrix(1 0 0 1 700.5 1050.5)"  ><rect style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,91,109); fill-rule: nonzero; opacity: 1;"  x="-50" y="-50" rx="0" ry="0" width="100" height="100" /></g></svg>`;
// convert svg to blob url
var url = URL.createObjectURL(new Blob([svg], {type:"image/svg+xml;charset=utf-8"}));
// add the url to the a.href
document.querySelector('#download').href = url;

<a id="download" download="mysvg.svg">download svg</a>