[kjhughes]

For a constant height, why do width values between 0 and 100 cause (x axis) displacement, but width values above 100 cause scale reduction in both dimensions?

(A similar phenomena can be observed for a constant width while varying the height values.)

[wattenberger]

Good question! I'm trying to find a good way to explain this bit in the guide.

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 :)

[kjhughes]

Thank you for the explanation (and for the cool visualization, btw).

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".