Smarter SVG: text

Summary

This guide shows how to embed text in your SVG content.

Basic Text

• x
• y
• dx
• dy
• textLength
• lengthAdjust
• tspan

Referencing Text

• tref

Advanced Effects

• rotate
• textPath

Font Glyphs

CSS2 Font:

• font
• font-family
• font-size
• font-size-adjust
• font-stretch
• font-style
• font-variant
• font-weight

CSS2 Text:

• direction
• unicode-bidi
• letter-spacing
• text-decoration
• word-spacing

The following SVG properties are not defined in CSS2. The complete normative definitions for these properties are found in this specification:

Text properties:

• alignment-baseline
• baseline-shift
• dominant-baseline
• glyph-orientation-horizontal
• glyph-orientation-vertical
• kerning
• text-anchor
• writing-mode

(Overview / Shapes / Text / Graphics / Filters / Animation / Interaction)