SVG text: syntax, positioning and live examples

1. SVG text basics

The <text> element draws a string at a position in the SVG coordinate system. Unlike a path, it remains text: browsers can select it, screen readers can expose it, and its appearance depends on the selected font being available.

The x and y attributes set the start of the text baseline. The baseline is not the top or the vertical center of letters; it is the line on which most characters sit.

<svg viewBox="0 0 400 120" role="img" aria-label="Hello SVG">
  <text x="24" y="72" font-size="42" fill="#2563eb">
    Hello, SVG
  </text>
</svg>

2. Positioning and alignment attributes

SVG positions text precisely and supports adjustments for each text element or span. These attributes are especially useful in charts, diagrams, logos and other graphics where the browser's normal document flow is not enough.

Center text on a coordinate

Pair text-anchor="middle" with dominant-baseline="middle" to center text on an exact point.

<text x="200" y="60"
      text-anchor="middle"
      dominant-baseline="middle">
  Centered label
</text>

3. Multi-line and mixed-style text with tspan

SVG does not wrap text automatically. Use one <tspan> per line and give each line a new x value with a dy offset. A tspan can also style just part of a sentence.

<text x="24" y="36" font-size="24">
  <tspan x="24" dy="0">First line</tspan>
  <tspan x="24" dy="32" fill="#dc2626" font-weight="700">
    Second line in red
  </tspan>
</text>

4. Put text on a path with textPath

A <textPath> references a <path> in <defs>. The text follows the path geometry instead of a straight baseline. Use an explicit ID and reference it through href.

<svg viewBox="0 0 500 160">
  <defs>
    <path id="curve" d="M 40,120 Q 250,10 460,120" />
  </defs>
  <text font-size="28">
    <textPath href="#curve">Text following a curve</textPath>
  </text>
</svg>

Dashed path guides

A dashed stroke helps show the path that text follows without making the guide visually dominant. stroke-dasharray defines alternating dash and gap lengths; stroke-dashoffset moves that pattern along the path. These attributes style the visible guide path, not the text itself.

<path d="M 40,120 Q 250,10 460,120"
      fill="none"
      stroke="#94a3b8"
      stroke-dasharray="6 4"
      stroke-dashoffset="8" />

Position, alignment and direction on a path

startOffset sets where text begins along the path. It accepts a length or a percentage of the total path length. Combine it with text-anchor="middle" and startOffset="50%" to center a label on a curve. Reversing the path's d direction reverses the direction in which text travels.

<text text-anchor="middle" font-size="24">
  <textPath href="#curve" startOffset="50%">
    Centered on the curve
  </textPath>
</text>

// JavaScript: convert a percentage to SVG units
const offset = path.getTotalLength() * 0.5;

For multiple curved lines, use a separate, parallel path for each line. Putting multiple textPath elements one after another on the same path continues the text flow; it does not create new lines.

5. SVG text or SVG paths?

Keeping a <text> element is best when the content must remain selectable, accessible, searchable or editable. Converting glyphs to paths is best when the visual result must be identical on every device, including devices without the chosen font.

If an SVG containing <text> is shared as a standalone asset, include a font with @font-face, use a common fallback font, or accept that its metrics may change. Use the Text-to-SVG converter when portability is more important than editability.

6. Typography, length and spacing

Most font and paint properties work in SVG just as they do in CSS. They can be SVG presentation attributes, inline styles or stylesheet rules. The SVG-specific length attributes are useful when a label must occupy an exact width.

<text x="24" y="70"
      font-family="Inter, Arial, sans-serif"
      font-size="32"
      font-weight="700"
      letter-spacing="1.5"
      word-spacing="4"
      fill="#0f172a">
  Product label
</text>

<text x="24" y="110" textLength="260" lengthAdjust="spacingAndGlyphs">
  Fit this text into 260 units
</text>

• letter-spacing and word-spacing adjust spacing without changing glyph shapes.
• textLength asks the renderer to fit text into a target length.
• lengthAdjust="spacing" changes gaps only; spacingAndGlyphs may also stretch glyphs.
• Use font-kerning, OpenType features and a loaded web font when exact typography matters.

7. Per-glyph positioning and rotation

The positioning attributes accept a space-separated list, so an individual character can be moved or rotated. This is useful for diagram annotations and custom display effects, but it is not a replacement for a proper typesetting engine.

<text x="50 82 118 156"
      y="80"
      rotate="0 -10 8 0"
      font-size="42">
  SVG!
</text>

<text x="40" y="140" dx="0 5 0 -3" font-size="28">
  Adjusted glyphs
</text>

Lists map values to successive glyphs. Omitted values use the current position or rotation. Test output with the actual font, because glyph advances and kerning influence the final spacing.

8. Responsive SVG text

Use a stable viewBox as the internal coordinate system and let CSS scale the outer SVG. This keeps positions, paths and text aligned while the graphic changes size.

<svg viewBox="0 0 600 160"
     width="100%"
     role="img"
     aria-labelledby="card-title">
  <title id="card-title">Responsive SVG label</title>
  <text x="50%" y="50%"
        text-anchor="middle"
        dominant-baseline="middle"
        font-size="36">
    Scales with the viewBox
  </text>
</svg>

• Use a viewBox; avoid relying only on fixed pixel width and height.
• Use percentage coordinates for centered or proportionally positioned labels.
• Set preserveAspectRatio deliberately when an SVG can be stretched into containers with different proportions.
• For interfaces, consider CSS media queries or separate SVGs if text becomes unreadable at small sizes.

9. Fill, stroke, gradients and effects

SVG text can use the same paint servers and filter effects as shapes. A common readable outlined style uses both fill and stroke, with paint-order to keep the outline behind the fill.

<defs>
  <linearGradient id="title-gradient" x1="0" x2="1">
    <stop offset="0" stop-color="#2563eb" />
    <stop offset="1" stop-color="#9333ea" />
  </linearGradient>
</defs>
<text x="30" y="70" font-size="48"
      fill="url(#title-gradient)"
      stroke="#1e293b"
      stroke-width="1.5"
      paint-order="stroke">
  Gradient title
</text>

CSS classes work well for shared styling. Keep stroke widths proportional to the viewBox, and test contrast when a text color is combined with a photographic or transparent background.

10. Accessibility, language and font fallback

Text inside SVG is often exposed to assistive technology, but that is not a substitute for a meaningful SVG name. Give informational graphics a <title> and, when needed, a longer <desc>. Decorative SVGs should be hidden from assistive technology.

<svg role="img" aria-labelledby="sales-title sales-description">
  <title id="sales-title">Monthly sales</title>
  <desc id="sales-description">Sales increased from January to March.</desc>
  <text x="20" y="35">March: 120 orders</text>
</svg>

<svg aria-hidden="true">
  <!-- decorative text treatment only -->
</svg>

• Set lang and dir appropriately for multilingual or right-to-left text.
• Use a realistic font fallback stack and ensure the web font contains all required characters.
• Do not put long paragraphs in SVG merely for layout; HTML is usually better for reading, reflow and translation.

11. Practical SVG text recipes