ViewBox value is wrong in svg image

[mnmaltsev]

From 4.0.0 version when use toDataURL("image/svg+xml") function resulting svg viewBox value has wrong height and width. The problem is
viewBox="${minX} ${minY} ${this.canvas.width} ${this.canvas.height}"
Width should be this.canvas.width / ratio and height should be this.canvas.height / ratio as in previous version.

Bug can be reproduced by demo

[UziTech]

This would cause the issue in #411 wouldn't it?

[mnmaltsev]

I can not imagine the case when somebody need not drawable space. As you see in your demo it adds empty spaces on bottom and right. I use the same code to handling high DPI

function resizeCanvas() {
    const ratio =  Math.max(window.devicePixelRatio || 1, 1);
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext("2d").scale(ratio, ratio);
    signaturePad.clear(); // otherwise isEmpty() might return incorrect value
}

as result drawable area scaled and I want to use result svg image as it was in creation step to display it for the user without additional operations with svg.
Is it possible to add option to cut ViewBox size to initial drawable area as in previous version?
This option will satisfy desires of everybody)

[UziTech]

I am having a hard time reproducing the issue in #411. I'm thinking this was fixed before that was merged. I think it would be ok to change it back. If you want to create a PR that would be very helpful 😁👍

[github-actions]

🎉 This issue has been resolved in version 4.0.8 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[dnlrbz]

@UziTech the issue is still happening in version. "signature_pad": "^4.1.4", the viewBox, width and height of an SVG is wrong, because of window.devicePixelRatio, which leads to cutting of part of SVG. Could you please add ratio parameter to the toSVG() method?

[UziTech]

@dnlrbz the best way to get this fixed would be to create a new issue and provide some code or a repo that can reproduce it along with a video.