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.
The attribute syntax
viewBox
is:In the example in your question you have an svg element whose content has a width of 50 units and a height of 100 units (
viewBox="0 0 50 100"
).However the size of the svg element ( the viewport ) is 500px / 500px. As you can see it does not keep the same proportions.
In SVG there is another attribute: preserveAspectRatio . If
preserveAspectRatio="none"
the content of the SVG element appears warped to fill the entire surface of the SVG element:If the value of
preserveAspectRatio
is notnone
the syntax used is:The default value of
preserveAspectRatio
isxMidYMid meet
wherexMidYMid
aligns the x-axis center of the viewBox ( the SVG canvas content ) with the x-axis center of the viewport ( the SVG canvas ) and the y-axis center of the viewBox ( the SVG canvas content ) with the y-axis center of viewport (the SVG canvas)Alignment has 2 components: the first part tells how to align the center of the x-axis and the second part tells how to align the center of the y-axis.
These are the possible values of the alignment controllers:
xMin aligns the fromX value with the left edge of the viewport (the SVG canvas)
xMid aligns the x-axis center of the viewBox ( the content of the SVG canvas ) with the x-axis center of the viewport ( the SVG canvas )
xMax aligns the width value to the right edge of the viewport (the SVG canvas)
YMin aligns the fromY value with the top edge of the viewport (the SVG canvas)
YMid aligns the center of the axis and viewBox (the content of the SVG canvas) with the center of the axis and viewport (the SVG canvas)
YMax aligns the height value with the bottom edge of the viewport (the SVG canvas)
The meaning of the second attribute value of
preserveAspectRatio
:meet : maintains the proportions and resizes the content ( viewBox ) to fit inside the viewport.
slice : maintains the proportions and cuts the part of the content ( viewBox ) that does not fit
none : does not keep the proportions and the image appears distorted, so that the content ( viewBox ) can completely occupy the box ( viewport ).
This is the example from MDN :
In conclusion:
If possible keep the proportions. For this use only the attribute
viewBox
and the svg element will take all the available width (ie the width of the parent element).if you need to specify the size of the svg element use only the width width. The height height will be calculated keeping the proportions.
If you need to use (as in your example) a width and height that do not respect the proportions do not forget to use the attribute
preserveAspectRatio
to control the alignment of the viewBox in the viewPort.