(A similar phenomena can be observed for a constant width while varying the height values.)
This is due to the preserveAspectRatio property on the svg element. Its default value is `meet`, which scales the svg with three rules:
- aspect ratio is preserved - the entire viewBox is visible within the viewport - the viewBox is scaled up as much as possible, while still meeting the other criteria
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/p...
If you fiddle with the attribute value in the Dev Tools, try setting it to `xMinYMid` or `none` to see if that gives you a good sense of how it works. I'm worried that it might just confuse if not explained well :)
It seems that preserveAspectRatio is an important part of understanding viewBox. IMO, it deserves a spot on the telescope's controls. I think a value of `none` might be the best starting point; all of the settings that result in combined scaling and displacement are less intuitive and likely harder to understand at first exposure.
Aside: Even if you decide to keep `xMidYMid ` as the default value for preserveAspectRatio, it seems that you ought to list it explicitly if you wish to specify a meetOrSlice value as Chrome is currently complaining with your existing preserveAspectRatio="meet":
react-dom.production.min.js:978 Error: <svg> attribute preserveAspectRatio: Unrecognized enumerated value, "meet".