Chapter 12: SVG text and tspan
SVG Text and <tspan>! 😊 Your favorite patient teacher from Hyderabad is back, explaining everything super slowly, in simple everyday English, with lots of copy-paste examples you can try right now in VS Code or any browser. We’ve covered shapes like rectangle, circle, ellipse, line, polygon, polyline, path — now text is the next big step because SVG isn’t just for drawings; it’s perfect for sharp, scalable text like logos, labels, buttons, charts, icons with words, etc.
SVG Text means putting actual readable words/letters inside SVG using the <text> element (and often <tspan> inside it). Unlike normal HTML <p> or <h1>, SVG text is vector — zoom 1000%, still crystal clear, no blur, and you can fill it with gradients, stroke it, animate it, rotate letters individually, place it along a curve (textPath — we’ll touch later), etc.
1. The Main Element: <text>
This is the root for any text in SVG.
Basic syntax:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<text x="..." <!-- starting horizontal position (baseline left) --> y="..." <!-- starting vertical position (baseline bottom-ish) --> fill="..." <!-- text color (like color in CSS, but fill in SVG) --> font-size="..." <!-- size in user units --> font-family="..." text-anchor="..." <!-- start, middle, end – alignment --> /> |
- Text goes directly as text content inside the tag (not attribute)
- Default fill = black, font-size ~12px-ish (browser dependent)
- No automatic wrapping — one long line unless you use <tspan> or CSS white-space
2. Your First SVG Text (Copy-Paste Now!)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SVG Text Basics</title> </head> <body> <h1>Simple SVG Text Example</h1> <svg width="400" height="150" viewBox="0 0 400 150" style="border:1px solid gray;"> <!-- Basic red text --> <text x="50" y="80" fill="red" font-size="40" font-family="Arial"> Hello SVG World! </text> </svg> </body> </html> |
What you see: Big red “Hello SVG World!” starting at (50,80).
Important notes on positioning:
- x = left edge of first character
- y = position of the baseline (bottom of letters, like where letters sit, not top)
- So y=80 means baseline at 80 units from top
3. Key Attributes for <text>
| Attribute | Meaning | Example values | Notes |
|---|---|---|---|
| x | Starting x (can be list for each letter) | 10, “20 40 60” | List = per-character positioning |
| y | Starting y (baseline) | 50, “30 70” | Same |
| dx / dy | Relative shift from previous | dx=”5″ dy=”-10″ | Offsets |
| rotate | Degrees rotation per character | rotate=”0 45 -30 90″ | Per letter! |
| text-anchor | Alignment: start, middle, end | middle | Like text-align |
| font-size | Size | 24, 2em, 30px | Units matter |
| font-family | Font | Arial, “Times New Roman” | Web-safe or @font-face |
| fill | Text color | blue, #ff0000 | Not color — use fill |
| stroke | Outline | black, stroke-width=”2″ | For outlined text |
4. Now the Real Power: <tspan> (Like <span> in HTML)
<tspan> lets you change style, position, or color mid-sentence inside one <text>.
- Must be child of <text> or another <tspan>
- Inherits from parent but can override
Example – Different colors & sizes in one line:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<svg width="500" height="120" viewBox="0 0 500 120"> <text x="20" y="60" font-size="30" fill="black" font-family="Arial"> I love <tspan fill="red" font-weight="bold">SVG</tspan> because it's <tspan fill="blue" font-style="italic">scalable</tspan>! </text> </svg> |
→ “I love” black normal → “SVG” bold red → “because it’s” black → “scalable!” blue italic
5. Multi-line Text with <tspan>
SVG text doesn’t wrap automatically (unless CSS white-space: pre-wrap etc.), so use <tspan> with dy or new x/y for lines.
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
<svg width="400" height="200" viewBox="0 0 400 200"> <text x="50" y="50" font-size="24" fill="navy"> <tspan x="50" dy="0">First line here</tspan> <tspan x="50" dy="35">Second line – shifted down 35 units</tspan> <tspan x="80" dy="35" fill="green">Third line indented</tspan> </text> </svg> |
- dy=”35″ → move down 35 units from previous baseline
- Reset x if you want new alignment
6. Fun Advanced Examples (Try These!)
Example 1: Rotated Individual Letters
|
0 1 2 3 4 5 6 7 8 |
<text x="100" y="100" font-size="50" fill="purple"> <tspan rotate="0 30 60 90 120">Hello</tspan> </text> |
→ Each letter rotated more
Example 2: Centered Text (text-anchor)
|
0 1 2 3 4 5 6 7 8 |
<text x="200" y="100" font-size="40" text-anchor="middle" fill="darkgreen"> Centered Title </text> |
→ Perfect center at x=200
Example 3: Outline Text (Stroke + Fill)
|
0 1 2 3 4 5 6 7 8 |
<text x="30" y="90" font-size="60" fill="yellow" stroke="black" stroke-width="3" font-family="Impact"> OUTLINED! </text> |
→ Thick black border around yellow letters
Example 4: Hover Effect with CSS
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> text:hover tspan.special { fill: orange; font-size: 45px; } </style> <svg width="300" height="100"> <text x="20" y="60" font-size="30"> Hover over <tspan class="special" fill="purple">this</tspan> word! </text> </svg> |
Hover → that tspan changes!
7. Teacher’s Tips (Hyderabad Student Style 😄)
- Use fill not color — SVG text uses fill for interior
- Baseline is tricky — y positions bottom of text, not top (unlike HTML)
- For multi-line → <tspan> + dy is easiest (or foreignObject for complex HTML)
- Accessibility: Add <title> or <desc> inside SVG for screen readers
- Common mistake: Text disappears → forgot fill or wrong coordinates
- Job/freelance: SVG text great for logos (editable), data viz labels, animated titles
- Next level: <textPath> (text along curve/path) — ask if you want!
Understood <text> and <tspan> now? Want more: Gradient on text? Text on a circle/path? Animated letter-by-letter? Or full logo example? Just tell me — we’re almost masters of SVG basics! 🚀
