Html2canvas: not able to capture svg image

+1, also running into this issue.

+1 here is a codesandbox that reproduces the issue:

https://codesandbox.io/s/wo3oww275k

I can not capture this.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">...</svg>

But I can capture this svg.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">...</svg>

I just add width and height.

I want to add another solution based on @motodimago 's solution, that is for dynamic created svg's which you can not add width or height staticly. I faced that problem with amcharts, which i can not add width and height to created svg charts.

html2canvas(this.ImageCanvas,
        {
            onclone: (element) => {
                const svgElements: any[] = element.body.getElementsByClassName("printable-area")[0].getElementsByTagName("svg");
                Array.from(svgElements).forEach((svgElement) => {
                    const bBox: any = svgElement.getBBox();
                    svgElement.setAttribute("width", bBox.width);
                    svgElement.setAttribute("height", bBox.height);
                });
            },
        }).then((canvas) => {
            document.body.appendChild(canvas);
        });

Thanks @muratcatal , this fixes most of our issues.

Thanks @muratcatal

Just adding here for SEO, this only happened on Chrome for me, not on Safari