The user coordinate system of the SVG canvas is identical to that of the viewport. We’ll talk about modifying it in the next section.įor now, we won’t specify a viewBox attribute value. Using the viewBox attribute, the initial user coordinate system-also known as the current coordinate system, or user space in use-can be modified so that it is not identical to the viewport coordinate system anymore. This coordinate system is initially identical to the viewport coordinate system-it has its origin at the top left corner of the viewport with the positive x-axis pointing towards the right, the positive y-axis pointing down. The initial user coordinate system is the coordinate system established on the SVG canvas. This coordinate system is similar to the coordinate system established on an HTML element with a CSS box model. The initial viewport coordinate system is a coordinate system established on the viewport, with the origin at the top left corner of the viewport at point (0, 0), the positive x-axis pointing towards the right, the positive y-axis pointing down, and one unit in the initial coordinate system equals one “pixel” in the viewport. Once the width and height of the outermost SVG element are set, the browser establishes an initial viewport coordinate system and an initial user coordinate system. The supported length unit identifiers in SVG are: em, ex, px, pt, pc, cm, mm, in, and percentages. This means that the viewport in the above example will be rendered as a 800px by 600px viewport. If a value is specified in user units, then the value is assumed to be equivalent to the same number of “px” units.
A unitless value is said to be specified in user space using user units. In SVG, values can be set with or without a unit identifier. You specify the size of the viewport using the width and height attributes on the outermost element. You don't have to worry about these now we'll talk about them further in more detail. Whether or not the entire SVG canvas or part of it is visible depends on the size of that canvas* and the value of the preserveAspectRatio attribute. However, only portions of a web page are visible through the viewport at a time. A web page can be of any size it can be wider than the viewport’s width, and is in most cases also longer than the viewport’s length. The SVG viewport is similar to the viewport of the browser you’re viewing this page through. The scene may be entirely or partially visible through that window. You can think of the viewport as a window through which you can see a particular scene. The viewport is the viewing area where the SVG will be visible. Areas of the SVG that lie beyond the boundaries of the viewport are clipped off and not visible. However, it is rendered on the screen relative to a finite region known as the viewport. Conceptually, this canvas is infinite in both dimensions.
The canvas is the space or area where the SVG content is drawn. The demo is the cherry on top of the cake, so do make sure you come back to read the article if you check it out before you do! The SVG Canvas
Svg web editor series#
This is the first in a series of three articles covering the topic of coordinate systems and transformations in SVG. In this article we're going to go over three of the most important SVG attributes that control SVG coordinate systems: viewport, viewBox, and preserveAspectRatio. However, once you understand how SVG coordinate systems and transformations work, manipulating SVGs becomes a lot easier and makes a lot more sense. This makes positioning and transforming these elements trickier and may seem-at first glance-less intuitive. SVG elements aren't governed by a CSS box model like HTML elements are. This article was published on Jul 17, 2014, and takes approximately 26 minute(s) to read.
0 kommentar(er)
