Dom-to-image: Svg Images

[BMPMS]

I've just discovered your brilliant tool. It works perfectly apart from one issue - SVG images, such as this one:

I'm using toBlob to save the whole web page as a PNG and the svg images are not rendering:

  domtoimage.toBlob(document.body).then(function (blob) {
    window.saveAs(blob, 'my_webpage.png');
 });

[BMPMS]

I've solved the problem by going into the code.

dom_to_image.js.zip

[aravind14feb]

@tsayen Thank you for this nice library. @BMPMS I'm stuck with the same problem. I tried your modifications. The dom element for the SVG images are rendered but the images are still missing in the output. In my html page, the SVG images are used with svg tags.

[aravind14feb]

@tsayen Thank you for this nice library. @BMPMS I'm stuck with the same problem. I tried your modifications. The dom element for the SVG images are rendered but the images are still missing in the output. In my HTML page, the SVG images are used as given below.

<svg xmlns:xlink>
    <use xlink:href="...svg image from my resource"/>
<svg>

[BMPMS]

It worked for me. The only difference is I was using an image tag rather than a use tag. Hope that helps?

[aravind14feb]

@BMPMS I tried to update your fix to support the screengrab of SVG tags with use tag as children, but I'm stuck and the inline promise (that gets dataURL as an argument) is not resolved. Can you help me with this?

[BMPMS]

I'm afraid I can't. This isn't my area really but since I managed to solve my specific problem I thought it was worth sharing.

Just to reiterate the above, I was using image tags not use tags.

[aravind14feb]

@BMPMS No problem. Thanks for your contribution anyways.

[hmz4dev]

@BMPMS Thanks lot man .

[KonstantinosLaloudakis]

I had the same issue. Thanks @BMPMS !!

[Sher-V]

What is the solution for svg _image_ tags? I got the same problem

[luisFebro]

Thanks, @BMPMS !!! Your solution worked just fine. Now the svg image is being downloaded.