apike.ca

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-stretch: (normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit)

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
baseline-shift
( baseline | sub | super | percentage | length | inherit )
baseline
No
Yes
direction
( ltr | rtl | inherit )
inherit
Yes
No
The writing direction of the text.
dominant-baseline
See below
auto
Yes
Yes
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
word-spacing
( normal | length | inherit )
normal
Yes
Yes
Sets how big the space is between words.

alignment-baseline: (auto | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | inherit )

dominant-baseline: (auto | use-script | no-change | reset-size | ideographic | alphabetic | hanging | mathematical | central | middle | text-after-edge | text-before-edge | inherit )