Svg Width Vs Viewbox

Svg Width Vs Viewbox. With the width and height values you can change the size of the SVG vector. While an SVG can be as wide or as high as we wish only a certain section of this image can be visible at a time.

Much More Than A Static Icon Set Iconic Is A New Way Of Thinking About Icons Their Structure Aesthetic And Abilities Icon Icon Set Color Themes from www.pinterest.com

X y width height. While an SVG can be as wide or as high as we wish only a certain section of this image can be visible at a time. The viewBox is an attribute of the element.

We set the width and height for SVG and viewBox equal ie 200 so we are getting both the circles of the same size.

So if we want to change the size and make it larger then set the value for width and height in viewBox smaller then the width and height properties of the SVG. We calculate the SVG width and height dimension to show the view box let svg documentgetElementsByTagNamesvg0getBoundingClientRect. 1500 your width unit 300px 1 your width unit 3001500px 15px. ConsolelogThe default viewbox of the SVG minus 2 times a border of 1 for this browser is svgwidth-21 x svgheight-21.