innerHTML workaround for SVG

A dirty trick for SVG

HTML

<html>
    
    <body>
        <svg id="svgcanvas" style="fill: yellow"></svg>
    </body>

</html>

JavaScript

var twocircles = '<circle cx="20" cy="20" r="10" stroke="black" stroke-width="2"></circle> <circle cx="50" cy="20" r="10" stroke="black" stroke-width="2" fill="green"></circle>'

// Create a dummy receptacle
var receptacle = document.createElement('div');

// Wrap the svg string to a svg object (string)
var svgfragment = '<svg>' + twocircles + '</svg>';

// Add all svg to the receptacle
receptacle.innerHTML = '' + svgfragment;
//alert(SVGElement)

// Splice the childs of the SVG inside the receptacle to the SVG at the body
Array.prototype.slice.call(receptacle.childNodes[0].childNodes).forEach(function (el) {    document.getElementById('svgcanvas').appendChild(el)})