I have a solution that takes the document.body of a page and renders it to an SVG. No modification or the like, just creating the image via the HTML of the page.

this.renderDocumentToImage(window.document, 1920, 1200, "image/svg+xml");

The inputs are the body, width, height, and image type.

The html will then be rendered to an image:

public renderDocumentToImage(doc: any, width:any, height:any, format:any) {
var svgData = '<svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '">'
    + '<foreignObject width="100%" height="100%">'
    + this.document2SvgXml(doc)
    + '</foreignObject>'
    + '</svg>';
var base64data = "data:image/svg+xml;base64," + btoa(svgData);
this.exportImage(base64data, width, height, format);
}

public document2SvgXml(htmlDoc:any) {
    // Set the xmlns namespace
    htmlDoc.documentElement.setAttribute('xmlns', htmlDoc.documentElement.namespaceURI);

    // Get XML
    var svcXml = (new XMLSerializer()).serializeToString(htmlDoc.body);
    return svcXml;
}

Full code https://jsfiddle.net/j67nqsme/

Now this works fine, except for shadow DOM/tree as this will not be available and not be included in the body. I wonder how to get the html/body of the shadow dom? Is there any solution or "workaround" like cloning the tree and append it to the body?