How to convert font size (in px) to the unit used in the document (mm) for svg

Question

I have svg created in inkscape here.

The document size is in mm. For the 2 text fields, the font size is given like this:

style="...;font-size:31.420084px;..."

So it is given in px. Now I want the size of the font related to the document size.

But how should I convert the font-size in px to mm? I would need something like dpi, but the document does not specify anything.

Answer 1

In your case, your viewBox matches your document dimensions:

width="164.28572mm"
height="78.10714mm"
viewBox="0 0 164.28572 78.10714"

that means all unit less values are in mm. Just specify your font-size without units (or in your case when you use css just keep your document untouched and use px).

The confusing part is, that px in svg are always user units and not device pixels, for that reason, your font-size is already given in mm... so font-size:31.420084px in your document is equal to font-size:31.420084mm in a viewBox less document (where user units equal to device pixels)

<svg viewBox="0 0 100 20" width="100mm" height="20mm">
  <text x="0" y="12" font-size="12px">12px</text>
</svg>
<svg >
  <text x="0" y="12mm" font-size="12mm">12mm</text>
</svg>

Thats where it gets confusing. In the next example "1mm" is equal to 3.6 user units, but because 1 user unit equals 1mm in the real world, one svg mm equals 3.6 real mm ...

<svg viewBox="0 0 50 50" width="50mm" height="50mm">
  <text x="0" y="5" font-size="1mm">font-size: 1mm</text>
  <text x="0" y="10" font-size="3.6">font-size: 3.6</text>
</svg>

Units in SVG are a bit wired, but well defined...

The SVGLength Interface has a Method convertToSpecifiedUnits. you can use that to convert between different units in SVG.

var l = svg.createSVGLength()
l.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX, 12)
l.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_MM)

out1.innerHTML = l.valueAsString

svg {
  width: 0;
  height: 0
}

<svg id="svg">
</svg>
12px = <span id="out1"></span>

Answer 2

The standard DPI used in an SVG document is the standard DPI that is specified by the CSS standard. That is 96dpi, or 96 standard CSS pixels per inch.

There are 25.4 mm per inch. So to convert px to mm, the formula will be:

mm = 25.4 * (px / 96)

So if we plug your original 31.420084px into that formula, the result is 8.31mm.

Note that CSS doesn't take into account the real word DPI of the device that you are rendering to. It uses that fixed approximation of 96pixels per inch. So you can't rely on the fact that an element with size 96px or 25.4mm will actually be that size on screen, or when printed.