SVG Viewport and ViewBox

The viewport (Viewport) and viewBox of the SVG image can set the size of the visible part of the image.

The difference between viewport and viewbox

1, viewport is the viewport, which is equivalent to the display screen.

2, viewbox is the viewing area, which is equivalent to capturing a small part of the screen and zooming it to the entire screen, which is the effect of a close-up.

3, preserveAspectRatio specifies the alignment and scaling method of viewbox and viewport.

Viewport

The viewport (Viewport) is the visible area of the SVG image. Logically, the SVG image can be as wide and tall as you want, but only a specific part of the image can be seen at one time. The visible area is called the viewport (Viewport).

You can use the width and height attributes of the element to specify the size of the viewport (Viewport) of <svg>. Here is an example:

<svg width="500" height="300"></svg>

The viewport (Viewport) defined in this example is500 unit width and300 unit height.

Coordinate system units

If no units are specified within the width and height attributes, the default unit is assumed to be pixels. That is, width500 indicates500 pixels.

If you prefer to use units other than pixels, you can. The following is a list of units that can be used with the <svg> element:

The units set on the <svg> element only affect the size of the <svg> element (Viewport). The size of the SVG shapes displayed in the SVG image is determined by the units you set on each shape. If no units are specified, the default unit will be pixels.

This is an example that shows an <svg> with a set of units that contains shapes with their own sets of units:

<svg width="10cm" height="10cm">
　　　　<rect　x="50" y="100" width="50" height="50"
　　　　　　　　　　style="stroke: #000000; fill: none;"/>
　　　　<rect　x="100" y="100" width="50mm" height="50mm"
　　　　　　　　　　style="stroke: #000000; fill: none;"　/>
</svg>

This <svg> image has its unit setting cm. Both <rect> elements have their own sets of units. One is in pixels (no units explicitly set) and the other is in mm for width and height.

This is the generated image. Please note that the box on the right (with width and height units mm) is larger than the box on the left.

ViewBox

You can redefine the meaning of coordinates without units inside the <svg> element. You can use the viewBox attribute to do this. Here is an example:

<svg width="500" height="200" viewBox="0 0　50　20" >
　　　　<rect　x="20" y="10"　width="10" height="5"
　　　　　　　　　　style="stroke: #000000; fill:none;"/>
</svg>

This example creates an <svg> with a width of500 pixels, and the height is200. The viewBox attribute of <svg> contains four coordinates. These coordinates define the viewBox (ViewBox) of the <svg> element. The coordinates are x y width height, the coordinates of the viewBox (ViewBox).

In this case, the viewBox (ViewBox) starts from 0,0 and50 wide while20 high. That is to say,500 x 200 pixels <svg> elements use a coordinate system from 0,0 to50,20. In other words, each unit in the coordinates used for the internal shape1units. <svg> corresponds to width500/50 = 10pixels, and the height corresponds to200/20 = 10pixels. This is why the x position is20, and the y position is10The reason why the rectangle is actually located at200,100, and its width (10）and height (5）correspond to100 pixels and50 pixels.

Another way to explain is that the first two coordinates in the viewBox attribute of <svg> define the user coordinates of the top left corner of the element, and the last two coordinates define the user coordinates of the bottom right corner. The space within <svg> is interpreted as from the top left coordinate to the bottom right coordinate of the viewBox (ViewBox).

Image effect after running:

Please note, how all coordinates inside the <rect> element are interpreted1units.10pixels.

Maintain aspect ratio

If the aspect ratio (width-to-height ratio) of the viewport (Viewport) and the viewBox (ViewBox) are different, it is necessary to specify how the SVG viewer (such as a browser) should display the SVG image. You can use the preserveAspectRatio attribute of the element to perform this operation <svg<.

The preserveAspectRatio attribute uses two values separated by spaces. The first value tells the viewport (ViewBox) how to align within the viewport (Viewport). This value itself consists of two parts. The second value indicates how to preserve the aspect ratio (if any).

The first value used to specify the alignment method consists of two parts. The first part specifies the x alignment, and the second part specifies the y alignment. Here is a list of x and y alignment values:

By appending the y component after the x component, the x component and the y component can be combined into a single value. Here are two examples:

xMaxYMax
xMidYMid

These two examples show different alignment methods for the viewport (ViewBox) and the viewport (Viewport). The first example aligns the right edge of the viewport with the right edge of the viewport. The second example aligns the center of the viewport with the center of the viewport.

The second part of the preserveAspectRatio attribute value can take three different values:

The second part of the preserveAspectRatio attribute value is appended to the first part and separated by a space. Here are two examples:

preserveAspectRatio="xMidYMid meet"
preserveAspectRatio="xMinYMin slice"

I haven't really discussed the effects of various preserveAspectRatio settings yet, so let's take a look.

The following examples all set width to500, and set height to75, set the viewBox attribute to 0 0 250 75pixels. This means that along the x-axis, each coordinate unit will correspond to2pixels, but along the y-axis, each coordinate unit will correspond to1pixels. As you can see, the aspect ratio along the x-axis is500/250 = 2, the aspect ratio along the y-axis is75/75 = 1. This may cause the image to distort, but in the following examples, we will see how various preserveAspectRatio settings handle these.

This is the first example where preserveAspectRatio is set to xMinYMin meet. This ensures that the aspect ratio is maintained, and the size of the viewBox is adjusted to fit the viewport. That is, based on the two aspect ratios (the ratio along the y-axis is1）and scale the viewBox to the smaller one. Due to the xMinYMin component, the viewBox will be located at the top left corner of the viewport. Here is the code and the generated image:

<svg width="500" height="75"　viewBox="0　0　250　75"　　　　　preserveAspectRatio="xMinYMin meet"
　　　　　style="border:　1px solid #cccccc;">
　　　　<rect　x="1"　y="1"　width="50" height="50"
　　　　　　　　　　style="stroke: #000000; fill:none;"/>
</svg>

The second example has preserveAspectRatio set to xMinYMin slice. This preserves the aspect ratio, but it will scale the viewBox according to the larger aspect ratio (the ratio along the x-axis is2）Zoom in on the viewBox, making the image too large to fit in the viewport. The image is called a 'slice'.

<svg width="500" height="75"　viewBox="0　0　250　75"　　　　　preserveAspectRatio="xMinYMin slice"
　　　　　style="border:　1px solid #cccccc;">
　　　　<rect　x="1"　y="1"　width="50" height="50"
　　　　　　　　　　style="stroke: #000000; fill:none;"/>
</svg>

The third example has preserveAspectRatio set to none. This means the viewBox will fill the entire viewport, causing the image to distort because the aspect ratios along the x and y axes are not the same.

<svg width="500" height="75"　viewBox="0　0　250　75"　　　　　　preserveAspectRatio="none"
　　　　　　style="border:　1px solid #cccccc;">
　　　　　<rect　x="1"　y="1"　width="50" height="50"
　　　　　　　　　　　style="stroke: #000000; fill:none;"/>
</svg>

ViewBox alignment

All the examples displayed so far have used this xMinYMin setting. Depending on how you want to align the viewBox within the viewport, you can use other settings. I will delve deeper into how these settings work, but let's first look at an example:

<svg width="500" height="100" viewBox="0 0　50　50"　　　　
preserveAspectRatio="xMinYMin meet"　　　　
style="border:　1px solid #cccccc;">　　　　
<circle cx="25" cy="25" r="25"　　　　
style="stroke: #000000; fill:none;"/>　　　　
</svg>　　　　
<svg width="500" height="100" viewBox="0 0　50　50"　　　　
preserveAspectRatio="xMidYMin meet"　　　　
style="border:　1px solid #cccccc;">　　　　
<circle cx="25" cy="25" r="25"　　　　
style="stroke: #000000; fill:none;"/>　　　　
</svg>　　　　
<svg width="500" height="100" viewBox="0 0　50　50"　　　　
preserveAspectRatio="xMaxYMin meet"　　　　
style="border:　1px solid #cccccc;">　　　　
<circle cx="25" cy="25" r="25"　　　　
style="stroke: #000000; fill:none;"/>　　　　
</svg>

This example shows an <svg> with the component width group500 and the height is set to100. The viewBox is set to 0 0 50 50. This will result in the aspect ratio of the x-axis being500/50 = 10, the aspect ratio of the y-axis is100/50 =2. The radius of the circle in the image is25, making it wide50 degrees wide, high50 units. Therefore, it will fill the entire viewBox (not the viewport).

When using the meet symbol, the viewBox will scale along the y-axis because its aspect ratio is smaller. This means that the viewBox will fill the entire viewport along the y-axis (vertically) but only along the x-axis (horizontally)2 * 50 pixels = 100 pixels (aspect ratio*ViewBox X dimension). Since the width of the viewport is500 pixels, so you must specify how to horizontally align the viewBox within the viewport. This is done using xMin, xMid, and xMax in the first part of the preserveAspectRatio attribute value.

Here are three images representing the use of xMinYMin meet, xMidYMin meet, and xMaxYMin meet in the preserveAspectRatio attribute. Notice how the viewport aligns it to the left, center, and right (depending on the setting).

Similarly, if the aspect ratio of the image along the x-axis is less than the y-axis, its y-alignment must be specified.

This is an earlier example, but now it has width100 and height200:

The size of the viewBox is the same, so the aspect ratio along the y-axis (200/50 = 4）is greater than the aspect ratio along the x-axis (100/50 = 2Therefore, the viewBox will fill the viewport in the x-axis direction rather than the y-axis direction. This means that the y-alignment of the viewBox must be specified.

<svg width="100" height="200" viewbox="0 0　50　50" preserveaspectratio="xMinYMin meet" style="border:　1px solid #cccccc;">
　　　　<circle cx="25" cy="25" r="25" style="stroke: #000000; fill:none;"></circle>
</svg>
<svg width="100" height="200" viewbox="0 0　50　50" preserveaspectratio="xMinYMid meet" style="border:　1px solid #cccccc;">
　　　　<circle cx="25" cy="25" r="25" style="stroke: #000000; fill:none;"></circle>
</svg>
<svg width="100" height="200" viewbox="0 0　50　50" preserveaspectratio="xMinYMax meet" style="border:　1px solid #cccccc;">
　　　　<circle cx="25" cy="25" r="25" style="stroke: #000000; fill:none;"></circle>
</svg>

These are three images, each showing a possible y alignment using a subpart value: YMin, YMid, and YMax: