0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>You may have noticed that resizing the dimensions of an SVG element does not affect its content because the content is rendered on an infinite canvas, and it is not clear what size area needs to be stretched or shrunk.</p>
1
<p>You may have noticed that resizing the dimensions of an SVG element does not affect its content because the content is rendered on an infinite canvas, and it is not clear what size area needs to be stretched or shrunk.</p>
2
<p>You can change this behavior by specifying the dimensions of the area that will be stretched using the viewBox property (it can only be set with an attribute):</p>
2
<p>You can change this behavior by specifying the dimensions of the area that will be stretched using the viewBox property (it can only be set with an attribute):</p>
3
<svg viewBox="0 0 237 300" width="350" height="200"> … </svg><p>The first two numbers are the X and Y coordinates of the upper left corner of the scaled area. The other two are its width and height. The values are specified in pixels. You do not need to specify the units.</p>
3
<svg viewBox="0 0 237 300" width="350" height="200"> … </svg><p>The first two numbers are the X and Y coordinates of the upper left corner of the scaled area. The other two are its width and height. The values are specified in pixels. You do not need to specify the units.</p>
4
<p>The viewbox can be used to scale the created content so that it fits in its entirety in the container and is then centered.</p>
4
<p>The viewbox can be used to scale the created content so that it fits in its entirety in the container and is then centered.</p>