SVG Text

The <text> element is used to add text content in SVG, supporting rich styles and effects.

Basic Syntax

html

<svg width="200" height="50">
  <text x="10" y="35" font-size="24" fill="#3b82f6">Hello SVG</text>
</svg>

Main Properties

Property	Description
`x`	Text start x coordinate
`y`	Text baseline y coordinate
`dx`	x direction offset
`dy`	y direction offset
`text-anchor`	Text alignment
`font-size`	Font size
`font-family`	Font family
`font-weight`	Font weight
`fill`	Text color
`stroke`	Text stroke

Basic Text

html

<svg width="400" height="100">
  <text x="20" y="40" font-size="32" fill="#1f2937">Regular text</text>
  <text x="20" y="80" font-size="24" fill="#3b82f6" font-weight="bold">Bold text</text>
</svg>

Text Alignment (text-anchor)

html

<svg width="400" height="150">
  <!-- Reference line -->
  <line x1="200" y1="0" x2="200" y2="150" stroke="#e5e7eb" stroke-dasharray="5"/>

  <!-- start (default) -->
  <text x="200" y="40" font-size="18" fill="#3b82f6" text-anchor="start">start alignment</text>

  <!-- middle -->
  <text x="200" y="80" font-size="18" fill="#22c55e" text-anchor="middle">middle alignment</text>

  <!-- end -->
  <text x="200" y="120" font-size="18" fill="#ef4444" text-anchor="end">end alignment</text>
</svg>

Font Styles

html

<svg width="400" height="200">
  <!-- Different fonts -->
  <text x="20" y="30" font-size="20" font-family="Arial" fill="#1f2937">Arial Font</text>
  <text x="20" y="60" font-size="20" font-family="Georgia" fill="#1f2937">Georgia Font</text>
  <text x="20" y="90" font-size="20" font-family="Courier New" fill="#1f2937">Courier Font</text>

  <!-- Different weights -->
  <text x="20" y="130" font-size="18" font-weight="100" fill="#3b82f6">Thin 100</text>
  <text x="120" y="130" font-size="18" font-weight="400" fill="#3b82f6">Normal 400</text>
  <text x="240" y="130" font-size="18" font-weight="700" fill="#3b82f6">Bold 700</text>

  <!-- Italic -->
  <text x="20" y="170" font-size="18" font-style="italic" fill="#8b5cf6">Italic Text</text>
</svg>

Text Stroke

html

<svg width="400" height="100">
  <!-- Stroke only -->
  <text x="20" y="45" font-size="40" font-weight="bold"
        fill="none" stroke="#3b82f6" stroke-width="2">
    Stroke Text
  </text>

  <!-- Fill + stroke -->
  <text x="220" y="45" font-size="40" font-weight="bold"
        fill="#bfdbfe" stroke="#3b82f6" stroke-width="1">
    Two-color Text
  </text>
</svg>

Multi-line Text

SVG does not directly support line breaks, need to use multiple <tspan> elements:

html

<svg width="300" height="120">
  <text x="20" y="30" font-size="18" fill="#1f2937">
    <tspan x="20" dy="0">First line of text</tspan>
    <tspan x="20" dy="30">Second line of text</tspan>
    <tspan x="20" dy="30">Third line of text</tspan>
  </text>
</svg>

tspan Element

<tspan> is used to set local styles for text:

html

<svg width="400" height="60">
  <text x="20" y="40" font-size="24" fill="#1f2937">
    This is
    <tspan fill="#3b82f6" font-weight="bold">blue bold</tspan>
    and
    <tspan fill="#ef4444" font-size="30">red large</tspan>
    text
  </text>
</svg>

Text Path

Make text follow along a path:

html

<svg width="400" height="150">
  <defs>
    <path id="textPath1" d="M20,100 Q200,20 380,100"/>
  </defs>

  <!-- Show path -->
  <path d="M20,100 Q200,20 380,100" fill="none" stroke="#e5e7eb" stroke-width="2"/>

  <!-- Text along path -->
  <text font-size="18" fill="#3b82f6">
    <textPath href="#textPath1">
      This is text arranged along a curved path
    </textPath>
  </text>
</svg>

Circular Path Text

html

<svg width="200" height="200">
  <defs>
    <path id="circlePath" d="M100,30 A70,70 0 1,1 99.9,30"/>
  </defs>

  <circle cx="100" cy="100" r="70" fill="none" stroke="#e5e7eb"/>

  <text font-size="14" fill="#3b82f6">
    <textPath href="#circlePath">
      This is text arranged along a circular path • wrap effect •
    </textPath>
  </text>
</svg>

Text Decoration

html

<svg width="400" height="120">
  <text x="20" y="30" font-size="20" fill="#1f2937" text-decoration="underline">
    Underline text
  </text>
  <text x="20" y="60" font-size="20" fill="#1f2937" text-decoration="overline">
    Overline text
  </text>
  <text x="20" y="90" font-size="20" fill="#1f2937" text-decoration="line-through">
    Strike-through text
  </text>
</svg>

Text Spacing

html

<svg width="400" height="100">
  <!-- Letter spacing -->
  <text x="20" y="35" font-size="18" fill="#3b82f6" letter-spacing="5">
    LETTER SPACING
  </text>

  <!-- Word spacing -->
  <text x="20" y="70" font-size="18" fill="#22c55e" word-spacing="20">
    Word Spacing Text
  </text>
</svg>

Using CSS Styling

html

<style>
  .fancy-text {
    font-size: 36px;
    font-weight: bold;
    fill: #3b82f6;
    transition: all 0.3s ease;
    cursor: pointer;
  }
  .fancy-text:hover {
    fill: #1d4ed8;
    font-size: 40px;
  }
</style>

<svg width="300" height="60">
  <text class="fancy-text" x="20" y="45">Hover Me</text>
</svg>

Text Animation

html

<svg width="400" height="100">
  <!-- Color animation -->
  <text x="20" y="50" font-size="32" font-weight="bold" fill="#3b82f6">
    Colorful text
    <animate attributeName="fill"
             values="#3b82f6;#ef4444;#22c55e;#8b5cf6;#3b82f6"
             dur="3s" repeatCount="indefinite"/>
  </text>

  <!-- Position animation -->
  <text x="250" y="50" font-size="24" fill="#f59e0b">
    Bounce
    <animate attributeName="y" values="50;30;50" dur="0.5s" repeatCount="indefinite"/>
  </text>
</svg>

Practical Application Examples

Logo Text

html

<svg width="200" height="60">
  <text x="10" y="45" font-size="40" font-weight="bold" font-family="Arial">
    <tspan fill="#3b82f6">Tech</tspan><tspan fill="#1f2937">Hub</tspan>
  </text>
</svg>

Badge

html

<svg width="120" height="40">
  <rect width="120" height="40" rx="20" fill="#3b82f6"/>
  <text x="60" y="26" text-anchor="middle" fill="white" font-size="14" font-weight="bold">
    NEW
  </text>
</svg>

Price Tag

html

<svg width="150" height="80">
  <rect width="150" height="80" rx="8" fill="#fef3c7" stroke="#f59e0b"/>
  <text x="75" y="35" text-anchor="middle" fill="#92400e" font-size="14">Special Price</text>
  <text x="75" y="60" text-anchor="middle" fill="#b45309" font-size="28" font-weight="bold">
    ¥99
  </text>
</svg>

Circular Avatar with Text

html

<svg width="100" height="100">
  <circle cx="50" cy="50" r="45" fill="#3b82f6"/>
  <text x="50" y="58" text-anchor="middle" fill="white" font-size="32" font-weight="bold">
    AB
  </text>
</svg>

Title Decoration

html

<svg width="300" height="60">
  <!-- Left decoration line -->
  <line x1="10" y1="30" x2="60" y2="30" stroke="#e5e7eb" stroke-width="2"/>
  <!-- Text -->
  <text x="150" y="38" text-anchor="middle" font-size="20" fill="#1f2937" font-weight="bold">
    Title Text
  </text>
  <!-- Right decoration line -->
  <line x1="240" y1="30" x2="290" y2="30" stroke="#e5e7eb" stroke-width="2"/>
</svg>

Next Steps

Now that you've learned text, let's learn SVG Stroke Properties to beautify shape strokes!

SVG Text ​

Basic Syntax ​

Main Properties ​

Basic Text ​

Text Alignment (text-anchor) ​

Font Styles ​

Text Stroke ​

Multi-line Text ​

tspan Element ​

Text Path ​

Circular Path Text ​

Text Decoration ​

Text Spacing ​

Using CSS Styling ​

Text Animation ​

Practical Application Examples ​

Logo Text ​

Badge ​

Price Tag ​

Circular Avatar with Text ​

Title Decoration ​

Next Steps ​

SVG Text

Basic Syntax

Main Properties

Basic Text

Text Alignment (text-anchor)

Font Styles

Text Stroke

Multi-line Text

tspan Element

Text Path

Circular Path Text

Text Decoration

Text Spacing

Using CSS Styling

Text Animation

Practical Application Examples

Logo Text

Badge

Price Tag

Circular Avatar with Text

Title Decoration

Next Steps