what actually width and height indicates in SVG

Question

<svg width="2000" height="2000">
<circle cx="80" cy="80" r="50" fill="green" />
</svg>

when i change svg width and height again it give sameresults why?

Answer 1

In the “real” world, before you draw something you get a piece of paper.
Well, <svg width="2000" height="2000"> creates an “imaginary” piece of paper that is 2000 units wide, by 2000 units high.
And then you draw a circle, somewhere on your paper. Where exactly you place the circle, how “big” is your circle and what “it looks like”, is given by the next line:
<circle cx="80" cy="80" r="50" fill="green" />
Your circle has a radius of 50 units, its centre is located 80 units to the right from the left edge of your paper, and 80 units below from the upper edge of your paper. And it is all green.
As long as you draw the circle inside the “imaginary” paper you have created, you don’t see any easily visible difference – it’s only the “big picture” that changes (i.e. where in relation to the whole area of the paper the circle is placed).
But if you set width=”100”, height=”100”, then you will find out that the circle is incomplete – just because your “paper” is too small for the circle you want to draw, where you want to draw it. And this time, you have a difference that is easily visible.
Hope this helps.

Answer 2

https://code.sololearn.com/Wl0NO9M9550f/?ref=app

Answer 3

The width and height attributes of the <svg> element define the width and height of the SVG image.