Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

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

stop color.svg

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