See also: Graphic Presentation Attributes
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.
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)
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 SVG 1.1 Specification |
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. |
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. |
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. |
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. |
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 )
See also: Graphic Presentation Attributes