Understanding the Viewport,viewbox,preserveaspectratio of SVG

The foundation is very important.

Viewport

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

<width= " max" 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:

Unit	meaning
Em	The font size relative to the parent element
Ex	Height relative to the lowercase letter "x"
Px	Relative to screen resolution instead of window size: typically 1 dots or 1/72 inches
Inch	inch, Table Inch
Cm	centimeter, table cm
Mm	millimeter, table mm
Pt	1/72 inch
Pc	12-point movable, or 1/12-point
%	Relative to the parent element. It is normal to define itself or other elements through attributes

In addition to the SVG itself, some other elements, such as <rect> width / height properties, can also use the units above, and the default units are pixels.

Viewbox Property

This is the focus of this article, but also difficult.

First look at a lively example, the following HTML code:

<svgwidth= "The "Height= "+"ViewBox= "0,0,40,30"style= "border:1px solid #cd0000;">    <rectx= "Ten"y= "5"width= " the"Height= " the"Fill= "#cd0000"/></svg>

The results are as follows:

Or watch the demo yourself.

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!

OK, the reason why the small rectangular Big Show 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: breadth, 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:
1. If not viewBox , it should look like this:

<rect>The size is only for the entire SVG stage 1/20 .

2. the viewBox="0,0,40,30" equivalent of a box shown in the upper-left corner of the SVG circle:

3. then zoom the box, along with the small rectangle in the box, to the entire SVG size (gif below):

In the hands of the is their own, you can click here: SVG Viewbox Property Principle of the steps to demonstrate the demo

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 cannot always be the same as the viewBox viewport one diaper. At this point, you need to go preserveAspectRatio , this property is also applied to the <svg> element, and the object is Viewbox.

Let's see how the Pigs run:

preserveaspectratio= "Xmidymid Meet"

Now let's eat pork.

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:

value	meaning
XMin	Viewport and Viewbox align to the left
Xmid	Viewport and Viewbox X-axis Center alignment
Xmax	Viewport and Viewbox right align
Ymin	Align the viewport and viewbox top edges. Note Y is uppercase.
Ymid	Aligns the center points of the viewport and Viewbox y axes. Note Y is uppercase.
YMax	Align the viewport and viewbox bottom edges. Note Y is uppercase.

x, y free fit is available, such as:

Xmaxymaxxmidymid

Dear little Buddy, you see what that means?

Thump thump pedal, yes, is the combination of meaning: "Right-down" and "medium-medium" alignment. Congratulations on your knowledge points here to learn the smooth graduation!

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

value	meaning
Meet	Maintain aspect ratio scaling Viewbox adapt to viewport, subject to
Slice	Keep the aspect ratio small in the direction of the enlargement and fill viewport, attack
None	Twist aspect ratios to fully adapt to viewport, perverted

There is an urgent need for a living example that will allow you to feel the performance of these three values.

You can click here: Meet,slice,none function Demo Demo

First, look at the SVG code:

<svgwidth= "The "Height= "$"ViewBox= "0 0"style= "border:1px solid #cd0000;">    <rectx= "Ten"y= "Ten"width= "Max"Height= "Max"Fill= "#cd0000"/></svg>

Intercept the left half of the SVG (200 just 400 of the width) as the viewport, with a 150*150 red rectangle inside.

The default shows are as follows:

If I'm right, the default should be the "xMidYmid meet" effect.

① If it is an meet effect, the code is as follows:

<svgwidth= "The "Height= "$"ViewBox= "0 0"Preserveaspectratio= "Xminymin Meet"style= "border:1px solid #cd0000;">    <rectx= "Ten"y= "Ten"width= "Max"Height= "Max"Fill= "#cd0000"/></svg>

The effect is as follows:

The performance principle is: SVG wide, 400 high 200 , Viewbox wide 200 , high 200 . x The horizontal scale is 2 the y vertical axis ratio 1 . meet The function is to let viewbox and so on, and so on at the same time, completely in the SVG viewport display. Here, the minimum scale is vertical 1 , so the Viewbox actually does not have any scaling.

As long as we viewBox make a small change to the attribute value (200→300), we can feel the zoom:

<svgwidth= "The "Height= "$"ViewBox= "0 0"Preserveaspectratio= "Xminymin Meet"style= "border:1px solid #cd0000;">    <rectx= "Ten"y= "Ten"width= "Max"Height= "Max"Fill= "#cd0000"/></svg>

At this point the effect is:

After the change, the height of the 300 Viewbox is higher than the viewport 200 , so, viewbox to fully adapt to viewport, it is necessary to scale, so we can go up to the upper rectangular area becomes smaller, because of the scale of the result (zoom 200/300 , Almost the original 66.7% ).

② If it is slice , slice it has the meaning of shearing itself. The code is as follows:

<svgwidth= "The "Height= "$"ViewBox= "0 0"Preserveaspectratio= "Xminymin Slice"style= "border:1px solid #cd0000;">    <rectx= "Ten"y= "Ten"width= "Max"Height= "Max"Fill= "#cd0000"/></svg>

Effect:

sliceis also to maintain the aspect ratio of the viewbox, but its role is to fill viewport as far as possible. Again, here Viewbox width 200 , svg width is 400 . Obviously, to maximize the fill, the width of the viewbox needs to be enlarged to twice times the original. So, there is a viewbox magnification twice times after the effect. Since the viewbox part of the area is beyond the viewport, the content outside the viewport is not visible, so the slice "cut" effect appears.

③If it is none , it indicates that the proportions are not cared for, and the Viewbox is stretched directly to the maximum fill viewport.

<svgwidth= "The "Height= "$"ViewBox= "0 0"Preserveaspectratio= "Xminymin None"style= "border:1px solid #cd0000;">    <rectx= "Ten"y= "Ten"width= "Max"Height= "Max"Fill= "#cd0000"/></svg>

Originally a good square, now because of the viewbox stretch, has become a wide 2:1 -height rectangle.

Alignment of the Viewbox
Thousands of words than a can do their own experience of the demo, you can ruthlessly click here: Viewbox the alignment of the various names to express feelings Demo

Cut two pictures to show you:

Whether it is meet or slice not, you are not able to see in a state at the same time x , the y direction of the displacement. Because there is always a direction is full of viewport.

Understanding the Viewport,viewbox,preserveaspectratio of SVG