viewBox and viewport in SVG

The height and width attributes define the viewport of the SVG element. The viewport can be thought of in the same way as the viewport in your browser. It defines the visible dimensions of the SVG document. The dimensions of the underlying SVG document can be larger than the viewport and, as with HTML, elements can be offscreen entirely. Everything that is visible is within the dimensions of the viewport.

If you just set the height and width attributes of an SVG element and don't use the viewBox attribute, it will behave in a manner equivalent to what you would expect if you've worked with CSS. In the case of the previous example, the viewport coordinate system will start with the coordinates (0,0) and will end ...

Get Mastering SVG now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.