0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>SVG behaves differently from typical HTML elements: its content is rendered on an infinite canvas, and its dimensions are calculated independently of the content. The visible part of the canvas corresponds to the dimensions of the SVG element. This rendering area is called<b>viewport</b>.</p>
1
<p>SVG behaves differently from typical HTML elements: its content is rendered on an infinite canvas, and its dimensions are calculated independently of the content. The visible part of the canvas corresponds to the dimensions of the SVG element. This rendering area is called<b>viewport</b>.</p>
2
<p>At the same time, you can control both the dimensions of the SVG element and the behavior of its content: it can be displayed in its entirety, cropped, or shrunk without maintaining aspect ratio.</p>
2
<p>At the same time, you can control both the dimensions of the SVG element and the behavior of its content: it can be displayed in its entirety, cropped, or shrunk without maintaining aspect ratio.</p>
3
<p>If the SVG is simply pasted into the page without specifying any dimensions, it will display at 300×150 pixels:</p>
3
<p>If the SVG is simply pasted into the page without specifying any dimensions, it will display at 300×150 pixels:</p>
4
<svg> … </svg><p>You can change the width and height using width and height:</p>
4
<svg> … </svg><p>You can change the width and height using width and height:</p>
5
<svg width="350" height="200"> … </svg><p>You can set the dimensions by either using attributes or CSS:</p>
5
<svg width="350" height="200"> … </svg><p>You can set the dimensions by either using attributes or CSS:</p>
6
svg { width: 350px; height: 200px; }<p>When specifying dimensions in CSS, you must specify the units. When specifying the dimensions in attributes, units are not required if you are using pixels.</p>
6
svg { width: 350px; height: 200px; }<p>When specifying dimensions in CSS, you must specify the units. When specifying the dimensions in attributes, units are not required if you are using pixels.</p>