Scaling SVG objects defined in pixels to physical units?

Question

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.

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.

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.

EDIT

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 getBBox 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):

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);
}

IE9, FF, Opera, and Chrome all agree that both monitors are 96 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.

Wow - this question is a year old, raises an important point concerning the definition of dpi for SVG, is clearly related to SVG, and shows some research effort. And, despite that, 5 people have just decided to close it as off-topic, and someone's just down-voted it. Anyone care to explain? — EML
And one of them is 16 years old, and none of them appears to have any interest in SVG... — EML
@EML Heads up: this has been discussed in the Tavern on the Meta chatroom (page through the next two day to see my comments). I entirely agree with you and appreciate your frustration, but please refrain from age-related remarks like the one in your latest comment. I don't think your question was downvoted by anbody: questions that are closed as off-topic receive an automatic downvote, which has now been automatically removed. — Jeremy
Pixels in web tech are "CSS pixels" which use a 96 dpi display as a standard. Please see the CSS3 values: w3.org/TR/2013/CR-css3-values-20130730 (ignore the deprecation warning - this part is still valid) — Michael Mullany

Robert Longson Robert Longson · Accepted Answer · 2012-05-16T13:01:13

You can nest <svg> elements and use the viewBox attribute on the child element to get a new coordinate system. Give the child <svg> element x, y, width and height attributes of where you want it to appear on the parent in the parent's co-ordinate system.

Scaling SVG objects defined in pixels to physical units?

1 Answers