SVG: Font Size

By Xah Lee. Date: .

This page shows what the size unit mean exactly for text element.

Default Font Size

If no font size is set, default is 16.

E none E size 16 
<text x="0" y="50">E none</text>
<text x="0" y="70" font-size="16">E size 16</text>
No font size vs 16. You can see they are the same size.

Font Size Means Baseline to Baseline

Font size means baseline to baseline.

E 
<svg width="100" height="100">
<text x="0" y="100" font-size="100">E</text>
SVG with heigh 100 and font-size 100. You can see it doesn't fill the box because 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]

E 100 
<svg width="100" height="100">
<text x="0" y="100" font-size="100">E 100</text>
</svg>
E 100 
<svg width="100" height="100" viewBox="0 0 500 500">
<text x="0" y="500" font-size="100">E 100</text>
Both SVG have font-size 100. But the first SVG has heigh width 100 100, the second SVG has user coordinate heigh width 500 500.

Percentage Value

Percentage value for font-size means with respect to default font-size value.

font-size="100%" is the same as font-size="16"

E 16 E 100% 
<svg width="100" height="100">
<text x="0" y="50" font-size="16">E 16</text>
<text x="0" y="70" font-size="100%">E 100%</text>
</svg>
font-size="16" vs font-size="100%", in a SVG box of width height 100 100.
E 200% 
<svg width="100" height="100">
<text x="0" y="100" font-size="200%">E 200%</text>
</svg>
E 200% 
<svg width="100" height="100" viewBox="0 0 500 500">
<text x="0" y="500" font-size="200%">E 200%</text>
</svg>
Both SVG's text have font-size="200%", but the first SVG has width height 100 100, the second SVG has user coordinate width height 500 500.

font-size Attribute vs CSS

Font size can also be specified by CSS, e.g. style="font-size:16px".

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.

E 30 E 30px 
<text x="0" y="50" font-size="30">E 30</text>
<text x="0" y="80" style="font-size:30px">E 30px</text>

Percentage Value with CSS

Percentage value with CSS has the same meaning as SVG attribute.

E 100% E 100% 
<svg width="100" height="100">
<text x="0" y="50" font-size="100%">E 100%</text>
<text x="0" y="70" style="font-size:100%">E 100%</text>
</svg>
font-size="100%" and style="font-size:100%" are the same. Here in a SVG with width height 100 100.
E 200% E 200% 
<svg width="100" height="100" viewBox="0 0 500 500">
<text x="0" y="250" font-size="200%">E 200%</text>
<text x="0" y="500" style="font-size:200%">E 200%</text>
font-size="200%" vs style="font-size:200%", in user coordinate width height 500 500.

Reference

Text – SVG 1.1 (Second Edition)#FontSizeProperty

Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth
♥

Ask me question on patreon