Three.js: SVGLoader - issue with unit conversion

[mathib]

Description of the problem

[edited issue]
I did some tests with loading an SVG drawing in three.js and I found something odd about the scaling/units.

I export a drawing from my CAD (units: meter) and apply a scaling (say 1:500). My CAD app uses the pt unit to set the size of the SVG geometry. When loaded by the three.js SVGLoader, the SVG units are applied in three.js (1 SVG unit (in my case pt) = 1 three.js unit). I assume my scene to be in meter, so in that case, I know which factor to use for scaling in three.js ((1/export scale) * 0.352778))

Three.js version

• [x] Dev
• [ ] r109
• [ ] ...
  (probably also in older versions)

Browser

• [ ] All of them
• [x] Chrome
• [ ] Firefox
• [ ] Internet Explorer

OS

• [ ] All of them
• [x] Windows
• [ ] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

Hardware Requirements (graphics card, VR Device, ...)

[mathib]

I did some tests with different units and the SVGLoader simply ignores the used units in the SVG file. According to the SVG specs, the SVG can have absolute units (mm, m, pt, in, ...) or user units (= px). The W3C specs do not define a conversion rate from px to absolute units, but leave this to the SVG processor:

The other absolute unit identifiers from CSS (i.e., pt, pc, cm, mm, in) are all defined as an appropriate multiple of one px unit (which, according to the previous item, is defined to be equal to one user unit), based on what the SVG user agent determines is the size of a px unit (possibly passed from the parent processor or environment at initialization time). For example, suppose that the user agent can determine from its environment that "1px" corresponds to "0.2822222mm" (i.e., 90dpi).

Wouldn't it make sense for the SVGLoader to use a fixed conversion for px to an absolute unit identifier? In this way, the user does not have to care about the different units used in the SVG (absolute or px) and the related conversion rates. The selected absolute unit (e.g. m) should of course then be clearly mentioned in the three.js specs

[mrdoob]

Do you have the conversion equation for every unit?

[mathib]

All absolute units that can be used (pt, pc, mm, cm, in) can be converted:

• 1pt = 1/72 in = 1/72 * 25.4mm = 0.3527777...mm
• 1pc (pica NOT parsec) = 1/6 in = 1/6 * 25.4mm = 4.2333333...mm
• 1in = 25.4mm

SVG can also contain relative lengths (em and ex are related to CSS):

• em = current font size of the element
• ex = x-height of the current font
• % = percentage (rel. to the size of the nearest containing SVG viewport)
  
  
  
  • horizontal length = x or width rel. to viewport width ("actual-width")
  
  
  • vertical length = y or height rel. to viewport height ("actual-height")
  
  
  • other lengths (e.g. stroke width) = sqrt((actual-width)2 + (actual-height)2))/sqrt(2)
  
  

On the other hand, px are equal to SVG user units. Here it depends on the mm/px rate three.js chooses (this corresponds with dpi):

• 90 dpi (px/inch) => 1px = 25.4/90mm = 0.2822222... mm
• 96 dpi (px/inch) => 1px = 25.4/96mm = 0.2645833... mm
• 300 dpi => 1 px = ...
• ...
  Maybe this can be an optional parameter for the loader, while the default is 90dpi?

[mrdoob]

/ping @yomboprime

[yomboprime]

Hi,

I can have a look at implementing units. I don't know if em or ex units will be easy. But % will be certainly not possible yet, since viewports are not implemented.

There can be an option in the loader for the dpi (default 90)

Luckily parsecs are not needed 😂