title: SVG and DPI, absolute units and user units: Inkscape vs. Firefox vs. ImageMagick
body: <p>I try to auto-generate an SVG file intended to be printed on a certain size (A4). I wish to use a path in it, which only allows 'user units', not 'absolute units'.</p>
  
  <p>It seems to me that it is impossible to 'publish' an SVG file that has absolute units (e.g. document size) and a path <em>anywhere</em>, because I cannot get it to work properly across viewers.</p>
  
  <p>Is there a way to get some consistency in rendering, like specifying a 'default DPI'?</p>
  
  <p>Or put differently: Can I get my example below to render the same in all viewers without abandoning absolute units at all?</p>
  
  <p>Related: Is there a way to force any of the applications below to render the image in the same way as one of the others? (E.g. I tried the <code>-density</code> option of 'convert', but I couldn't get the output to match Inkscape's or Firefox' output.)</p>
  
  <hr>
  
  <p>Example:</p>
  
  <p>I've created one SVG file, with three black squares (rect) with a red diagonal (path):</p>
  
  <ul>
  <li>Left: square and diagonal in user units</li>
  <li>Middle: square and diagonal in inch (seemed to me the most logical choice, but is not allowed)</li>
  <li>Right: square in mm, diagonal in user units</li>
  </ul>
  
  <p>Which renders differently in different viewers:</p>
  
  <ul>
  <li>Inkscape: 90 DPI, all squares same size, red diagonal matches</li>
  <li>Firefox: 96 DPI?, latter squares to large (or diagonal to short)</li>
  <li>Convert: 72 DPI, latter squares to small (or diagonal to long)</li>
  </ul>
  
  <p><a href="http://www.astro.rug.nl/~buddel/files/svgtestunits/testunits2.svg" rel="noreferrer">Code</a>:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8" standalone="no"?&gt;
  &lt;svg
     xmlns:svg="http://www.w3.org/2000/svg"
     xmlns="http://www.w3.org/2000/svg"
     version="1.1"
     width="200mm"
     height="100mm"
     &gt;
    &lt;g transform="translate(50,50)"&gt;
      &lt;rect
         width="100."
         height="100."
         x="10"
         y="10" /&gt;
      &lt;path style="stroke: #ff0000" d="M 10 10 L 110 110" /&gt;
    &lt;/g&gt;
    &lt;g transform="translate(200,50)"&gt;
      &lt;rect
         width="1.111in"
         height="1.111in"
         x="0.1111in"
         y="0.1111in" /&gt;
      &lt;path style="stroke: #ff0000" d="M 0.1111in 0.1111in L 1.111in 1.111in" /&gt;
    &lt;/g&gt;
    &lt;g transform="translate(350,50)"&gt;
      &lt;rect
         width="1.111in"
         height="1.111in"
         x="0.1111in"
         y="0.1111in" /&gt;
      &lt;path style="stroke: #ff0000" d="M 10 10 L 110 110" /&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Inkscape (my default 'viewer'):</p>
  
  <p><a href="https://i.stack.imgur.com/GDHJY.png" rel="noreferrer"><img src="https://i.stack.imgur.com/GDHJY.png" alt="Alt text"></a></p>
  
  <p>Firefox (note that the red line does not reach the lower right corner. I made a screenshot and cropped sort of arbitrarily):</p>
  
  <p><a href="https://i.stack.imgur.com/1UqlX.png" rel="noreferrer"><img src="https://i.stack.imgur.com/1UqlX.png" alt="Firefox"></a></p>
  
  <p>ImageMagick (convert, no options besides filenames given):</p>
  
  <p><a href="https://i.stack.imgur.com/rqYCi.png" rel="noreferrer"><img src="https://i.stack.imgur.com/rqYCi.png" alt="Alt text"></a></p>