CSS viewport units used on an SVG are relative to the SVG instead of the viewport

This content originally appeared on Geoff Graham and was authored by 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.

This content originally appeared on Geoff Graham and was authored by Geoff Graham

Print Share Comment Cite Upload Translate Updates

APA

Geoff Graham | Sciencx (2020-09-07T17:47:45+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 ,<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 ]. 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 . 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: ]

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

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.