why i have to add value of width and height next to svg and next to rect

Question

hi guys

i have one question

<svg width="2000" height="2000">
<rect width="300" height="100"
x="20" y="20" fill="green" />
</svg>

i don`t understand what is the difference between
<svg width="2000" height="2000"> and rect width="300" height="100"

Answer 1

Svg is a method to draw any 2-D shapes and rect is a part of that . Do you need to first desied SVG and then it's shapes

Answer 2

BroFar i don't know about canvas sir thanks a lot😊

Answer 3

®OHiT_$HaRma ™ okay think in terms of a piece of paper and you are drawing on it... you have a set 10½ by 8 size sheet and want to draw an apple an orange and a banana in a bowl

Answer 4

svg is the canvas, setting is width and height affects its size on the webpage

rect is for a rectangle, you need to specify its width and height and also position.

If rectangle size exceeds canvas size, it'll be cropped, see example 2.

solution is viewBox attribute, see example 3.

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

Answer 5

®OHiT_$HaRma ™ yes you need a background similarly to js canvas thinking the SVG tags set the sheet size and width before you can draw on / in it

Answer 6

thanks for help