<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

Example

<svg xmlns="http://www.w3.org/2000/svg"
     width="100" height="30" viewBox="0 0 1000 300">

  <text x="250" y="150" 
        font-family="Verdana" 
        font-size="55">
    Hello, out there
  </text>

  <!-- Show outline of canvas with a 'rect' element -->
  <rect x="1" y="1" width="998" height="298"
        fill="none" stroke-width="2" />
</svg>

SVG text can be rotated, like so:

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

SVG text can be styled like HTML text:

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

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.

Specifications

Browser compatibility

The chart is based on these sources.

Related

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