SVG: ViewBox, User Coordinate's Unit Size
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.
Here's a line thickness of 0.5, with user coordinate 10 per side, in a svg box of width 100 and height 100 pixels.
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's a formula:
- w = view port width, in pixels.
- u = view box width.
- s = u / w
The s is the scaling factor to multiply by user coordinate unit to get a equivalent length in absolute coordinate.
- if view port has width 100.
- if user coordinate has width 10.
- then, s is 10/100 = 0.1
- So, if you want a line thickness of 5 pixels, now it should be 5 * 0.1 = 0.5
See also: JS: Find Element Width
- SVG Basics
- Path Elliptical Arc
- Circle Arc
- Specifying Styles
- Shape Styles
- ViewBox Unit Size
- Coordinate Transformation
- Text Element
- Font Size
- Structure Elements
- Scripting SVG
- SVG Clock
If you have a question, put $5 at patreon and message me.