Set SVG viewBox size from canvas width and height without factoring by devicePixelDensity

[sampriddy]

There is currently an issue in the export of SVGs that causes data to be truncated off the right-hand and bottom.

The problem lies in the fact that stroke data is being recorded in terms of the overall size of the canvas and then the size of the viewBox is being reduced afterwards. It's not necessary to reduce the viewBox's size because the viewBox's width and height are unitless and only meaningful in relation to the stroke data. Reducing the maxX of the viewBox from 1000 to 500, for example, just invalidates coordinates with x > 500 because they no longer exist in the viewBox.

I think the intent of this originally must have been to preserve the dimensions of the image across devices of differing DPI, and for that we only need to adjust the width and height attributes.

[rickychilcott]

This checks out. Please merge.

[AugmentBLU]

This works for me as well, will it be merged?

[mesqueeb]

I need this PR to be merged and pushed to NPM as well.
I'm currently still using this library from my own fork. 😰

[abraxxa]

We'd need that fix released too. What's blocking it?

[prestontighe]

+1

[patrickbussmann]

Funny 😂
Because I had many troubles with this, too. I already fixed it by myself.
And now I wanted to make a PR and found your's 🤣

var svgStr = atob(signaturePad.toDataURL('image/svg+xml').replace(/^[^,]+,/, ''));
svgStr = svgStr.replace(/(viewBox)="[^"]+"/i, '$1="0 0 ' + canvas.width + ' ' + canvas.height + '"');
svgStr = svgStr.replace(/(<svg[^>]+width)="[^"]+"/i, '$1="' + canvas.width + '"');
svgStr = svgStr.replace(/(<svg[^>]+height)="[^"]+"/i, '$1="' + canvas.height + '"');
return 'data:image/svg+xml;base64,' + btoa(svgStr);

@szimek can this be merged soon?
Thanks in Advance 👍

[szimek]

@UziTech Would you have time to take a look at it? If not, I'll take a look at it myself next weekend.

[UziTech]

I can look at it later this week I'll be gone the next few days with limited access to internet.

[UziTech]

@szimek I think this should be merged. The viewBox is unitless so devicePixelRatio should not be considered.

[merbin2012]

Funny 😂 Because I had many troubles with this, too. I already fixed it by myself. And now I wanted to make a PR and found your's 🤣

var svgStr = atob(signaturePad.toDataURL('image/svg+xml').replace(/^[^,]+,/, ''));
svgStr = svgStr.replace(/(viewBox)="[^"]+"/i, '$1="0 0 ' + canvas.width + ' ' + canvas.height + '"');
svgStr = svgStr.replace(/(<svg[^>]+width)="[^"]+"/i, '$1="' + canvas.width + '"');
svgStr = svgStr.replace(/(<svg[^>]+height)="[^"]+"/i, '$1="' + canvas.height + '"');
return 'data:image/svg+xml;base64,' + btoa(svgStr);

@szimek can this be merged soon? Thanks in Advance 👍

Thank you very much, it is working.