...
1. If only width and height present, then the svg document gets an absolute size, appears in the top-left corner of the display and is never resized (not even when the display window is resized). This means it can be cut-off when the display window is too small.
2. If only viewBox and preserveAspectRatio are present, then the viewBox determines the rectangular region of the svg document that is drawn in the display window (the coordinates for the viewBox edges are the same as the coordinate system used within the svg file, usually the coordinates are in pixels). The preserveAspectRatio determines how the drawn region is sized and aligned within the display window. In this case the svg document is automatically resized when the display window is resized.
Examples:
resizing attributes in the svg root element | effect |
|
...
viewBox="0 0 400 400" preserveAspectRatio="xMidYMid meet" |
|
...
| The svg document is scaled to fit the display window and the aspect ratio is preserved. |
|
...
viewBox="0 0 400 400" preserveAspectRatio="none" |
|
...
| The svg document is scaled and stretched to fill the window (aspect ratio is not preserved). |
|
...
width="1200" height="700" |
|
...
| Only the region with coordinates 0 <= x <= 1200 and 0 <= y <= 700 pixels is shown. The svg document is not resized when the display window is resized. |