SVG: ViewBox, User Coordinate's Unit Size

By Xah Lee. Date: 2019-06-09.

When in user coordinate, any unit specified (for line thickness, font, etc) is also in user coordinate.

For example, here's a line thickness of 5, with default coordinate, of width 100 and height 100 pixels.

<svg width="100" height="100">
<path d="M 0 0 L 100 100 "
style="stroke:black; fill:yellow; stroke-width:5" />

Here is a line thickness of 0.5, with user coordinate 10 per side, in a svg box of width 100 and height 100 pixels.

<svg width="100" height="100" viewBox="0 0 10 10" >
<path d="M 0 0 L 100 100 "
style="stroke:black; fill:yellow; stroke-width:0.5" />
</svg>

How to Get the Right Line Thickness or Font Size

Normally, without user coordinate, line thickness of 1 is a natural size, they are not too thick, not too thin, in any device.

(Similarly, font size of 16 is a proper size.)

But when using user coordinate, line thickness of 1 may cover the screen or too thin to be visible.

We want to find the “right size” that corresponds to 1 pixel in default (absolute) coordinate.

Here is a formula:

The s is the scaling factor to multiply by user coordinate unit to get a equivalent length in absolute coordinate.

For example,