Your Search Results


    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 elements »
    Normative document SVG 1.1 (2nd Edition)


    <?xml version="1.0"?>
    <svg xmlns=""
         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="" 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="" 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="" 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: xzyfer,