SVG Text

Beginner
⏱️ 7 min read
📚 Updated: Aug 2025
🎯 2 Examples
Typography
SVG Text tutorial illustration showing positioned and styled text inside SVG

What You’ll Learn

SVG text stays crisp at any size and can be styled like other SVG elements. You can position text with coordinates, align it, and even outline it with stroke.

This guide covers the essentials of the <text> element: positioning with x/y, styling with fonts and fill, and alignment with text-anchor and baseline settings.

⚡ Quick Reference — SVG Text

Element <text>

Render text inside SVG

Position x / y

x is start, y is baseline

Style font-size

Text size in px or units

Align text-anchor

start / middle / end

Baseline alignment-baseline

Align relative to the baseline

Outline stroke

Outline text like shapes

Basic Syntax
<svg>
  <text x="50" y="100">Hello</text>
</svg>

👀 Live Preview — Alignment

Text alignment is controlled mainly by text-anchor. The dots below indicate the x position.

start / middle / end
outlined text
1

Basic SVG Text

Place a text label using x and y, then style it with font and fill.

index.html
<svg width="240" height="140" viewBox="0 0 240 140">
  <text x="40" y="80" font-family="Arial" font-size="22" fill="red">
    Hello, SVG Text!
  </text>
</svg>
Try It Yourself
2

Centered Text + Outline

Use text-anchor="middle" to center text, and add a stroke to create an outline effect.

index.html
<svg width="280" height="120" viewBox="0 0 280 120">
  <rect x="16" y="26" width="248" height="68" rx="18" fill="#0f172a" />

  <text x="140" y="70" text-anchor="middle"
        font-family="system-ui,Segoe UI,Arial" font-size="26"
        fill="none" stroke="#f8fafc" stroke-width="2" paint-order="stroke">
    OUTLINED
  </text>
</svg>

💡 Best Practices

Do

  • Remember: y is the text baseline, not the top
  • Use text-anchor="middle" for horizontal centering
  • Use system fonts for consistent rendering across devices
  • For outlined text, use paint-order="stroke" to keep stroke behind
  • Add aria-label on SVG if the text conveys meaning

Don’t

  • Assume y is top-left (it is baseline)
  • Use fill="none" without a stroke (text disappears)
  • Place text outside the viewBox/canvas unintentionally
  • Use tiny font sizes for UI labels without testing readability
  • Forget contrast when placing text over shapes

❓ Frequently Asked Questions

Use the <text> element with x and y, then style it with font-size, font-family, and fill.
x sets the horizontal start position. y sets the baseline position (not the top).
Use text-anchor="middle" and set x to the center position. For vertical alignment, try alignment-baseline or adjust the y value.
Yes. Set fill and add stroke/stroke-width. For an outline-only look, set fill="none" and use paint-order="stroke".
Check that the text is inside the viewBox, font-size is readable, and the baseline y value is visible. Also check that fill isn’t none without a stroke.

Explore Canvas Next

Learn how to draw text and shapes dynamically using the HTML5 Canvas API.

Canvas Introduction →

About the author

Mari Selvan M P
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)

4 people found this page helpful

SVG Stroke Canvas Introduction