Understanding Viewport, ViewBox, preserveaspectratio scaling for SVG picture labels

First, viewport

Represents the size of the SVG visible area, or can be imagined as stage size, canvas size.

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

The SVG code above defines a viewport with a width of 500 units and a height of 300 units.

Note that the wording here is "unit", not "pixel". Although, width height if it is a pure number, the use of "Pixels" as the unit. In other words, the size of the above SVG viewport is 500px * 300px .

Of course, the phrase "unit", the subtext is that you can use other types of units, covering common CSS units.

Second, Viewbox properties

First look at an example, the following HTML code:

<svg width=" -"height=" -"viewbox="0,0,40,30"style="border:1px solid #cd0000;"> <rect x="Ten"y="5"Width=" -"height=" the"Fill="#cd0000"/></svg>

The results are as follows:

If you don't look viewBox , you'll be surprised--svg size obviously has 400*300 pixels, and small <rect> size only it 1/20 , but the show is occupied half of it! Not science!

The reason why the small rectangular large display of divinity is here to viewBox play a role in fuelling.

　　viewBoxThe value has 4 digits:

viewbox="x, y, width, height"  //  x: Upper-left corner, Y: Upper left, ordinate, Width: width, Height: High

　　viewBoxAs implies meaning is the "viewport box" means, like saying: "SVG ah, or you let me fill you ~"

The more vivid explanation is: SVG is like our monitor screen, Viewbox is the screenshot tool selected the box, the final rendering is to put the screenshot in the box in the display screen again!

More intuitive explanation:

If not viewBox , it should be long like this, the <rect> size of only the entire SVG stage 1/20 .

　　viewBox="0,0,40,30"，Corresponds to a box shown in the upper left corner of SVG.

This box is then enlarged to the entire SVG size along with the small rectangle in the box.

Third, Preserveaspectratio

In the above example, the aspect ratio of SVG is exactly the same as the viewbox aspect ratio 4:3 . Obviously, the actual application is viewBox not likely to viewport wear the same diaper.

At this point, you need to go preserveAspectRatio , this property is also applied to the <svg> element, and the object is Viewbox.

preserveaspectratio="xmidymid meet"

　　preserveAspectRatioThe value of the property is a combination of two values separated by a space. For example, the above xMidYMid and meet .

The 1th value indicates how the Viewbox aligns with the SVG viewport, and the 2nd value indicates how the aspect ratio (if any) is maintained.

Where the 1th value is made up of two parts. The first half represents the alignment of the x direction, and the latter part represents y the direction alignment. The family members are as follows:

　　x, y free to fit on it.

Xmaxymax  // right down xmidymid  // Middle

　　preserveAspectRatioThe values in part 2nd of the attribute support the following 3:

The following blog post is more clearly written: https://www.w3cplus.com/html5/svg-coordinate-systems.html

Understanding SVG coordinate systems and transformations: Windows, Viewbox and Preserveaspectratio copyrights are owned by the author.
Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.
Original: Https://www.w3cplus.com/html5/svg-coordinate-systems.html? W3cplus.com understand SVG coordinate systems and transformations: Windows, Viewbox and Preserveaspectratio copyrights are owned by the author.
Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.
Original: Https://www.w3cplus.com/html5/svg-coordinate-systems.html? W3cplus.com

Understanding Viewport, ViewBox, preserveaspectratio scaling for SVG picture labels