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.

<svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
  <style>
    .small { font: italic 13px sans-serif; }
    .heavy { font: bold 30px sans-serif; }

    /* Note that the color of the text is set with the    *
     * fill property, the color property is for HTML only */
    .Rrrrr { font: italic 40px serif; fill: red; }
  </style>

  <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
This attribute determines the x coordinate of the starting point of the text baseline.
Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
y
This attribute determines the y coordinate of the starting point of the text baseline.
Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
dx
This attribute allows to shift the text position horizontally.
Value type: <length>|<percentage> ; Default value: none; Animatable: yes
dy
This attribute allows to shift the text position vertically.
Value type: <length>|<percentage> ; Default value: none; Animatable: yes
rotate
This attribute set the orientation of each individual glyph.
Value type: <list-of-number> ; Default value: none; Animatable: yes
lengthAdjust
This attribute determines how the text is stretched or compressed to fit the width define by the textLength attribute.
Value type: spacing|spacingAndGlyphs; Default value: spacing; Animatable: yes
textLength
This attribute lets specify the width into which the text will be drawn.
Value type<length>|<percentage> ; Default value: none; Animatable: yes

Global attributes

Core Attributes
Most notably: id, tabindex
Styling Attributes
class, style
Conditional Processing Attributes
Most notably: requiredExtensions, systemLanguage
Event Attributes
Global event attributes, Graphical event attributes
Presentation Attributes
Most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility
Aria Attributes
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role

Usage notes

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
<a>

Specifications

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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support1121.5983
dx Yes12 Yes Yes Yes Yes
dy Yes12 Yes Yes Yes Yes
lengthAdjust Yes12 Yes Yes Yes Yes
rotate Yes12 Yes Yes Yes Yes
textLength Yes12 Yes Yes Yes Yes
x Yes12 Yes Yes Yes Yes
y Yes12 Yes Yes Yes Yes
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support3 Yes Yes4 Yes3 ?
dx Yes Yes Yes Yes Yes Yes ?
dy Yes Yes Yes Yes Yes Yes ?
lengthAdjust Yes Yes Yes Yes Yes Yes ?
rotate Yes Yes Yes Yes Yes Yes ?
textLength Yes Yes Yes Yes Yes Yes ?
x Yes Yes Yes Yes Yes Yes ?
y Yes Yes Yes Yes Yes Yes ?

Document Tags and Contributors

Last updated by: Jeremie,