In-depth understanding of SVG coordinate systems and transformations-viewport, Viewbox,preserveaspectratio

This article is translated from blog:

https://www.sarasoueidan.com/blog/svg-coordinate-systems/

SVG elements are not constrained by CSS box models like other HTML elements. This feature makes the transform and postioning SVG elements seem mysterious and at first glance not so easy to understand. However, once you understand the SVG coordinate system and how transformation works, it can be very easy to manipulate SVG. In this article, we will cover three aspects of controlling the SVG coordinate system: Viewport, Viewbox and Preserveaspectratio

This is the first of three post series:

• Understanding SVG coordinate system and transformations: this is the article
• Understanding SVG coordinate systems and Transformations:transform properties
• Understanding the SVG coordinate system and transformations: building a new viewports

Live demo that corresponds to this article:

https://www.sarasoueidan.com/demos/interactive-svg-coordinate-system/

SVG Canvas

Canvas is the area in which SVG content renders. Conceptually, this canvas is infinitely large at two latitudes. That is, SVG can be any sub-inch. However, the SVG content can only be on a limited screen (this is a limited area, and is called viewport), which is shown on the viewport. Content that falls outside of this viewport range in SVG will be clipped off and not visible.

Viewport

Viewport is the part of the area where SVG is visible. You can think of viewport as a window through which you can see a particular area of the landscape (SVG part). And this view (SVG content) can be completely or partially visible through this window.

The SVG viewport and the browser's viewport are similar. A Web page can be any minor size, it can be larger than the width of the browser's viewport, or higher than the height of the browser viewport. At the same time, however, we can only see part of the Web page (through this viewport)

Is whether the entire SVG canvas is visible or only part of the canvas is visible depending on the value of size of that canvas multiplied by the Preserveaspectration property

You can specify the sub-size of this viewport by setting the width and height properties of the outermost SVG element.

<!---<width= "$"  height= " ">    <!----</svg  >

In the SVG concept, the value of the attribute may or may not have a corresponding unit. A unitless value is said to being specified in user space using the user units. If the value is specified as user units, the value is assumed to have a value of "px" units. This means that in the example above we have specified the area viewport to 800pxx600px.

You can also specify the corresponding units, which are supported in SVG: Em,ex,px,pt,pc,cm,mm,in and percentages.

Once the outermost SVG element's width and height are specified, the browser will create a initial viewport coordinate system and a initial user coordinate system.

The initial coordinate system

The initial viewport coordinate system is a coordinate system built on the viewport, starting from the upper left (0,0) point of the viewport, the positive x-axis grows to the right,

Positive y-Axis growth initial the 1 units in the coordinate system are equal to one "pixel" in viewport. This coordinate system is similar to the HTML coordinate system created by the CSS box model.

The initial user coordinate system is the coordinate systems built on the SVG canvas. This coordinate system is initialized with the viewport coordinate system as equals.

In-depth understanding of SVG coordinate systems and transformations-viewport, Viewbox,preserveaspectratio