Fixes for downloading PNG

[louh]

Hi there,

I'd like to open my PR to further the discussion on #75. This fixes two big issues for us:

1. If the DOM containing element has a variable width and height, and it contains an <svg> element with a viewBox property, then the resulting downloaded PNG will render the SVG at its own viewBox dimensions, which will mismatch from the DOM dimensions. This proposal renders the resulting PNG at the source SVG's viewBox dimensions.

2. If the user downloads a PNG from a monitor with a high pixel density (such as a Macbook with a Retina screen) then the resulting PNG will be pixelated. This PR renders the resulting PNG at the same pixel density as the user's monitor.

There is a broken test because reading baseVal from an empty SVG throws an error. This might take time to fix, so I'd like to open this for further conversation so I can decide how to approach this. Thanks!

[cy6erskunk]

Hi, thanks for the PR and sorry for the long radio silence! This looks really interesting, could you give en axample of the first case, it's really hard to understand what's going on there from the text description.

[louh]

Hi @cy6erskunk, apologies for my own long radio silence! I'm finding it hard to set up a simple test case for the first point, and I need to do a little more experimentation on my side to see whether it's just an issue with our own implementation.

In the meantime, can I break out the device pixel ratio change as a separate, standalone PR? I imagine this would be an easier merge to make and shouldn't be blocked while I work on the first point. Thanks!

[louh]

@cy6erskunk I'm putting an example for the first case in the original issue (#75).