Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML SVG <text>

  • Last Updated : 09 Jun, 2021

The SVG <text> element is used to draw text. There are some attributes to customize the text.

Syntax:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

<text
  x="x-coordinates"
  y="y-coordinates"
  
  dx="list of lengths"
  dy="list of lengths"
  
  rotate="list of numbers"
  textlength="length"
  lengthAdjust="spacing" >
</text>

Attribute:

  • x: x axis coordinates of glyphs.
  • y: y axis coordinates of glyphs.
  • dx: shift along with x-axis.
  • dy: shift along with y-axis.
  • rotate: rotation of glyphs.
  • textlength: render text’s length.
  • lengthAdjust: adjustments with the rendered length.

Example:



html




<html>
   <title>SVG Text</title>
   <body>
       
      <svg width="400" height="400">
            <text x="40" y="40" fill="green">
                  GeeksforGeeks
             </text>
      </svg>
    
   </body>
</html>

Output:

Example: Rotated multiline text.

html




<html>
   <title>SVG Text</title>
   <body>
       
      <svg width="400" height="400">
            <text x="10" y="10" fill="green"
                  transform="rotate(30 20, 40)">
              GeeksforGeeks</text>
            <text x="40" y="40" fill="green"
                  transform="rotate(90 10, 60)">
              GeeksforGeeks</text>
      </svg>
    
   </body>
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :