Text and Font Attributes

By mbystedt on Feb 28, 2014, 11:39:13 PM

FontSpecification

Font specification in SVG is based on CSS. Any CSS tutorial or the CSS2 specification will be able to give more detail on how most of these attributes work. See: SVG Text

Attribute	Values	Initial	Inherits	Animate	Comments
font-family	CSS font family	Depends	Yes	Yes	Name of font or font family. See CSS2 Specification
font-size	(pt, px, em, %, etc \| inherit)	medium	Yes	Yes	The font size. Any SVG unit can be used.
font-size-adjust	( # \| none \| inherit )	none	Yes	Yes	Attempt to preserve x-height of the first choice font when font substitution is necessary
font-stretch	See Below	normal	Yes	Yes	Sets how condensed or expanded letters should be rendered.
font-style	(normal \| italic \| oblique \| inherit)	normal	Yes	Yes	Style in which letters are rendered.
font-variant	(normal \| small-caps \| inherit)	normal	Yes	Yes	'small-caps' makes all lower case letters render as small capitals.
font-weight	See below	normal	Yes	Yes	The thickness of the font.

font-weight: (normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit)

Text

Only the 'text' element uses this attribute.

Attribute	Values	Initial	Inherits	Animate	Comments
writing-mode	( lr-tb \| rl-tb \| tb-rl \| lr \| rl \| tb \| inherit )	lr-tb	Yes	No	Sets the writing mode. See: Writing Direction

TextContent

Attribute	Values	Initial	Inherits	Animate	Comments
alignment-baseline	See below	auto	Yes	Yes	See: Text alignment; SVG 1.1 Specification
baseline-shift	( baseline \| sub \| super \| percentage \| length \| inherit )	baseline	No	Yes	See SVG 1.1 Specification
direction	( ltr \| rtl \| inherit )	inherit	Yes	No	The writing direction of the text.
dominant-baseline	See below	auto	Yes	Yes	See SVG 1.1 Specification
glyph-orientation-horizontal	( angle \| inherit )	0	Yes	No	Only applied in horizontal writing mode. Values other than 0, 90, 180, 270 are rounded to nearest value. See: Glyph Orientation
glyph-orientation-vertical	( auto \| angle \| inherit )	auto	Yes	No	Only applied in vertical writing mode. 'auto' picks a value which best matches the characters. Values other than 0, 90, 180, 270 are rounded to nearest value. See: Glyph Orientation
kerning	( auto \| length \| inherit )	auto	Yes	Yes	Sets how wide character glyphs are. 'auto' uses the font's kerning table to decide how wide the character is.
letter-spacing	( normal \| length \| inherit )	normal	Yes	Yes	Sets how big the space is between letters.
text-anchor	( start \| middle \| end \| inherit )	start	Yes	Yes	Where the text's bounding box is anchored to the initial character position. See: Text Anchor
text-decoration	( none \| underline \| overline \| line-through \| blink \| inherit )	none	No	Yes	The decoration given the text. 'blink' support is optional for SVG viewers.
unicode-bidi	( normal \| embed \| bidi-override \| inherit )	normal	No	No	See CSS2 specification.
word-spacing	( normal \| length \| inherit )	normal	Yes	Yes	Sets how big the space is between words.