Introducing myself in svg I found the viewbox attribute but I don't know what it does exactly
<svg width="500" height="500" viewbox="0 0 50 100" style="background-color: blue" >
<rect x="0"
y="0"
width="50"
height="50"
fill="black"
class="rectangle"/>
<rect x="0"
y="50"
width="50"
height="50"
fill="orange"/>
</svg>
According to what I read, it defines the portion of the image that is going to be shown in addition to the coordinates from where that portion will be taken. But I am still not sure if in the case of the code above, starting from the point 0.0, a portion equivalent to 50% of the 500 height and width that I gave the container will be taken or if that 50 and 100 equal 50% and 100% of the screen (the viewport where the image is displayed)
According to the code above, the output I expect is the first rectangle being drawn at 0,0 taking 50% of the container, but this is not the case because on the left there is an empty part and the rectangle is not shown until after. If viewbox indicates the portion and coordinates of the image to be displayed then the first rectangle should be seen right at the beginning because its coordinate is 0,0.
Could someone explain clearly what viewbox does and how.