Integrate browser SVG to PNG conversion in a Dash app

Dash Python
,
1

I have a multipage Dash app that generates some SVG graphics which are also converted to PNG to be inserted into markdown and ODT/LibreOffice documents. Currently I use cairosvg for conversion but it needs more than 400MB of installed software, which isn’t good for a docker container.

Looking for an alternative I stumbled upon https://stackoverflow.com/questions/28226677/save-inline-svg-as-jpeg-png-svg and https://mybyways.com/blog/convert-svg-to-png-using-your-browser, which describe a way to convert SVG to PNG through the browser, a solution that seems very smart to me since the SVG source code generated by my app is already natively and perfectly rendered by the browser in a html.Iframe that displays it.

Here is the code from above mentioned links reduced to the bone, if you open it in a browser you will see how it converts the provided SVG source to PNG, (few lines of code running in client’s browser instead of 400MB of software installed on server):

<html>
<head>
<title>Browser SVG to PNG Converter</title>
</head>
<body bgcolor="#E6E6FA">
 <h1>Browser SVG to PNG Converter</h1>
 <div id="div_source"><svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"><style>rect,path {fill:none; stroke:#000000;} text {fill:#000000; font-family:sans-serif; font-size:12px; stroke-width:0;} text.fascia {fill:#0000FF; font-size:10px;} line.fascia {stroke:#0000FF;} text.colmo {fill:#FF00FF; font-size:10px;} line.colmo {stroke:#FF00FF;}</style><path d="M 25.0 475.0 h 50.0 l -10.0 5.0 10.0 -5.0 -10.0 -5.0"/><text x="50.0" y="488.64" text-anchor="middle" transform="rotate(0 50.0 485.0)">X</text><path d="M 25.0 475.0 v -50.0 l 5.0 10.0 -5.0 -10.0 -5.0 10.0"/><text x="15.0" y="453.64" text-anchor="middle" transform="rotate(0 15.0 450.0)">Y</text><g transform="translate(250.0 250.0)"><rect x="-110.0" y="-110.0" width="220.0" height="220.0"/><text x="-55.0" y="107.12" text-anchor="middle" transform="rotate(0 -55.0 110.0)" class="fascia">5,00 m</text><text x="55.0" y="107.12" text-anchor="middle" transform="rotate(0 55.0 110.0)" class="fascia">5,00 m</text><line x1="0.0" y1="-110.0" x2="0.0" y2="110.0" stroke-dasharray="10" stroke-dashoffset="5.0" class="fascia" font-size="10"/><g transform="translate(-220.0 0) rotate(0)"><path d="M 20 13.5 v -27 h 42 v -6 l 18,19.5 l -18,19.5 v -6 Z"/></g></g></svg></div><br/>
 <button id="btn_convert">Convert SVG to PNG and display it below</button><br/><br/>
 <canvas id="img_out"></canvas>
<script>
document.getElementById('btn_convert').addEventListener('click', function () {
  var svg = document.getElementById('div_source').querySelector('svg');
  var canvas = document.getElementById('img_out');
  canvas.width = svg.getBoundingClientRect().width;
  canvas.height = svg.getBoundingClientRect().height;
  var data = new XMLSerializer().serializeToString(svg);
  var win = window.URL || window.webkitURL || window;
  var blob = new Blob([data], { type: 'image/svg+xml' });
  var url = win.createObjectURL(blob);
  var img = new Image();
  img.src = url;
  img.onload = function () {
    canvas.getContext('2d').drawImage(img, 0, 0);
    win.revokeObjectURL(url);
	canvas.toDataURL("image/png");
  };
});
</script>
</body>
</html>

So the question is, is it possible to integrate the above browser (client-side) SVG-to-PNG conversion functionality in a Dash app? My Dash app provides SVG source, and should get in return a PNG image (like io.BytesIO() buffer or base64 encoded data) , like I do with cairosvg.

I believe that such functionality could be very useful to many.