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 <svg> element is a sort of a viewport itself with […]

The post CSS viewport units used on an SVG are relative to the SVG instead of the viewport appeared first on Geoff Graham.

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

The post CSS viewport units used on an SVG are relative to the SVG instead of the viewport appeared first on Geoff Graham.


Print Share Comment Cite Upload Translate
APA
Geoff Graham | Sciencx (2024-03-29T00:18:33+00:00) » CSS viewport units used on an SVG are relative to the SVG instead of the viewport. Retrieved from https://www.scien.cx/2020/09/07/css-viewport-units-used-on-an-svg-are-relative-to-the-svg-instead-of-the-viewport/.
MLA
" » CSS viewport units used on an SVG are relative to the SVG instead of the viewport." Geoff Graham | Sciencx - Monday September 7, 2020, https://www.scien.cx/2020/09/07/css-viewport-units-used-on-an-svg-are-relative-to-the-svg-instead-of-the-viewport/
HARVARD
Geoff Graham | Sciencx Monday September 7, 2020 » CSS viewport units used on an SVG are relative to the SVG instead of the viewport., viewed 2024-03-29T00:18:33+00:00,<https://www.scien.cx/2020/09/07/css-viewport-units-used-on-an-svg-are-relative-to-the-svg-instead-of-the-viewport/>
VANCOUVER
Geoff Graham | Sciencx - » CSS viewport units used on an SVG are relative to the SVG instead of the viewport. [Internet]. [Accessed 2024-03-29T00:18:33+00:00]. Available from: https://www.scien.cx/2020/09/07/css-viewport-units-used-on-an-svg-are-relative-to-the-svg-instead-of-the-viewport/
CHICAGO
" » CSS viewport units used on an SVG are relative to the SVG instead of the viewport." Geoff Graham | Sciencx - Accessed 2024-03-29T00:18:33+00:00. https://www.scien.cx/2020/09/07/css-viewport-units-used-on-an-svg-are-relative-to-the-svg-instead-of-the-viewport/
IEEE
" » CSS viewport units used on an SVG are relative to the SVG instead of the viewport." Geoff Graham | Sciencx [Online]. Available: https://www.scien.cx/2020/09/07/css-viewport-units-used-on-an-svg-are-relative-to-the-svg-instead-of-the-viewport/. [Accessed: 2024-03-29T00:18:33+00:00]
rf:citation
» CSS viewport units used on an SVG are relative to the SVG instead of the viewport | Geoff Graham | Sciencx | https://www.scien.cx/2020/09/07/css-viewport-units-used-on-an-svg-are-relative-to-the-svg-instead-of-the-viewport/ | 2024-03-29T00:18:33+00:00
https://github.com/addpipe/simple-recorderjs-demo