# 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.

For example,

- 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 tutorial

- SVG Basics
- Path
- Path Elliptical Arc
- Circle Arc
- Specifying Styles
- Shape Styles
- Viewport
- viewBox
- ViewBox Unit Size
- Coordinate Transformation
- Text Element
- Font Size
- Structure Elements
- Scripting SVG
- SVG Clock
- Animation

#### Canvas Intro

If you have a question, put $5 at patreon and message me.