Analysis of SVG Units

Since my last update, my branch for phase one of my Google Summer of Code project, unit refactoring, has been merged into the Inkscape trunk. I have now created a new branch for phase two, improvement of unit support. In order to improve unit support, one must first start with how units are defined in the SVG specification. In SVG, there are two types of coordinates, those defined in user space and those defined in real world units. If no unit is specified, it is assumed to be in user space units. By defining the document size in real world units and applying an equivalent viewBox attribute, one can define the user space unit to be a real world unit, e.g. millimeters.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="74mm" height="52mm" version="1.1"
     viewBox="0 0 74 52" xmlns="http://www.w3.org/2000/svg">
  <!-- The dimensions for this rectange are given in user space, but
       due to the viewBox attribute having the same values as the
       document size specified in millimeters, the user units are
       millimeters. -->
  <rect x="10" y="5" width="30" height="20"/>
</svg>


Viewbox diagram

As the width and height of the document are 74mm and 52mm respectively and the viewBox stretches the user space width from 0 to 74 and the user space height from 0 to 52, the user space unit is equivalent to millimeters.

The other method for representing units is using real world units.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="74mm" height="52mm" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <!-- The dimensions for this rectange are given in real
       world units. -->
  <rect x="10mm" y="5mm" width="30mm" height="20mm"/>
</svg>


Real world units diagram

The dimensions of the rectangle are specifically specified in millimeters, giving the same result as the first example.

Unit handling becomes more troublesome when the two are combined, however.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="74mm" height="52mm" version="1.1"
     viewBox="0 0 74 52" xmlns="http://www.w3.org/2000/svg">
  <!-- The dimensions for this rectange are given in real world
       units when the user space units are equivalent to real
       world units. -->
  <rect x="10mm" y="5mm" width="30mm" height="20mm"/>
</svg>


Combined units diagram

While one might expect this example to be the same as the previous two, it is not due to the way units are handled in SVG. When no unit is specified, the unit is implicitly a px, e.g. 10 and 10px are equivalent. Real world units are then defined in the specification as an exact number of pixels, e.g. 1mm would be 3.543307px and therefore 3.543307 user units at 90 pixels per inch resolution. Hence, the last example is scaled by a factor of 3.543307. Also, if any sort of scaling transformations are applied, the size of real world units are scaled by an equivalent amount.

For implementation of document-wide default units, I plan on using the method illustrated in the first example, defining the page size in real world units and applying an appropriate viewBox attribute in addition to the current inkscape:document-units attribute. When other units are specified for individual objects, the unit will be specified on the dimensions, after first applying the appropriate transformation for user space units. Although this method, as well as transformations, will result in a similar loss of precision as the current method of specifying everything in px, I don’t see a better way and the appropriate unit will still be shown each time the object is selected.

This entry was posted in and tagged , , , . Bookmark the permalink.

3 Responses to Analysis of SVG Units

  1. Jelle says:

    Matthew,

    What would be interesting to most people is to be able to set the number of pixels per mm for instance. When using Inkscape now I end up with horrible decimals and basically using mm is impossible when you want to use this content for screen (web editing). Having 90px per Inch being a fixed number is really a killer considering that people use a wide variety of px/inch/cm resolutions worldwide. It really should be device independent.

Leave a Reply

Your email address will not be published. Required fields are marked *