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

CategoriesGraphics element, Text content element
Permitted contentCharacter data and any number of the following elements, in any order:
Animation elements
Descriptive elements
Text content elements


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

  <text x="250" y="150" 
    Hello, out there

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

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

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


Global attributes

Specific attributes

DOM Interface

This element implements the SVGTextElement interface.


Specification Status Comment
Scalable Vector Graphics (SVG) 2
The definition of '<text>' in that specification.
Working Draft  
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of '<text>' in that specification.
Recommendation Initial definition

Browser compatibility

Feature Chrome Firefox (Gecko) IE Opera Safari
Basic support 1.0 1.5 (1.8) 9.0 8.0 3.0.4
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 3.0 1.0 (1.8) No support (Yes) 3.0.4

The chart is based on these sources.

Document Tags and Contributors

 Last updated by: Tigt,