SVG: Font Size
This page shows what the size unit mean exactly for
Default Font Size
If no font size is set, default is 16.
Font Size Means Baseline to Baseline
Font size means baseline to baseline.
Unit is User Coordinate
When you use font size attribute, e.g.
<text x="0" y="100" font-size="16">E 16</text>,
the unit is user coordinate.
[see SVG: viewBox, User Coordinate]
Percentage value for
font-size means with respect to default
font-size="100%" is the same as
font-size Attribute vs CSS
Font size can also be specified by CSS, example:
When using CSS, a unit such as “px” is required. (this is required by CSS)
When using CSS, the “px” length has exact same meaning as SVG font size attribute without unit.
CSS unit such as
em do not work.
CSS value such as
, are translated into 16px, which in turn is 16 units in SVG user coordinates.
They may become tiny or invisible, or huge and fill the screen, when you use user coordinates.
Percentage Value with CSS
Percentage value with CSS has the same meaning as SVG attribute.
Text – SVG 1.1 (Second Edition)#FontSizeProperty
If you have a question, put $5 at patreon and message me.