Im using https://github.com/jgraph/drawio (mxgraph) for a project. I use AngularJS for frontend and NodeJS/Express for backend. The idea is to do a diagram design and then be able to export it/print it among other things.
Im able to interact with the backend and do the diagram but having trouble with the printing/rendering.
The problem is that the generated svg contains foreinObject for a QR and Barcode. While the diagram is rendered/displayed on the frontend, i need to generate a png/tiff in order to send it to a printer, but nodejs is not capable to render the foreinObject elements. I
tested canvg, sharp on node but foreignObject are not supported (according to some issues on github).
This is an example svg:
<svg width='600' height='500'>
<g xmlns="http://www.w3.org/2000/svg" fill="#464445" font-family="Lucida Console" pointer-events="none" text-anchor="middle" font-size="72px">
<text x="350" y="135">ABCDEF12345</text>
</g>
<g xmlns="http://www.w3.org/2000/svg">
<switch>
<foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 130px; margin-left: 300px;">
<div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: #774400; ">
<div style="display: inline-block; font-size: 11px; font-family: Arial, Helvetica; color: rgb(119, 68, 0); line-height: 1.2; pointer-events: none; white-space: nowrap;">
<img src="data:image/png;base64,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" />
</div>
</div>
</div>
</foreignObject>
<text x="300" y="133" fill="#774400" font-family="Arial,Helvetica" font-size="11px" text-anchor="middle">[Object]</text>
</switch>
</g>
<g xmlns="http://www.w3.org/2000/svg">
<switch>
<foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 340px; margin-left: 450px;">
<div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: #774400; ">
<div style="display: inline-block; font-size: 11px; font-family: Arial, Helvetica; color: rgb(119, 68, 0); line-height: 1.2; pointer-events: none; white-space: nowrap;">
<div title="Diagram Title">
<canvas style="display: none;" width="200" height="200"></canvas>
<img style="display: block;" src="data:image/png;base64,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" />
</div>
</div>
</div>
</div>
</foreignObject>
<text x="450" y="343" fill="#774400" font-family="Arial,Helvetica" font-size="11px" text-anchor="middle">[Object]</text>
</switch>
</g>
</svg>
And should look like this: Test svg. With sharp/canvg the QR and barcode are not displayed and instead [Object] is displayed on the final png/tiff. Even tryied C# SVG NuGet and htm2canvas for rendering on backend with same issue.
I’ve seen some posts on how to render canvas.toDataURL to png with but i dont have a object on the document DOM since mxgraph works differently and only have the final available as string. Any ideas on how can i remove the foreignObjects or how to modify the svg manually?
Is possible to “create” a canvas element and render the svg inside and then export it?