Styling and Positioning SVG Text with tspan

The SVG <tspan> element functions as an inline text container within a parent <text> element, enabling granular styling and precise coordinate positioning for specific substrings. By wrapping portions of a text string in <tspan> tags, developers can alter visual properties like color, font size, and weight, as well as manipulate absolute or relative text alignment along the X and Y axes without breaking text selection or semantic flow.

Sub-Text Styling

Unlike standard HTML where inline formatting is achieved via <span>, <strong>, or <em>, SVG requires the <tspan> element to apply specific presentation attributes to parts of a <text> block. Any presentation attribute applied to a <tspan> overrides the inherited styles from the parent <text> node.

Common styling attributes applied to <tspan> include:

• fill and stroke: Changes the fill color, outline color, or opacity of a distinct word or character.
• font-family, font-size, and font-weight: Enables mixing different typefaces, sizes, and weights within the same textual line.
• text-decoration: Applies underlines, overlines, or strike-through styling to isolated text portions.
• letter-spacing and word-spacing: Adjusts the spacing between individual characters or words inside the target fragment.

<text x="20" y="40" font-family="sans-serif" font-size="16" fill="black">
  Regular text with <tspan fill="crimson" font-weight="bold">highlighted</tspan> words.
</text>

Absolute Positioning (x and y)

SVG text does not natively wrap automatically like standard HTML text. The <tspan> element addresses multiline formatting and specific coordinate placement using absolute positioning attributes:

• x: Sets the absolute horizontal anchor point for the <tspan> content on the SVG coordinate canvas.
• y: Sets the absolute vertical baseline for the <tspan> content.

By matching the x value of the parent <text> node and increasing the y value on subsequent <tspan> elements, you can create clean, manually wrapped, multiline text blocks within a single SVG text entity.

<text x="20" y="30" font-size="14">
  <tspan x="20" y="30">First line of text</tspan>
  <tspan x="20" y="50">Second line of text</tspan>
</text>

Relative Positioning and Offsets (dx and dy)

For micro-adjustments such as typographic kerning, subscripts, superscripts, or stepped text effects, <tspan> provides relative offset attributes:

• dx: Shifts the target text horizontally relative to the end position of the preceding character.
• dy: Shifts the target text vertically relative to the baseline of the preceding character.

These attributes accept single values or lists of whitespace- or comma-separated values to shift individual characters progressively:

<!-- Superscript Example -->
<text x="20" y="60" font-size="16">
  E = mc<tspan dy="-6" font-size="10">2</tspan>
</text>

<!-- Character-by-character horizontal shift -->
<text x="20" y="90">
  <tspan dx="0 5 10 15">WAVE</tspan>
</text>

Text Selection and Accessibility

Using <tspan> preserves the underlying string integrity. Screen readers read the entire <text> element as a single coherent sentence rather than disparate elements, and users can highlight and copy the entire phrase across <tspan> boundaries seamlessly. This makes <tspan> the standard mechanism for complex SVG typography where visual fragmentation is required without compromising document structure.