“I can choose the unit of a document, so that one user unit equals one millimeter”. Didn’t we create a mm based document? Now we can explain the
The stroke is thicker by the same factor and the radius has been reduced to be Somewhere near the bottom right corner (where exactly depends on the DPI conversion of your browser,īut most browsers use 96dpi = 96 px/in today, which yields a conversion factor of approx.ģ.77px/mm). The third circle’s coordinates, radius and stroke-width are specified in mm. user units) and specified in px are at the correct position and identical except for radius Note that the first two circles specified without unit Highly depends on your screen resolution. The rendered image at 100% browser resolution should be approximatly 85mm by 56mm, but this a fourth horizontally and vertically for reference. To illustrate this, we draw a crosshair at (14, 21) (note: no units in the path specification!), You can imagine this situation like this 5: Printed or rendered it has a size of 84mm by 56mm”. px, is the bottom right corner, and scale the image such that when No units means px, so these attributes together tell the SVG viewer “move the camera in such a way Millimeters, so we have to zoom the viewbox camera: viewBox="0 0 84 56". We also want the user units to behave like real-world Let’s say we want to design a business card that should eventually be printed on 84mm x 56mm, so
This can be done with the viewBox attribute and will be explained with Nicer if unitless values would be implicitly in millimeters, so we could specify such a rectangle X="793.7" y="1122.5" (no units specified) is at the bottom right corner of the page. This means that theīottom right corner is at (210, 297) mm * 1/25.4 in/mm * 96 px/in ≈ (793.7, 1122.5) px.Īs already mentioned: no units means user unit means pixels. Initially viewBox="0 0 793.7 1122.5" due to the conversion from mm to px. In a mm based documents, where we specified width="210mm" height="297mm", the viewbox is Initially, theĬamera is located such that the region viewBox="0 0 width height" is pictured. Rendered in the rectangle defined by width and height, i.e. It can zoom in or out and move around - but whatever image the camera outputs, it is Imagine the viewBox attribute as a camera that moves over the infiniteĬanvas. To the bounds of a designated region (often, the SVG viewport). The effect of the viewBox attribute is that the user agent automatically supplies theĪppropriate transformation matrix to map the specified rectangle in user coordinate system
0 kommentar(er)
