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. vw and 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 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 100vh 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.

Source