SVG 'text' element

The SVG <text> element is used to draw text as a part of an SVG document. The <text> element defines a single string of text to be rendered. The glyphs are defined with the XML character data. The <text> element has the following attributes:

  • x and y attributes define coordinates for the current text position. If there are multiple x or y coordinates the position of every character is defined. The dafault value is '0'.
  • dx and dy attributes define supplemental shifts along the x- ans y-axis. The dafault value is '0'.
  • rotate attribute defines supplemental rotation to each character. The dafault value is '0'.
  • textLength attribute sets the length for the text that will be displayed with an SVG viewer. The default value is the text's normal length.
  • lengthAdjust attribute indicates the type of adjustments. Has two values 'spacing' and 'spacingAndGlyphs'

Here are several simple code examples:

<text x="20" y="20" dx="10" dy="10" textLength="60" rotate="30 15 10 90 10 0 45">
SVG text
</text>
<text x="10" y="40" fill="green" font-family="Times" font-size="14">
text example
</svg>
<text x="10" y="40" fill="green" font-family="Times" font-size="36"
letter-spacing="3" stroke="red" stroke-width="1">
styled text
</svg>

Here are the resulting images:

The following SVG elements also work with text: