The SVG <text> element draws a graphics element consisting of text. It's possible to apply a gradient, pattern, clipping path, mask, or filter to <text>, like any other SVG graphics element.

If text is included in SVG not inside of a <text> element, it is not rendered. This is different than being hidden by default, as setting the display property won't show the text.

Example

<svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
  <text x="20" y="35" class="small">My</text>
  <text x="40" y="35" class="heavy">cat</text>
  <text x="55" y="55" class="small">is</text>
  <text x="65" y="55" class="Rrrrr">Grumpy!</text>
</svg>

Attributes

• x

The x coordinate of the starting point of the text baseline.

<svg viewBox="0 0 120 60" width="120" height="60"  xmlns="http://www.w3.org/2000/svg">
  <text x="0" y="35">My</text>
  <text x="40" y="35">My</text>
  <text x="80" y="35">My</text>
</svg>

• y

The y coordinate of the starting point of the text baseline.

<svg viewBox="0 0 60 60" width="60" height="60"  xmlns="http://www.w3.org/2000/svg">
  <text  y="12">My</text>
  <text  y="35">My</text>
  <text  y="55">My</text>
</svg>

• dy

Shifts the text position vertically from a previous text element.

<svg viewBox="0 0 120 60" width="120" height="60"  xmlns="http://www.w3.org/2000/svg">
  <text x="0" y="35" dy="6" >My</text>
  <text x="40" y="35">My</text>
  <text x="80" y="35" dy="-6">My</text>
</svg>

• dx

Shifts the text position horizontally from a previous text element.

<svg viewBox="0 0 60 60" width="60" height="60"  xmlns="http://www.w3.org/2000/svg">
  <text  y="12" dx="6">My</text>
  <text  y="35">My</text>
  <text  y="55" dx="12">My</text>
</svg>

• font-size

The font-size attribute refers to the size of the font from baseline to baseline when multiple lines of text are set solid in a multiline layout environment.

<svg viewBox="0 0 120 60" width="120" height="60"  xmlns="http://www.w3.org/2000/svg">
  <text x="0" y="35" font-size="8">My</text>
  <text x="40" y="35" font-size="16">My</text>
  <text x="80" y="35" font-size="28">My</text>
</svg>

• font-weight

The font-weight attribute refers to the boldness or lightness of the glyphs used to render the text, relative to other fonts in the same font family.

<svg viewBox="0 0 120 60" width="120" height="60"  xmlns="http://www.w3.org/2000/svg">
  <text x="0" y="35" font-weight="bold">My</text>
  <text x="40" y="35" >My</text>
  <text x="80" y="35" font-weight="bold">My</text>
</svg>

• font-style

The font-style attribute specifies whether the text is to be rendered using a normal, italic, or oblique face.

<svg viewBox="0 0 120 60" width="120" height="60"  xmlns="http://www.w3.org/2000/svg">
  <text x="0" y="35" font-style="italic">My</text>
  <text x="40" y="35" >My</text>
  <text x="80" y="35" font-style="italic">My</text>
</svg>

• font-family

The font-family attribute indicates which font family will be used to render the text, specified as a prioritized list of font family names and/or generic family names.

<svg viewBox="0 0 120 60" width="120" height="60"  xmlns="http://www.w3.org/2000/svg">
  <text x="0" y="35" font-family="Arial">My</text>
  <text x="40" y="35" >My</text>
  <text x="80" y="35" font-family="Times New Roman">My</text>
</svg>

• text-anchor

The text-anchor attribute is used to align (start-, middle- or end-alignment) a string of pre-formatted text or auto-wrapped text where the wrapping area is determined from the inline-size property relative to a given point.

<svg viewBox="0 0 60 60" width="60" height="60"  xmlns="http://www.w3.org/2000/svg">
   <line x1="30" x2="30" y2="60" stroke="#ff0000"></line>
  <text x="30"  y="12" text-anchor="start">My</text>
  <text x="30" y="35" text-anchor="middle">My</text>
  <text x="30" y="55" text-anchor="end">My</text>
</svg>

• fill

The fill attribute defines the color used to paint the element.

<svg viewBox="0 0 120 60" width="120" height="60"  xmlns="http://www.w3.org/2000/svg">
  <text x="0" y="35" fill="#ff0000">My</text>
  <text x="40" y="35" fill="#00ff00">My</text>
  <text x="80" y="35" fill="#0000ff">My</text>
</svg>

• fill-opacity

The fill-opacity attribute is a presentation attribute defining the opacity of the element.

<svg viewBox="0 0 120 60" width="120" height="60"  xmlns="http://www.w3.org/2000/svg">
  <text x="0" y="35" fill-opacity="0.1">My</text>
  <text x="40" y="35" fill-opacity="0.5">My</text>
  <text x="80" y="35" fill-opacity="1">My</text>
</svg>

• stroke

The stroke attribute is a presentation attribute defining the color used to paint the outline of the text;

<svg viewBox="0 0 120 60" width="120" height="60"  xmlns="http://www.w3.org/2000/svg">
  <text x="0" y="35" stroke="#ff0000" paint-order="stroke">My</text>
  <text x="40" y="35" stroke="#00ff00" paint-order="stroke">My</text>
  <text x="80" y="35" stroke="#0000ff" paint-order="stroke">My</text>
</svg>

• stroke-width

The stroke-width attribute is a presentation attribute defining the width of the stroke to be applied to the text.

<svg viewBox="0 0 120 60" width="120" height="60"  xmlns="http://www.w3.org/2000/svg">
 <text x="0" y="35" stroke="#ff0000" stroke-width="1" paint-order="stroke">My</text>
  <text x="40" y="35" stroke="#ff0000" stroke-width="2" paint-order="stroke">My</text>
  <text x="80" y="35" stroke="#ff0000" stroke-width="3" paint-order="stroke">My</text>
</svg>