Chapter 34: SVG in HTML

SVG Typography

Vector typesetting with `<text>`, `<tspan>`, alignment matrices (`text-anchor`, `dominant-baseline`), and curvilinear paths (`<textPath>`).

LEARNING OBJECTIVES ⌵

Understand why SVG text has no default HTML box-model line wrapping and requires vector baseline anchoring.
Master horizontal alignment via text-anchor (start, middle, end) and vertical alignment via dominant-baseline (alphabetic, middle, hanging).
Structure multi-line and multi-styled text blocks using <tspan> and coordinate offsets (dx, dy).
Wrap and typeset text along arbitrary curves and circles using <textPath>.

🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation

🌐

1. Input

Directives & Tags

⚙️

2. Parse

Tokenizer & AST

🌳

3. Layout

Box Model & Flow

🎨

4. Render

GPU Paint & Composite

PHASE 1: INPUT & DIRECTIVES

Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The Mental Model & Story (Intuitive Foundation)

Imagine the difference between two printing methods:

The Modern Word Processor (HTML / CSS): Text is poured into rectangular boxes. When a sentence hits the right margin, it automatically word-wraps onto the next line, pushing all subsequent content downward.
The Engraver's Caliper (SVG Typography): You place a metal stylus at an exact spatial coordinate $(X, Y)$ on a brass plaque. The text sits upon a mathematical baseline. It never automatically wraps; if your sentence is $1,000\text{px}$ long, it will march straight off the right edge of the plaque unless you manually calibrate its path or anchor point.

SVG TYPOGRAPHIC BASELINE GRID:
                       [Ascender]   ----------------- (Top of capital letters)
                           H        ----------------- [Hanging Baseline]
     dominant-baseline ->  e        ----------------- [Middle Baseline]
                           l        
  (X, Y) Coordinate ---->  p y      ----------------- [Alphabetic Baseline (Default)]
                           |        ----------------- [Descender]
                           
     |<-- start              middle                end -->|
                      (text-anchor alignment)

Because SVG text is declared as true vector typography rather than flattened raster pixels, it remains $100%$ selectable, copy-pasteable, searchable (via Ctrl+F), and readable by assistive screen readers.

Technical Deep Dive & Specifications

1. The `<text>` Element & Coordinate Anchoring

<text x="100" y="50" fill="#ffffff" font-size="20" font-family="sans-serif">
  Vector Typography
</text>

By default, the $(x, y)$ coordinate specifies where the leftmost point of the alphabetic baseline sits. This means text appears above the $Y$ coordinate, not below it!

2. Horizontal Alignment: `text-anchor`

The text-anchor property determines how text horizontally aligns relative to the anchor point $X$:

Value	Alignment Behavior
`start` (default)	The start of the text string is aligned to $X$ (text flows to the right).
`middle`	The geometric center of the text string is aligned to $X$.
`end`	The end of the text string is aligned to $X$ (text flows to the left).

text-anchor="start":    (X,Y) [ HELLO WORLD ] --->
text-anchor="middle":   <--- [ HELLO ] (X,Y) [ WORLD ] --->
text-anchor="end":      <--- [ HELLO WORLD ] (X,Y)

3. Vertical Alignment: `dominant-baseline`

The dominant-baseline property aligns the text vertically relative to the anchor point $Y$:

Value	Description	Typical Use Case
`auto` / `alphabetic` (default)	Bottom of standard Latin glyphs (excluding descenders like 'p', 'y', 'g').	Standard typography.
`middle` / `central`	Mathematically centers the glyphs vertically over $Y$.	Perfect for badge labels and buttons.
`hanging`	Aligns top of capital letters to $Y$ (text hangs below $Y$).	Top-aligned headers and Asian scripts.

The Golden Formula for Centering Text in SVG:
<text x="50%" y="50%" text-anchor="middle" dominant-baseline="central">
  Perfect Center
</text>

4. Multi-Line & Styled Spans with `<tspan>`

Because SVG text does not auto-wrap, multi-line typography is achieved using <tspan> with absolute x coordinates and relative dy (delta-y) line jumps:

<text x="50" y="50" font-size="16" fill="#f8fafc">
  Line 1 of typography
  <tspan x="50" dy="1.4em" fill="#38bdf8" font-weight="bold">Line 2 (Shifted down)</tspan>
  <tspan x="50" dy="1.4em" fill="#f43f5e">Line 3 (Shifted down)</tspan>
</text>

5. Curvilinear Typography: `<textPath>`

To wrap text along any organic Bézier curve or circle:

Define a <path id="my-curve" d="..." /> inside a <defs> block.
Nest a <textPath href="#my-curve"> inside a <text> element.

<defs>
  <path id="circle-track" d="M 50,100 A 50,50 0 1,1 150,100" fill="none" />
</defs>

<text fill="#f59e0b" font-size="14">
  <textPath href="#circle-track" startOffset="50%" text-anchor="middle">
    Text Flowing on a Curve
  </textPath>
</text>

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL example.html

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Line 56: <path id="arch-top" d="M 70,160 A 80,80 0 0,1 230,160" fill="none"/> defines an invisible upper circular arch inside <defs>.
Line 68–72: <textPath href="#arch-top" startOffset="50%" text-anchor="middle"> attaches text to #arch-top. startOffset="50%" and text-anchor="middle" mathematically center the text at the apex of the arch.
Line 75: <text x="150" y="150" text-anchor="middle" dominant-baseline="central"> uses the golden centering formula to place "SVG 2026" dead center inside the inner circle.
Line 81–87: Demonstrates multi-line code formatting using <tspan x="0" dy="1.5em"> to manually calculate line jumps in SVG coordinate space.

Expected Browser Render Output

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL playground.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG Typography Playground</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      background: #0b0f19;
      color: #f1f5f9;
      padding: 2rem;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

.card {
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 12px;
      padding: 2rem;
      max-width: 700px;
      width: 100%;
      text-align: center;
    }

svg {
      background: #0f172a;
      border: 1px solid #334155;
      border-radius: 8px;
      margin-top: 1rem;
      width: 100%;
      height: 280px;
    }

.curved-label {
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 3px;
      fill: #38bdf8;
    }
  </style>
</head>
<body>

<div class="card">
    <h2>SVG Precision Typography & Curvilinear Text</h2>

<g id="badge">
        <circle cx="150" cy="150" r="70" fill="#1e1b4b" stroke="#6366f1" stroke-width="3"/>
        <circle cx="150" cy="150" r="45" fill="#312e81"/>
        
        
        <text class="curved-label">
          <textPath href="#arch-top" startOffset="50%" text-anchor="middle">
            HTML MASTERCLASS
          </textPath>
        </text>

<text x="150" y="150" fill="#ffffff" font-size="18" font-weight="900" text-anchor="middle" dominant-baseline="central">
          SVG 2026
        </text>
      </g>

<g id="multiline" transform="translate(320, 40)">
        <text x="0" y="0" font-size="16" fill="#94a3b8" font-family="monospace">
          <tspan x="0" dy="0" fill="#38bdf8" font-weight="bold">const</tspan> vectorText = {
          <tspan x="20" dy="1.5em" fill="#facc15">anchor:</tspan> 'middle',
          <tspan x="20" dy="1.5em" fill="#10b981">baseline:</tspan> 'central'
          <tspan x="0" dy="1.5em">};</tspan>
        </text>
      </g>

<text fill="#ec4899" font-size="14" font-weight="700" letter-spacing="1">
        <textPath href="#wave-track" startOffset="10%">
          ~~~ Organic Dynamic Path Flow ~~~
        </textPath>
      </text>

</svg>
  </div>

</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

+---------------------------------------------------------------+
|  SVG Precision Typography & Curvilinear Text                  |
|                                                               |
|        . - HTML MASTERCLASS - .       const vectorText = {    |
|      /                          \        anchor: 'middle',    |
|     |         SVG 2026           |       baseline: 'central'  |
|      \                          /     };                      |
|        ' - - - - - - - - - - - '      ~ Organic Path Flow ~   |
+---------------------------------------------------------------+

🏋️ Hands-On Exercise

🎯 The Challenge: Design a Verified Certified Seal Stamp

Objective: Design an official circular corporate stamp with two curved text labels:

Top Arc: "VERIFIED FRONTEND ARCHITECT"
Bottom Arc: "OFFICIAL CERTIFICATION"
Center Emblem: A central 5-point star or checkmark with the issue year.

Instructions:

Create an SVG with viewBox="0 0 200 200".
Define a top arc path #seal-top in <defs> curving over the top half of a $75\text{px}$ radius circle.
Define a bottom arc path #seal-bottom in <defs> curving over the bottom half. (Take note of path direction so bottom text is not rendered upside down!).
Bind text to both arcs using <textPath>.
Center the label "2026" with text-anchor="middle" and dominant-baseline="central" inside the stamp.

🏁 Starter Code Sandbox

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

STARTER CODE SANDBOX exercise.html

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Stamp Typography Solution</title>
  <style>
    body {
      background: #020617;
      color: #f8fafc;
      font-family: system-ui, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 3rem;
    }

    .seal-container {
      background: #0f172a;
      padding: 2rem;
      border-radius: 16px;
      border: 1px solid #1e293b;
      text-align: center;
    }

    .seal-svg {
      width: 260px;
      height: 260px;
      filter: drop-shadow(0 12px 24px rgba(245, 158, 11, 0.2));
    }

    .seal-text {
      font-family: system-ui, -apple-system, sans-serif;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 2.5px;
      fill: #f59e0b;
    }
  </style>
</head>
<body>

  <div class="seal-container">
    <h2>Official Certification Seal</h2>

    <svg class="seal-svg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <!-- Upper Arch: Clockwise from Left (30,100) to Right (170,100) -->
        <path id="seal-top-arch" d="M 30,100 A 70,70 0 0,1 170,100" fill="none"/>
        
        <!-- Lower Arch: Clockwise from Right (170,100) to Left (30,100) -->
        <path id="seal-bottom-arch" d="M 170,100 A 70,70 0 0,1 30,100" fill="none"/>
      </defs>

      <!-- Concentric Seal Borders -->
      <circle cx="100" cy="100" r="90" fill="none" stroke="#f59e0b" stroke-width="4"/>
      <circle cx="100" cy="100" r="82" fill="none" stroke="#d97706" stroke-width="1.5" stroke-dasharray="4 3"/>
      <circle cx="100" cy="100" r="54" fill="#1e293b" stroke="#f59e0b" stroke-width="2"/>

      <!-- Top Curved Typography -->
      <text class="seal-text">
        <textPath href="#seal-top-arch" startOffset="50%" text-anchor="middle">
          VERIFIED ARCHITECT
        </textPath>
      </text>

      <!-- Bottom Curved Typography -->
      <text class="seal-text">
        <textPath href="#seal-bottom-arch" startOffset="50%" text-anchor="middle">
          CERTIFIED - 2026
        </textPath>
      </text>

      <!-- Center Star Icon -->
      <polygon points="100,68 104,78 115,79 107,86 109,97 100,91 91,97 93,86 85,79 96,78" fill="#f59e0b" />
      
      <!-- Central Year Badge -->
      <text x="100" y="118" fill="#ffffff" font-size="16" font-weight="900" text-anchor="middle" dominant-baseline="central" letter-spacing="1">
        PASSED
      </text>

    </svg>
  </div>

</body>
</html>

Why this works:

The top text uses #seal-top-arch running from $(30, 100)$ to $(170, 100)$ clockwise.
The bottom text uses #seal-bottom-arch running from $(170, 100)$ to $(30, 100)$ clockwise. This ensures the bottom letters stand right-side up rather than hanging upside down.
startOffset="50%" and text-anchor="middle" align the center of the words to the apex and trough of the respective circles.

⚠️ Common Pitfalls

Expecting Word Wrap Without <tspan>: Long strings in SVG do not wrap automatically. If you write 50 words inside a <text> tag, they will extend infinitely along a single horizontal line across your screen.
Upside-Down <textPath> Curves: The direction of text flow is determined strictly by the start and end direction of the referenced <path>. If text is rendering upside down along the bottom of a circle, reverse the direction of your path coordinates!
The y Coordinate Clipping Gotcha: Placing <text x="0" y="0">Title</text> causes the text to appear invisible because text is rendered above the baseline $Y=0$, clipping it off the top edge of the SVG viewport. Set $Y$ equal to at least the font-size.

💡 Pro Tips

Disabling Accidental Selection on Icons: For UI buttons where SVG icons contain text labels, apply user-select: none; pointer-events: none; via CSS to prevent double-click text selection highlights when users click rapidly.
Sub-Pixel Crispness via text-rendering: Use text-rendering: geometricPrecision; in CSS on SVG text elements to optimize vector letterform anti-aliasing during dynamic animations.

📌 Key Takeaways

Vector Text: SVG <text> elements contain real, searchable, accessible DOM characters positioned along vector coordinates.
text-anchor: Manages horizontal alignment (start, middle, end) relative to coordinate $X$.
dominant-baseline: Manages vertical baseline alignment (alphabetic, middle/central, hanging) relative to coordinate $Y$.
<tspan>: Provides multi-line formatting and inline coordinate jumps (dx, dy).
<textPath>: Binds text along arbitrary <path> shapes for circular stamps, banners, and organic typography.
--

⭐ LEARN: HTML 🌟 ⚔️ QUIZ BATTLE ARENA // ACTIVE

? Question 1 / 3

Why does `<text x="50" y="0">Hello World</text>` appear cut off at the top of an SVG?

Topic: HTML Fundamentals

? Question 2 / 3

Which combination of attributes guarantees that an SVG text string will be mathematically centered horizontally and vertically inside a coordinate point $(X, Y)$?

Topic: HTML Fundamentals

? Question 3 / 3

How do you wrap text along a circular path in SVG?

Topic: HTML Fundamentals

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story (Intuitive Foundation)

Technical Deep Dive & Specifications

1. The <text> Element & Coordinate Anchoring

2. Horizontal Alignment: text-anchor

3. Vertical Alignment: dominant-baseline

4. Multi-Line & Styled Spans with <tspan>

5. Curvilinear Typography: <textPath>

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Expected Browser Render Output

🏋️ Hands-On Exercise

🎯 The Challenge: Design a Verified Certified Seal Stamp

🏁 Starter Code Sandbox

⚠️ Common Pitfalls

💡 Pro Tips

📌 Key Takeaways

Why does <text x="50" y="0">Hello World</text> appear cut off at the top of an SVG?

Which combination of attributes guarantees that an SVG text string will be mathematically centered horizontally and vertically inside a coordinate point $(X, Y)$?

How do you wrap text along a circular path in SVG?

1. The `<text>` Element & Coordinate Anchoring

2. Horizontal Alignment: `text-anchor`

3. Vertical Alignment: `dominant-baseline`

4. Multi-Line & Styled Spans with `<tspan>`

5. Curvilinear Typography: `<textPath>`

Why does `<text x="50" y="0">Hello World</text>` appear cut off at the top of an SVG?