text Redirect 2

The text element defines a graphics element consisting of text. Note that it is possible to apply a gradient, pattern, clipping path, mask or filter to text

Usage context

Categories Graphics element, text content element
Permitted content Character data and any number of the following elements, in any order:
Animation elements »
Descriptive elements »
Text content child elements »
Normative document SVG 1.1 (2nd Edition)


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

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

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

The <text> element is used to draw text . The following code example is used for drawing a text with coordinates.

<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px">
  <text x="10" y="20">SVG Text Example</text>

SVG text can be rotated. The following code example illustrates it.

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

SVG text can also be styled

<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px">
  <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.

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) Not supported (Yes) 3.0.4

The chart is based on these sources.

Document Tags and Contributors

Last updated by: Jeremie,