fix: Do not render SVGs bigger than requested when pixelRatio > 1 and no match in _imageCache

[l1553k]

Description

When rendering the SVG for the first time, on devices with pixelRatio > 1, the image is rendered bigger. Only subsequent renders that utilize _imageCache are rendering the SVG properly.

Checklist

• I have followed the [Contributor Guide] when preparing my PR.
• I have updated/added tests for ALL new/updated/fixed functionality.
• I have updated/added relevant documentation in docs and added dartdoc comments with ///.
• I have updated/added relevant examples in examples or docs.

Breaking Change?

• No, this PR is not a breaking change.

Tested on screens with pixelRatio=1 (LG, 2560x1080) and =2 (MacBook Pro M1)

[l1553k]

Screen.Recording.2023-10-04.at.14.10.29.mov

Dragging a mouse with left button pressed allows resizing that circle. During the movement, SVG is repeatedly rendered with different sizes, so the rendering is done by the "else" branch of Svg.render

[spydon]

Good catch, lgtm!

[l1553k]

@spydon I checked rendering the same SVG with many different sizes (after all, that is how I found this bug) and my "svg circle" was always where it was expected - on top of circle drawn with drawCircle. But unit test is failing and on golden image comparisons I can see the bottom hand is rendered a bit to the left. Is it possible that the golden image is wrong?

[spydon]

@spydon I checked rendering the same SVG with many different sizes (after all, that is how I found this bug) and my "svg circle" was always where it was expected - on top of circle drawn with drawCircle. But unit test is failing and on golden image comparisons I can see the bottom hand is rendered a bit to the left. Is it possible that the golden image is wrong?

Yeah, I think it is indeed wrong!
I pushed an updated goldens image (they need to be generated on linux).

[l1553k]

Now I'm actually wondering where does that change in goldens come from. Previously the bottom hand was perfectly below the top one, now it's below and a bit to the left. I don't see anything in svg_test.dart test "render sharply" that should be moving the hand horizontally - no paddings, margins or whatever... any idea?

[spydon]

Now I'm actually wondering where does that change in goldens come from. Previously the bottom hand was perfectly below the top one, now it's below and a bit to the left. I don't see anything in svg_test.dart test "render sharply" that should be moving the hand horizontally - no paddings, margins or whatever... any idea?

Oh true, the original was correct then...
No idea what could have moved it. 🤔

[spydon]

Now it is ready for merge right @l1553k? :)

[l1553k]

I think I understand what is really going on. _render sometimes renders to a screen-bound canvas, and in that case we should just render using logical pixels and let something else (flutter/os/gpu/whatever) do it's magic. Maybe the canvas comes pre-scaled to fit the device?

And sometimes _render renders to a brand new canvas meant to be stored for later, as a bitmap I guess. In that case we need to scale the canvas to accomodate pixelRatio-as-many-pixels.

And yes, I think this is the final form :)