Distances and coordinates in SVG drawings can be expressed in a number of units: centimeters (cm), millimeters (mm), inches (in), points (pt), and a few others. One unit, however, is special: It is the SVG pixel (abbreviated px
), sometimes called the anonymous unit, because it can be written without any unit designation at all. For example, in this rect
element, x
, y
, width
, and height
are expressed in SVG pixels:
<rect id="rect2310" y="350" x="100" width="300" height="150" />
They might just as well be specified in millimeters:
<rect id="rect2310" y="98.777mm" x="28.222mm" width="84.667mm" height="42.333mm" />
and Inkscape would understand this correctly. However, if you change and resave this SVG file, Inkscape will convert all sizes back to SVG pixels.
Despite its name, an SVG pixel is not the same as a screen pixel. When you zoom in, a distance of one SVG pixel becomes larger than one pixel on your screen; when you zoom out, it becomes smaller than one screen pixel. However, when your zoom level (displayed at the right end of the status bar of your Inkscape window, see Figure 2-1) is 100 percent, one SVG pixel exactly corresponds to one screen pixel. This makes this unit especially convenient for creating graphics for screen viewing.
In Inkscape, 90 SVG pixels are equal to one inch, so when you export your graphics at the resolution of 90 dpi (pixels per inch), it will show up exactly as displayed in Inkscape at 100 percent zoom. In most places where you can specify sizes or distances in Inkscape UI, there’s a way to specify the units, and the px
unit (SVG pixel) is the default (although you can choose a different default unit in Document Properties).
SVG uses rectangular Cartesian coordinates for specifying objects’ positions on canvas. The coordinate origin in SVG is in the top-left corner of the page, and the Y coordinate grows downward. However, in the Inkscape UI the origin is in the bottom-left corner and Y grows upward. Future versions may change this, most likely by making this “coordinate flip” optional to make life easier for those who edit SVG manually as well as in Inkscape.