Tengo una solución que toma el cuerpo del documento de una página y lo convierte en un SVG. Ninguna modificación o similar, simplemente creando la imagen a través del HTML de la página.

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

Las entradas son el cuerpo, ancho, alto y tipo de imagen.

El html se representará en una imagen:

 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; }

Código completo https://jsfiddle.net/j67nqsme/

Ahora esto funciona bien, excepto por shadow DOM/tree, ya que no estará disponible y no se incluirá en el cuerpo. Me pregunto cómo obtener el html/body del shadow dom. ¿Hay alguna solución o "solución alternativa" como clonar el árbol y agregarlo al cuerpo?