Chapter 11: SVG text and tspan

SVG text and tspan elements in great detail. These let you put real, selectable, stylable, searchable text inside SVG — something you cannot do with normal images (PNG/JPG).

I’m going to explain it like we’re sitting together with the code open — slowly, clearly, with many examples you can copy-paste right now.

Why use SVG <text> at all?

• Text stays sharp at any zoom level (vector!)
• You can style it with CSS (color, font, size, hover effects, dark mode…)
• Search engines can read it (great for SEO — logos with text, diagrams)
• Users can select & copy the text
• You can animate letters individually, make curved text, multi-line, different styles in one sentence…
• Perfect for: logos, icons with labels, data labels on charts, buttons, maps, infographics

The basic <text> element

Important attributes on <text>:

Important note about y coordinate In SVG, the y value is the baseline of the text (like the line letters sit on), not the top or center. That’s why many people add dominant-baseline=”middle” or central when they want true vertical centering.

Example 2 – Centered text with better vertical alignment

Now — the real power: <tspan>

<tspan> = text span — lets you change style, position, rotation… inside the same line of text without breaking flow.

You put <tspan> inside a <text> (or even nested inside another <tspan>).

Common use cases:

• Different colors in one sentence
• Bigger/smaller words
• Superscripts / subscripts
• Shift some letters up/down
• Rotate individual characters

Example 3 – Using <tspan> for mixed styles

Example 4 – Position shifts with dx/dy (very useful for icons + label)

• dx = shift horizontally from previous position
• dy = shift vertically from previous position
• baseline-shift=”super” = common for superscript (alternative to dy)

Example 5 – Character-by-character rotation (fun effect!)

Bonus: Curved text with <textPath>

(Advanced but very popular — needs a <path> or <circle> first)

Here are some visual examples of what <text> with <tspan> and <textPath> can achieve (mixed styles, superscript, curved text, rotated letters):

(Imagine seeing here: one image showing colorful mixed-style text, one showing percentage with superscript, one showing text curved along an arc, one showing individual letter rotation.)

Quick Cheat Sheet – <text> & <tspan> vs HTML <p>

Common beginner mistakes

• Forgetting to set fill → text invisible (no default color like black in some browsers)
• Using y as top edge → text sits too low (use dominant-baseline=”hanging” or adjust y)
• Nesting <tspan> too deeply without reason → harder to maintain
• No font-family → falls back to Times New Roman (ugly in many cases)

Mini practice tasks

1. Make a big purple “SALE” text where “SALE” is bold & red, and “20% OFF” is smaller & green below it
2. Create a circular badge with text curved around the top half
3. Write “SVG is AWESOME” where each letter of “AWESOME” is rotated 10° more than the previous one

Paste your code here if you want feedback — I’ll review it like we’re pair-programming 😄

Any part still confusing? The baseline? tspan positioning? textPath? Curved text? Just point and ask — we’ll redraw examples until it’s crystal clear! 🚀