How to Use SVG Text, tspan & textPath: Curved Text & Typography Guide (2026)

1. Anatomical Foundations: The <text> Element & Coordinate Anchors

The fundamental container for all vector typography is the <text> element. Unlike HTML block elements (such as <p> or <div>), an SVG text element does not have margins, padding, or an intrinsic width that causes words to automatically wrap to the next line.

Instead, an SVG text element establishes a cursor coordinate origin defined by its x and y attributes:

<svg viewBox="0 0 400 120" xmlns="http://www.w3.org/2000/svg">
  <text x="40" y="70" font-family="'Inter', sans-serif" font-size="28" fill="#F2F2F2">
    Production Vector Typography
  </text>
</svg>

The most common stumbling block for web developers transitioning from CSS to SVG is the meaning of the y coordinate. In HTML, placing an element at top: 70px positions its top border at 70px. In SVG, however, the y attribute defaults to the alphabetic baseline upon which Roman letters (such as 'A', 'H', 'x') sit. Any descending characters (such as 'g', 'j', 'p', 'q', 'y') extend below this y coordinate.

2. Multi-Line Spanning & Relative Offsets: Mastering <tspan>

Because native SVG does not support automated word wrapping (until the experimental SVG 2 inline-size property achieves universal adoption), creating multi-line text blocks requires the <tspan> element.

A <tspan> functions like an HTML <span>, but with coordinate-shifting capabilities via four positioning attributes:

• x & y (Absolute Coordinates): Hard-resets the rendering cursor to a new absolute position in the viewBox. Setting x="40" on a child <tspan> returns the cursor to the left margin.
• dx & dy (Relative Delta Offsets): Shifts the cursor relative to the end position of the preceding glyph. For example, dy="1.2em" moves down by exactly one line height increment.

The Clean Multi-Line Paragraph Pattern

To author a clean, responsive multi-line paragraph without hardcoding pixel heights, combine absolute x with relative dy:

<text x="30" y="50" font-family="'Inter', sans-serif" font-size="16" fill="#D4D4D4">
  <tspan x="30" dy="0">First line of descriptive metadata text.</tspan>
  <tspan x="30" dy="1.4em">Second line automatically indented with proportional spacing.</tspan>
  <tspan x="30" dy="1.4em" font-weight="700" fill="#C1DD2D">Third line highlighted with custom brand token color.</tspan>
</text>

Using dy="1.4em" ensures that if you adjust the parent font-size in CSS, the line spacing scales proportionally without overlapping lines.

3. The Baseline Problem: dominant-baseline vs. alignment-baseline

Vertical alignment in SVG has confused developers for decades because SVG defines over a dozen different baselines derived from global font tables. The two primary attributes governing vertical alignment are:

1. dominant-baseline: Applied to the parent <text> (or inherited by children), this property establishes which baseline table from the font metrics is used as the active reference.
2. alignment-baseline: Applied to child elements (like <tspan> or <textPath>), specifying how the child aligns relative to its parent's dominant baseline.

4. Fixing the Infamous Safari/WebKit Baseline Alignment Bugs

Developers who test exclusively in Chrome or Firefox are often shocked to discover that their centered SVG text appears noticeably shifted downward or upward in Apple Safari (iOS and macOS). This discrepancy stems from two long-standing WebKit rendering behaviors:

• Inheritance Drop on Nested Spans: In WebKit, a dominant-baseline assigned to the outer <text> container frequently fails to cascade down into child <tspan> elements if those spans have independent styling or transforms applied.
• Font Metric Discrepancies: WebKit and Blink calculate the capital em-height differently when rendering system fonts like system-ui or -apple-system versus web fonts like Inter or Roboto.

<!-- Cross-Browser Bulletproof Centered Text -->
<text x="100" y="50"
      text-anchor="middle"
      dominant-baseline="central"
      alignment-baseline="central"
      style="dominant-baseline: central; alignment-baseline: central;">
  <tspan dominant-baseline="central" alignment-baseline="central">Rock Solid in Safari</tspan>
</text>

5. Flowing Text Along Arbitrary Geometry: The <textPath> Architecture

The true superpower of SVG typography is the <textPath> element. Unlike HTML and CSS, which require complex canvas hacks or splitting text into dozens of rotated spans with JavaScript, SVG natively bends and warps text along any mathematical vector curve.

The Core Mechanism

1. Define the Guide Path in <defs>: Author a vector path inside the SVG’s <defs> section (or directly in the canvas) and give it a unique id. The path can be a Bézier curve, an arc, a circle, or a complex wave.
2. Wrap Text in <textPath>: Inside your <text> element, wrap the content in a <textPath> tag and link it to the path's ID via the href attribute (e.g., href="#guideCurve").
3. Browser Tangent Mapping: The browser computes the arc-length parameterization of the path and calculates the tangent vector at each character's position, rotating and translating each glyph individually along the curve.

<svg viewBox="0 0 500 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- S-Curve Path Definition -->
    <path id="waveCurve" d="M 40 140 C 160 40, 340 240, 460 140" fill="none" />
  </defs>

  <!-- Visible Guide Line (Optional) -->
  <path d="M 40 140 C 160 40, 340 240, 460 140" fill="none" stroke="#333" stroke-dasharray="4 4" />

  <text font-family="'Inter', sans-serif" font-size="20" font-weight="700" fill="#C1DD2D">
    <textPath href="#waveCurve" startOffset="50%" text-anchor="middle">
      Dynamic Curving Vector Typography Along Path
    </textPath>
  </text>
</svg>

6. Path Offsets, Alignment & Curve Directionality

When positioning text along a curve, three key attributes govern its layout:

• startOffset: Controls the distance along the path where the text begins. It accepts either an absolute length (e.g., startOffset="80px") or a percentage of the total path length (e.g., startOffset="50%").
• text-anchor: Works in tandem with startOffset. If you set startOffset="50%" and text-anchor="middle", the text is centered along the curve. If text-anchor="start", the beginning of the text starts at 50%. If text-anchor="end", the end of the text stops at 50%.
• side (SVG 2): Dictates which side of the path the glyphs sit on (left or right). The default is left (relative to the path's drawing direction).

7. Interactive Developer Studio: Live Curved Text & Baseline Studio

Experiment with the live studio below to test typography along different vector curves, adjust start offsets, toggle baseline alignments, and generate copy-paste SVG code.

// Generated SVG Typography Code

8. Web Fonts, FOUT/FOIT Prevention & System Stacks in SVG

When using custom web fonts (like Inter, Plus Jakarta Sans, or JetBrains Mono) inside an SVG, browsers must download the corresponding WOFF2 file before glyphs can be rasterized. If not handled correctly, this triggers Flash of Unstyled Text (FOUT) or invisible text (FOIT) that disrupts layout.

Method 1: Embedding Base64 WOFF2 Fonts Directly in <style>

For standalone SVGs (such as downloaded icons, social share cards, or SVG files loaded via <img> tags), external HTTP font links are blocked by browser security sandbox policies. The only way to guarantee custom typography is inlining a subsetted WOFF2 font as Base64:

<svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style>
      @font-face {
        font-family: 'InterSubset';
        src: url('data:font/woff2;base64,d09GMgABAAAAAA...') format('woff2');
        font-weight: 700;
        font-style: normal;
      }
      .brand-title {
        font-family: 'InterSubset', system-ui, sans-serif;
        font-size: 24px;
        fill: #C1DD2D;
      }
    </style>
  </defs>
  <text x="20" y="55" class="brand-title">IconStash Pro Typography</text>
</svg>

Method 2: Zero-Overhead System Font Stacks

If you wish to avoid bundle bloat and ensure zero network delay, use high-performance native system font stacks:

font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

System fonts render instantly with zero layout shifts (CLS), sub-pixel rendering crispness on high-DPI displays, and native platform familiar aesthetics.

9. Text Accessibility: Screen Readers, Search Indexing & WCAG

A major advantage of SVG text over raster graphics is that it remains authentic text within the browser's Accessibility Object Model (AOM). Screen readers like VoiceOver, NVDA, and JAWS can parse and vocalize SVG text directly.

To ensure 100% WCAG 2.2 AA compliance when deploying SVG typography:

1. Assign Semantic Role: Add role="img" and an aria-label to the parent SVG container if the text forms a visual graphic or logo banner.
2. Include <title> and <desc>: Place descriptive <title> and <desc> elements as the first direct children of the <svg> element.
3. Decorative Aria-Hidden: If the text along a path is purely decorative (for example, a repeating circular watermark behind a main heading), mark it with aria-hidden="true" so screen readers do not repeat redundant phrasing.
4. Contrast Compliance: Ensure text fill colors exceed a 4.5:1 contrast ratio against the background (e.g., our light mode accent uses WCAG-compliant #4D6300 with 5.2:1 contrast against light cards).

10. Frequently Asked Questions