why is the full screnn canvas changing size on resize

It defines the aspect ratio, the inner scaling of object lengths and coordinates, and the axis coordinates ( x and y) for where the SVG should originate. The viewBox attribute is an essential component to SVG that actually makes them scalable. To begin down the road to dynamically resizing SVGs, we need to understand two basic attributes: viewBox and preserveAspectRatio. If you are working on an image for the web or one that will only be displayed on a screen, you should size and resize images using pixels (and you can. The viewBox and preserveAspectRatio Attributes Since SVG isn’t an image and thus can be drawn (rendered) at any pixel size, the browser doesn’t inherently associate a width or height unless you explicitly give it one nor will it be able to resize the SVG even if the parent container changes size. Your computer then recalculates which pixels along those axes should be which colors to best represent that now resized image, discarding the least important pixels in the process. Think of it this way: Images have specific dimensions ( width and height) and thus when a browser displays them or is asked to resize them, it can just automatically adjust the number of pixels in either the x or y axis. The reason SVG doesn’t inherently scale well when compared to, say, an image, is that SVG is in fact not an image at all – SVG is an object. When developing with SVG, it can often be difficult to scale SVG objects when the containing frame or even the entire browser window changes size. Scalable Vector Graphics, or SVG, is a markup language that describes and generates two-dimensional vector graphics, primarily for the web and viewed on modern browsers.

Why is the full screnn canvas changing size on resize