The <tspan> element defines a sub-string or sub-group of text that can be independently positioned or styled inside an SVG text flow.

Common usage includes changing the color, weight, or position of a portion of text within a <text> element.

DOM object: SVGTSpanElement
SVG2 spec: https://www.w3.org/TR/SVG2/text.html#TextElement

A <tspan> is a text run nested inside a <text> (or inside another <tspan>) - very similar in spirit to how HTML's <span> subdivides a <p>. Any text that isn't wrapped in a <tspan> simply inherits the parent <text>'s styling; wrapping a portion in <tspan> lets you override properties like fill, font-weight, or font-size, or explicitly move that portion using the per-glyph positioning attributes x, y, dx, dy, and rotate. Donner also supports the SVG text-length calibration attributes textLength and lengthAdjust on <tspan> runs. <tspan> does not exist on its own - it must always be a descendant of <text>.

<text x="20" y="40">
  You are
  <tspan dx="10" fill="red" font-weight="bold">
    NOT
  </tspan>
  a banana.
</text>

Attribute	Default	Description
x	0	Absolute X position(s) for the first (or each) glyph
y	0	Absolute Y position(s) for the first (or each) glyph
dx	(none)	Relative X shift(s) for glyphs
dy	(none)	Relative Y shift(s) for glyphs
rotate	(none)	Rotation(s) for each glyph in degrees
textLength	(none)	Author-specified total advance length for this run
lengthAdjust	spacing	spacing or spacingAndGlyphs adjustment mode