These are CSS properties, written as attributes or in style rules, and all inherited.
The attributes that position text (x, dx, rotate,
textLength, startOffset) are on the
text elements page.
Fonts
| Property | Values |
|---|---|
font-family | a comma-separated list of family names, quoted when they contain spaces, ending with a generic family: serif, sans-serif, monospace, cursive, fantasy, system-ui. The explorer lists every name, and says which the file defines with @font-face. |
font-size | length, percentage, or a keyword (xx-small to xx-large, smaller, larger). Default medium (16 px in browsers). |
font-style | normal, italic, oblique |
font-weight | normal (400), bold (700), bolder, lighter, or a number from 1 to 1000 |
font-stretch | keywords from ultra-condensed to ultra-expanded, or a percentage |
font-variant, font-kerning, font-size-adjust | as in CSS |
font | the CSS shorthand: italic bold 12px/1.2 "Open Sans", sans-serif |
Layout
| Property | Values | Meaning |
|---|---|---|
text-anchor | start, middle, end | Which end of the text run sits at its x. |
text-decoration | none, underline, overline, line-through | Lines drawn with the text’s fill and stroke. SVG 2 uses the CSS longhands too. |
letter-spacing, word-spacing | normal or length | Extra space between letters and words. |
writing-mode | horizontal-tb, vertical-rl, vertical-lr; SVG 1.1: lr-tb, rl-tb, tb-rl, lr, rl, tb | The direction lines run and stack. |
direction, unicode-bidi | ltr, rtl; normal, embed, bidi-override and others | The base direction and handling of right-to-left scripts. |
dominant-baseline | auto, alphabetic, middle, central, hanging, text-before-edge, text-after-edge, ideographic, mathematical, no-change, reset-size, use-script | The baseline the text is aligned on. |
alignment-baseline, baseline-shift | baseline names; baseline, sub, super, or a length or percentage | How a tspan lines up against its parent; superscripts and subscripts. |
text-rendering | auto, optimizeSpeed, optimizeLegibility, geometricPrecision | A hint for hinting and anti-aliasing. |
white-space | normal, pre, pre-wrap, nowrap and others | SVG 2: replaces xml:space. |
glyph-orientation-horizontal, glyph-orientation-vertical, kerning | angle; auto or length | SVG 1.1 only. |
inline-size, shape-inside, shape-subtract, line-height | length; shapes; length | SVG 2 text wrapping. Support is thin. |
Text is painted like shapes
Text is filled with fill and outlined with stroke like a
shape, so fill="url(#gradient)" works on text. The fonts have to exist:
a family name the reader does not have falls back to the next in the list, and the
result changes the width of every line. To make a picture independent of fonts, embed
the font with @font-face and a data: address, or convert the
text to paths.
Not described
This page is partial.
- Reference: the CSS Fonts longhands (
font-variant-*,font-feature-settings,font-variation-settings), the baseline model and the SVG 2 wrapping properties are not described in full. - Viewer: lists font names and where they come from, and checks
text-anchor,writing-modeand a few other enumerations. Font sizes and weights are not checked, fonts are not loaded, and text is not measured.