SVG and PreserveAspectRatio
How do you compromise with the user's viewport?
- There are two viewports to consider, the browser's viewport and the SVG tag's viewport.
- If the aspect ratio of the SVG's viewport does not match that of the browser's viewport, the browser deals with the difference in the way specified at the
preserveAspectRatioattribute of the SVG tag. preserveAspectRatio="xMinYMin meet"places SVG's viewport so that the upper left corner of the browser's viewport matches that of the SVG's viewport.
preserveAspectRatio is not specified. The origin of the SVG's viewport is not right.
preserveAspectRatio="xMinYMin meet". The origins of the two viewports match.preserveAspectRatio - SVG: Scalable Vector Graphics | MDN
The preserveAspectRatio attribute indicates how an element with a viewBox providing a given aspect ratio must fit into a viewport with a different aspect ratio.
