MDN will be in maintenance mode on Thursday September 21st, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

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


Global attributes

Specific attributes

DOM Interface

This element implements the SVGTextElement interface.


Basic text usage


<svg xmlns=""
     width="500" height="40" viewBox="0 0 500 40">

  <text x="0" y="35" font-family="Verdana" font-size="35">
    Hello, out there


Rotated text

SVG text can be rotated.


<svg xmlns="" width="180" height="120">
  <text x="0" y="20" transform="rotate(30 20,40)">
    SVG Text Rotation example


Colored text

SVG text can be colored.


<svg xmlns="" width="200" height="30">
  <text x="10" y="20" stroke="none" fill="red">
    SVG Colored Text


Styling text via CSS

SVG text can be styled like HTML text.


<svg xmlns="" 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



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

Browser compatibility

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

The chart is based on these sources.

Document Tags and Contributors

 Last updated by: mattwojo,