<text>

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

If text is included within SVG not inside of a <text> element, it is not rendered. This is different from being hidden by default, as setting the display property will not show the text.

Usage context

Attributes

Global attributes

• Conditional processing attributes »
• Core attributes »
• Graphical event attributes »
• Presentation attributes »
• class
• style
• externalResourcesRequired
• transform

Specific attributes

• x
• y
• dx
• dy
• text-anchor
• rotate
• textLength
• lengthAdjust

DOM Interface

This element implements the SVGTextElement interface.

Examples

Basic text usage

SVG

<svg xmlns="http://www.w3.org/2000/svg"
     width="500" height="40" viewBox="0 0 500 40">
  <text x="0" y="35" font-family="Verdana" font-size="35">
    Hello, out there
  </text>
</svg>

Result

Rotated text

SVG text can be rotated.

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="180" height="120">
  <text x="0" y="20" transform="rotate(30 20,40)">
    SVG Text Rotation example
  </text>
</svg>

Result

Colored text

SVG text can be colored.

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="30">
  <text x="10" y="20" stroke="none" fill="red">
    SVG Colored Text
  </text>
</svg>

Result

Styling text via CSS

SVG text can be styled like HTML text.

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="60">
  <text x="10" y="40"
      style="font-family: Times New Roman;
             font-size: 44px;
             stroke: #00ff00;
             fill: #0000ff;">
    SVG text styling
  </text>
</svg>

Result

Specifications

Browser compatibility

The chart is based on these sources.

Related

• <tspan>
• <tref>
• <altGlyph>