Understanding SVG's Viewport,viewbox,preserveaspectratio "2"

An SVG, after setting the Viewbox, if the length of the viewbox is less than the length and width of the SVG viewport, then the result must be enlarged; but once a value of Viewbox is greater than Vewport, the final actual effect is not magnified, But it's shrinking.

Because the purpose of Viewbox is to set its own long-wide range to fill the viewport. Viewport the length of the width is determined, viewbox if beyond the viewport, and then try to fill the viewport, it is necessary to narrow their own. It should be more appropriate to replace "fill" with "fit". Viewbox always tries to make itself from the initial set size to the same size as the viewport.

However, this amplification or narrowing is actually a strategy, which is determined by the SVG preserveaspectratio attribute. The value of the Preserveaspectratio appears as a group, the first parameter value represents the position, and the second represents the scaling strategy. If the second value is meet, then the scaling is done by the short edge:

<svg width= "height=" "viewbox=" 0 0 "preserveaspectratio=" xminymin Meet "style=" border:1px solid #cd000 0; " > <rect x= "ten" y= "width=" "height=" fill= "#cd0000"/></svg>

The above code in viewbox= "0 0 100 100", less than viewport, so must be magnified, and because the Preserveaspectratio strategy is meet, so scaling to comply with the short edge ratio, that is 200/100, magnification twice times, the actual effect is:

When you look at the solid red rectangle with the Chrome Developer tool, you'll see that it's 300*300 twice times larger than the original 150*150.

If the Preserveaspectratio policy is slice:

<svg width= "height=" "viewbox=" 0 0 "preserveaspectratio=" xminymin Slice "style=" border:1px solid #cd00 00; " > <rect x= "ten" y= "width=" "height=" fill= "#cd0000"/></svg>

This means that magnification is carried out in the proportion of the long side, which is 400/100, 4 times times. Actual effect:

With developer tools, you'll find that it turns into 600x600, which is 4 times times more than the original 150x150:

Preserveaspectratio's last strategy is that the value is none, and its effect is similar to meet, but also to the short-edged scale, but the actual effect is different from the meet:

The solid rectangle has the same magnification as the meet, but the solid rectangle has a different position and more white space on the left. How it forms the result of this style remains to be studied.

Reference article http://www.zhangxinxu.com/wordpress/2014/08/svg-viewport-viewbox-preserveaspectratio/

Understanding SVG's Viewport,viewbox,preserveaspectratio "2"