render: no js fit to screen alternative

[gavin-ts]

Summary

An alternative method to fit to screen without js.

Details

• fixes resizing script makes SVGs un-embeddable #659
• svgs always fit to the viewport and resize whenever that changes (not just onload)

wide diagram before .svg

Note: you likely need to download the file (save as) for the js resizing to run.
Note the height overflows

wide diagram after .svg

No download needed since resizing isn't via js.

small diagram before .svg

small diagram after .svg

tall diagram before .svg

tall diagram after .svg

disabling fit can be done by setting width/height on the outer svg

Related: #721 if we add the option to enable/disable fitting

Kapture.2023-01-26.at.14.43.19.mp4

fixes #645

[alixander]

hold off on this, will need to look into it more later

[nhooyr]

@gavin-ts is the alternative method here nesting an svg under an svg?

[gavin-ts]

@gavin-ts is the alternative method here nesting an svg under an svg?

could you clarify? are you asking how it works?

[nhooyr]

are you asking how it works?

Yes!

[gavin-ts]

Yes!

oh okay so it is basically the same svg with width and height set, but viewed through the outer svg with preserveAspectRatio set to place it in the top left corner and scale it based on the outer svg's size which is just the whole window when you open it. The preserveAspectRatio attribute handles the scaling and with width/height unset on the outer svg it is based on the dimensions you open it at.

[gavin-ts]

@alixander rebased, updated adding the appendix and updated watch mode

[vfosnar]

@alixander It looks like this actually fixes rendering when scaled in Firefox!

Original

there are clearly visible rendering issues near borders of the SVG

After

they are no more

thank you @gavin-ts!

[alixander]

wow this works so well. well done, good riddance to a js resize script

[bo-ku-ra]

#943 (comment)