I need to be able to export everything inside a Div into an exportable SVG file. I'm using html-to-image library to do this. The issue I'm having is that the generated SVG path isn't correct and does not work as an SVG file. Tried a few things, but am stuck. Below is the entire code that you can run to test it out.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<body>
<!-- 1. Constructing a Div -->
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Hello world!</h4>
</div>
<!-- 2. Using HTML-to-Image to convert that Div to SVG -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.9.0/html-to-image.js"></script>
<script type="text/javascript">
function filter (node) {
return (node.tagName !== 'i');
}
htmlToImage.toSvg(document.getElementById('capture'), { filter: filter })
.then(function (dataUrl) {
//--3. the following Alert shows the generated SVG file for reference, but the SVG path generated is wrong
alert(dataUrl);
});
</script>
</body>
</html>
Returned dataUrl from html-to-image is url encoded. So, you need to decode and also need to ommit the first mimie-type string which is the part before the comma ,. In this example, I splitted the data string with , and decode the svg string.
<div id="svg">
</div>
htmlToImage.toSvg(document.getElementById('capture'), { filter: filter
})
.then(function (dataUrl) {
let svg = decodeURIComponent(dataUrl.split(',')[1])
console.log(svg);
document.getElementById('svg').innerHTML = svg
});