SVG <text> Element

Beginner

⏱️ 10 min read

📚 Updated: Aug 2026

🎯 5 Examples

🚀 5 Try-it labs

Typography

SVG Text tutorial illustration showing positioned, centered, styled, and multiline text

Overview

What You’ll Learn

SVG’s <text> lets you place real text inside vector graphics. This tutorial covers x and y, baseline behavior, text-anchor, font styling, fill and stroke, multiline labels with <tspan>, five worked examples, and how SVG text compares with HTML text and canvas text.

<text>

Core element

Render vector text directly inside an SVG drawing.

x & y

Position

Place text horizontally with x and vertically with the text baseline at y.

text-anchor

Alignment

Use start, middle, or end for left, center, or right alignment.

Fonts & Paint

Style

Adjust font-size, font-family, fill, and stroke just like other vector shapes.

<tspan>

Multiline

Split a label into multiple lines or restyle parts of one text block.

viewBox

Responsive

Keep text sharp and aligned as the SVG scales across screen sizes.

Introduction

SVG’s <text> places readable words inside a vector drawing. It is useful for labels, badges, chart headings, icons with captions, buttons, diagrams, and any graphic where the text needs to stay sharp when scaled.

Unlike regular HTML text, SVG text lives inside the SVG coordinate system. That means you can line it up exactly with shapes, paths, and viewBox-based layouts while still styling it with fonts, fills, and strokes.

Why it matters?

Many SVG graphics need labels that scale with the artwork. Learning <text> helps you build crisp chart labels, callouts, logos, badges, and UI illustrations without switching to bitmap images.

Key Highlights

Real Vector Text

Text stays crisp and can still be selected or styled as SVG content.

Baseline Positioning

y controls the baseline, which is the most important beginner detail.

Easy Alignment

text-anchor makes left, centered, and right-aligned labels easy.

Multiline With tspan

Break lines or highlight parts of a sentence without leaving SVG.

In short: place the text with x and y, align it with text-anchor, then style it with fonts, fill, and stroke.

Foundation

📝 Syntax

Basic form of the SVG text element:

index.html

<svg width="240" height="120">
  <text x="40" y="70">Hello SVG</text>
</svg>

Attributes

Attribute	Type	Description
`x`	Length / number	Horizontal starting position of the text.
`y`	Length / number	Vertical baseline position of the text.
`text-anchor`	Keyword	`start`, `middle`, or `end` horizontal alignment.
`font-size`	Length / number	Controls the rendered text size.
`font-family`	Font list	Chooses which font face the browser should use.
`fill`	Paint	Text fill color, gradient, pattern, or `none`.
`stroke`	Paint	Outline color around the glyphs.
`stroke-width`	Length / number	Thickness of the text outline.

What It Draws

Result	Details
vector text label	Renders scalable text positioned inside the SVG coordinate system.

Minimal workflow

index.html

<svg width="240" height="120" viewBox="0 0 240 120">
  <text x="120" y="68" text-anchor="middle"
        font-family="system-ui, Arial, sans-serif"
        font-size="24" fill="#0f172a">
    Centered label
  </text>
</svg>

Text positioning tips

Idea	Detail	Notes
Baseline	`y` sets the baseline	Not the top edge of the letters
Centering	`text-anchor="middle"`	Put `x` at the center point
Multiline	Use `<tspan>`	Great for stacked labels and captions

Cheat Sheet

⚡ Quick Reference

Goal	Code
Basic text	`<text x="40" y="70">Hello</text>`
Centered text	`text-anchor="middle" x="120"`
Styled text	`font-size="24" font-family="Verdana" fill="#2563eb"`
Outlined text	`fill="white" stroke="#0f172a" stroke-width="1.5"`
Multiline text	`<tspan x="120" dy="0">Line 1</tspan>` + `dy="24"`
Responsive SVG	`<svg viewBox="0 0 240 120">...` + CSS width

Compare

📋 SVG text vs HTML text vs canvas text vs `textPath`

They all render words, but each one fits a different job.

SVG <text>

graphic labels

Best when text belongs inside a vector graphic and must scale with shapes.

HTML text

document content

Best for normal paragraphs, headings, forms, and accessibility-first page content.

Canvas text

pixel drawing

Good for dynamic drawing or games, but not as easy to inspect or align declaratively.

text on curves

Use when the text needs to follow a curved or custom path instead of a straight baseline.

Context

When to Use `<text>`

Reach for SVG text when the label is part of the graphic, not just the page layout.

Charts and labels
Axis labels, values, legends, and annotation callouts.
Buttons and badges
Text centered inside SVG rectangles, pills, or icon buttons.
Icons with labels
Useful when a graphic combines a symbol and a short caption in one SVG.
Diagrams and callouts
Place descriptive text exactly next to arrows, boxes, and connectors.
Not for long paragraphs
If the content is normal page copy, regular HTML text is usually the better choice.

Key benefit: SVG text scales with the drawing and stays perfectly aligned with the shapes around it.

Hands-On

Examples Gallery

Five starter snippets using <text>. Click View Output for a preview, or Try It Yourself to edit live.

📚 Getting Started

Place one label, then center it inside the canvas.

Example 1 — Basic Positioned Text

Place a simple text label at a chosen x and y coordinate.

index.html

<svg width="260" height="120">
  <text x="30" y="70" font-size="24" fill="#2563eb">
    Hello, SVG!
  </text>
</svg>

Try It Yourself

How It Works

The browser begins drawing the text at x="30" and uses y="70" as the text baseline. That baseline detail is why the letters sit a little above the y guide, not directly on top of it.

Example 2 — Centered Text With `text-anchor="middle"`

Center a label by placing x at the middle of the canvas and using text-anchor="middle".

index.html

<svg width="280" height="120" viewBox="0 0 280 120">
  <line x1="140" y1="16" x2="140" y2="104"
        stroke="#cbd5e1" stroke-dasharray="6 6" />

  <text x="140" y="68" text-anchor="middle"
        font-size="26" fill="#0f172a">
    Centered
  </text>
</svg>

Try It Yourself

How It Works

With text-anchor="middle", the midpoint of the text is aligned to the given x coordinate. This is the simplest way to center a button label or chart title.

📈 Practical Patterns

Text styling, outlining, and multiline labels.

Example 3 — Styled Text With `font-size`, `font-family`, and `fill`

Change the font and color to make the text feel like a headline or badge label.

index.html

<svg width="320" height="130" viewBox="0 0 320 130">
  <text x="24" y="78"
        font-size="32"
        font-family="Georgia, serif"
        fill="#7c3aed">
    Styled SVG Text
  </text>
</svg>

Try It Yourself

How It Works

SVG text accepts familiar font properties. Because it is still SVG content, the text remains sharp and can sit next to paths, rectangles, gradients, or icons inside the same artwork.

Example 4 — Outlined Text With `stroke`

Use stroke and stroke-width to give text a bold outlined look.

index.html

<svg width="320" height="130" viewBox="0 0 320 130">
  <rect x="20" y="24" width="280" height="82"
        rx="16" fill="#111827" />

  <text x="160" y="76" text-anchor="middle"
        font-size="30"
        font-family="system-ui, Arial, sans-serif"
        fill="#f8fafc"
        stroke="#38bdf8"
        stroke-width="1.5"
        paint-order="stroke">
    OUTLINED
  </text>
</svg>

Try It Yourself

How It Works

SVG applies the same paint model to text that it uses for shapes. paint-order="stroke" keeps the outline visually behind the fill so the letters stay readable.

Example 5 — Multiline Text Using `tspan`

Use <tspan> to create stacked lines for badges, labels, or compact captions.

index.html

<svg width="300" height="150" viewBox="0 0 300 150">
  <rect x="30" y="24" width="240" height="102"
        rx="18" fill="#eff6ff" stroke="#60a5fa" />

  <text x="150" y="68" text-anchor="middle"
        font-family="system-ui, Arial, sans-serif"
        fill="#1e3a8a">
    <tspan x="150" dy="0" font-size="24" font-weight="700">SVG</tspan>
    <tspan x="150" dy="26" font-size="18">Multiline Label</tspan>
  </text>
</svg>

Try It Yourself

How It Works

Each <tspan> can reset x and shift downward with dy. This is the standard SVG way to create multiline labels when one line is not enough.

Use Cases

Real-world places where SVG text shows up every day.

1. Chart Labels

Axes, values, legends, and annotations inside data graphics.

Example: value labels above bars in a chart.

2. Buttons & Badges

Centered text inside capsules, CTA buttons, or alert badges.

Example: a "Start" button label in an SVG banner.

3. Diagram Labels

Name steps, arrows, nodes, and highlighted callouts.

Example: a process box labeled "Validate Input".

4. Logo Wordmarks

Short brand words or initials rendered as scalable vector text.

Example: a decorative heading inside an SVG hero image.

5. Captions & Callouts

Compact notes near shapes, arrows, or highlighted regions.

Example: a two-line caption below an illustrated icon.

6. Teaching Graphics

Geometry, flowcharts, and educational diagrams often need labels inside the SVG itself.

Example: naming points and lines in a math diagram.

Pro Tip: if the label must stay locked to the graphic while scaling, SVG text is usually a better fit than placing separate HTML text on top.

Advantages

Why use SVG text inside graphics instead of converting text to images.

1. Sharp at Any Size
Text stays crisp on high-density screens and when the SVG scales up or down.
2. Precise Placement
Position labels exactly relative to shapes, guides, and coordinates.
3. Shape-Like Styling
Use fill, stroke, gradients, and CSS-driven colors just like other SVG elements.
4. Compact Markup
Simple labels often need only one <text> element instead of exported image assets.
5. Works With Paths and Shapes
Combine text with paths, rectangles, filters, and responsive viewBox layouts in one graphic.

Pro Tip: SVG text is especially useful when a label must scale with the surrounding shapes instead of floating separately in the page layout.

Usage Tips

Follow these practices for clean, readable SVG text.

1. Remember that y is the baseline
This is the main positioning rule that explains why text may look lower than expected.
2. Use text-anchor="middle" for centered labels
It is the easiest way to center button text or chart titles horizontally.
3. Prefer readable system or web-safe fonts
Fonts that exist on more devices give more predictable rendering.
4. Use stroke carefully for emphasis
Outlines can improve contrast, but heavy strokes can also reduce readability on small text.
5. Use tspan for multiline labels
That keeps related text together while still allowing line-by-line control.

Pro Tip: when text sits on a shape, draw a light guide or temporary center line while building the SVG, then remove it after alignment looks right.

Common Pitfalls

Avoid these mistakes when your SVG text does not appear or align correctly.

1. Treating y like the top edge
Text often looks too low because y sets the baseline, not the top.
→ Adjust the baseline thoughtfully or use alignment helpers.
2. Using fill="none" without a stroke
That makes the text invisible because nothing is painted.
→ Add a visible fill or use stroke and stroke-width.
3. Placing text outside the viewBox
If the coordinates are outside the visible area, the label will be clipped or disappear.
→ Keep the text anchor point and line spacing inside the canvas bounds.
4. Forgetting font fallback
An unavailable font can change the final size and spacing.
→ Use a sensible fallback stack such as system-ui, Arial, sans-serif.
5. Forcing long paragraphs into SVG
SVG text is best for labels and short content, not large blocks of flowing article text.
→ Use HTML text for long-form content and SVG text for graphic labels.

Pro Tip: if text looks off, first check baseline placement, text-anchor, fill/stroke visibility, and whether the font size is large enough to read.

🧠 How `<text>` Is Drawn

Pick the text content

The characters inside <text>...</text> are the label the browser will render.

Content

Set `x` and the baseline `y`

SVG positions the text inside its coordinate system. y marks the baseline where the characters sit.

Position

Align and style the text

Use text-anchor, font-size, font-family, fill, and optional stroke.

Style

Use `tspan` if you need more control

Extra lines or mixed styles usually come from nested <tspan> elements.

Structure

A crisp, scalable label

The browser renders the glyphs as vector content, so the label stays sharp and aligned inside the artwork.

Important Notes

<text> is real SVG content, not a bitmap label.
y sets the text baseline, not the top of the letters.
text-anchor values are start, middle, and end.
SVG text can use fill and stroke like other SVG shapes.
Need multiple lines? Use <tspan> instead of expecting HTML-style wrapping.
Use normal HTML text for large paragraphs and SVG text for labels inside graphics.

Quick Takeaway: text content + baseline placement + alignment + font styling. Those four ideas cover most beginner SVG text work.

Compatibility

Browser Support

The SVG <text> element is supported in all modern browsers and has long been part of SVG 1.1. Core positioning, font styling, fill, and stroke are widely reliable.

✓ SVG 1.1+

SVG <text>

Usein inline SVG or external .svg files. Positioning, alignment, font styling, fill, and stroke work consistently across Chrome, Firefox, Safari, Edge, and mobile browsers.

100% Modern browsers

Google Chrome All versions · Desktop & Mobile

Full support

Mozilla Firefox All versions · Desktop & Mobile

Full support

Apple Safari All versions · macOS & iOS

Full support

Microsoft Edge All versions · Chromium & Legacy

Full support

Internet Explorer IE 6+ · Legacy environments

Full support

Opera All modern versions

Full support

<text> Universal

Bottom line: Safe for production sites. Basic SVG text is widely supported; test advanced typography and special fonts if your design depends on exact visual metrics.

Wrap Up

🎉 Conclusion

SVG <text> gives you a clean way to place sharp, scalable labels directly inside vector graphics. Once you understand baseline positioning, text-anchor, and basic font styling, most common SVG text tasks become straightforward.

Practice the five examples above, then continue to SVG Stroke to learn how outlines, joins, caps, and paint behavior affect SVG graphics in more detail.

Remember the baseline, use text-anchor for alignment, and reach for tspan whenever one line is not enough.

View Examples Gallery Continue to Stroke

Pro Tips

💡 Best Practices

✅ Do

Remember that y sets the baseline, not the top
Use text-anchor="middle" for centered labels
Use readable fallback font stacks for consistent rendering
Use tspan for multiline or mixed-style text blocks
Test contrast when text sits on filled shapes or images

❌ Don’t

Assume SVG text wraps automatically like HTML paragraphs
Use fill="none" without adding a visible stroke
Place important labels outside the viewBox bounds
Rely on a single custom font without fallback choices
Force long-form article content into SVG when HTML is the better tool

Summary

Key Takeaways

Knowledge Unlocked

Five things to remember about SVG `<text>`

Place and style vector text with confidence.

Core concepts

T 01

<text>

Core SVG text element

API

xy 02

Position

x + baseline y

Geometry

⇄ 03

Alignment

text-anchor matters

Layout

✎ 04

Style

Fonts, fill, and stroke

Paint

↵ 05

tspan

Handles multiline text

Structure

❓ Frequently Asked Questions

How do I add text in SVG?

Use the <text> element inside an <svg>. Set x and y to position the text, then style it with font-size, font-family, fill, or stroke. Example: <text x="40" y="80" font-size="24" fill="#2563eb">Hello</text>.

What do x and y mean in SVG text?

x sets the horizontal starting position. y sets the text baseline position, not the top of the letters. That is why text can look slightly lower than beginners expect.

How do I center SVG text?

Use text-anchor="middle" and place x at the center point you want. For vertical centering, combine a suitable y value with alignment helpers like dominant-baseline or careful baseline positioning.

Can I outline SVG text with stroke?

Yes. SVG text can use stroke and stroke-width just like shapes. Many examples use fill plus stroke together, or fill="none" with paint-order="stroke" for an outline-first effect.

Why is my SVG text not showing?

Common causes are text placed outside the viewBox, fill set to none without a stroke, a very small font-size, or a y value that places the baseline outside the visible canvas.

Should I use tspan or multiline SVG text, and when should I use SVG text vs HTML text?

Use <tspan> when you need multiple lines or differently styled pieces inside one SVG label. Use SVG text when the text belongs to the graphic itself, needs vector scaling, or must align precisely with shapes or paths. Use normal HTML text for long paragraphs, accessibility-first content, and regular page layout.

Did you Know? 🔊

SVG text stays vector-sharp at any size and can use fill and stroke just like other SVG shapes. That is why SVG text is often used for badges, chart labels, and wordmarks that must stay clean on both small mobile screens and large retina displays.

Continue to SVG Stroke

Now learn how stroke width, caps, joins, and paint behavior affect text outlines and every other SVG shape.

Stroke tutorial →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

SVG Path SVG Stroke

SVG <text> Element

What You’ll Learn

<text>

x & y

text-anchor

Fonts & Paint

<tspan>

viewBox

Introduction

Why it matters?

Real Vector Text

Baseline Positioning

Easy Alignment

Multiline With tspan

📝 Syntax

Attributes

What It Draws

Minimal workflow

Text positioning tips

⚡ Quick Reference

📋 SVG text vs HTML text vs canvas text vs textPath

When to Use <text>

Charts and labels

Buttons and badges

Icons with labels

Diagrams and callouts

Not for long paragraphs

Examples Gallery

📚 Getting Started

Example 1 — Basic Positioned Text

How It Works

Example 2 — Centered Text With text-anchor="middle"

How It Works

📈 Practical Patterns

Example 3 — Styled Text With font-size, font-family, and fill

How It Works

Example 4 — Outlined Text With stroke

How It Works

Example 5 — Multiline Text Using tspan

How It Works

Use Cases

1. Chart Labels

2. Buttons & Badges

3. Diagram Labels

4. Logo Wordmarks

5. Captions & Callouts

6. Teaching Graphics

Advantages

1. Sharp at Any Size

2. Precise Placement

3. Shape-Like Styling

4. Compact Markup

5. Works With Paths and Shapes

Usage Tips

1. Remember that y is the baseline

2. Use text-anchor="middle" for centered labels

3. Prefer readable system or web-safe fonts

4. Use stroke carefully for emphasis

5. Use tspan for multiline labels

Common Pitfalls

1. Treating y like the top edge

2. Using fill="none" without a stroke

3. Placing text outside the viewBox

4. Forgetting font fallback

5. Forcing long paragraphs into SVG

🧠 How <text> Is Drawn

Pick the text content

Set x and the baseline y

Align and style the text

Use tspan if you need more control

A crisp, scalable label

Important Notes

Browser Support

SVG &lt;text&gt;

🎉 Conclusion

💡 Best Practices

✅ Do

❌ Don’t

Key Takeaways

Five things to remember about SVG <text>

📋 SVG text vs HTML text vs canvas text vs `textPath`

When to Use `<text>`

Example 2 — Centered Text With `text-anchor="middle"`

Example 3 — Styled Text With `font-size`, `font-family`, and `fill`

Example 4 — Outlined Text With `stroke`

Example 5 — Multiline Text Using `tspan`

1. Remember that `y` is the baseline

2. Use `text-anchor="middle"` for centered labels

5. Use `tspan` for multiline labels

1. Treating `y` like the top edge

2. Using `fill="none"` without a stroke

🧠 How `<text>` Is Drawn

Set `x` and the baseline `y`

Use `tspan` if you need more control

SVG <text>

Five things to remember about SVG `<text>`