title: Scaling SVG objects defined in pixels to physical units?
body: <p>I have an SVG element defined with a width and height of "297mm" and "210mm", and no viewbox. I do this because I want to work inside an A4 viewport, but I want to create elements in pixels.</p>
  
  <p>At some point, I need to scale up an object defined in pixels so that it fits into part of the A4 page. For example, I might have an object which is 100 px wide, that I want to scale to 30mm horizontally.</p>
  
  <p>Is this possible? I think I need a second container with a new co-ordinate system, but I can't find any way to do this.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>It seems that I (or SVG) has misunderstood what a pixel is. I realised that I could size a line to 100%, and then get it's pixel size with <code>getBBox</code> to find the scaling required. I wrote this code and ran it on 2 clients, one with a 1280x1024 monitor (80dpi), and one with a 1680x1050 LCD (90dpi):</p>
  
  <pre><code>function getDotsPerInch() {
     var hgroup, vgroup, hdpi, vdpi;
  
     hgroup = svgDocument.createElementNS(svgNS, "g");
     vgroup = svgDocument.createElementNS(svgNS, "g");
     svgRoot.appendChild(hgroup);
     svgRoot.appendChild(vgroup);
  
     drawLine(hgroup, 0, 100, "100%", 100, "#202020", 1, 1);
     drawLine(vgroup, 100, 0, 100, "100%", "#202020", 1, 1);
  
     hdpi = hgroup.getBBox().width  * 25.4 / WIDTH;
     vdpi = vgroup.getBBox().height * 25.4 / HEIGHT;
  
     drawText(hgroup, "DPI, horizontal: " + hdpi.toFixed(2), 100, 100);
     drawText(hgroup, "DPI, vertical:   " + vdpi.toFixed(2), 100, 120);
  }
  </code></pre>
  
  <p>IE9, FF, Opera, and Chrome all agree that both monitors are <strong><em>96</em></strong> dpi horizontally and vertically (although Opera's slightly inaccurate), and Safari reports 0 dpi on both monitors. So svg just appears to have defined "pixels" as "96dpi". some quick Googling appears to confirm this, though I haven't found anything definitive, and most hits give 90dpi, with 96dpi as the FF variant.</p>