CSS viewport units used on an SVG are relative to the SVG instead of the viewport
Yeah, you’d think that something called a “viewport” unit (e.g.
vh) would calculate its value based on the size of the actual viewport (i.e. how wide or narrow the screen is). And in most cases, that’s true.
But SVG is an exception. The
<svg> element is a sort of a viewport itself with its own bounding box, the
viewBox, the defines the position and dimension of the SVG. As such, a value like 100
vh will evaluate to 100% of the SVG height instead of 100% of the viewport height.
MDN, of course, has a better way of explaining it:
In an SVG document, the viewport is the visible area of the SVG image. You can set any height and width on an SVG, but the whole image might not be visible. The area that is visible is called the viewport.