SVG Text

To draw text, <text> element is used.

Example

<!DOCTYPE html>
<html>
   <title>SVG Text</title>
   <body>
      
      <h1>SVG Text</h1>
      
      <svg width="950" height="950">
         <g>
            <text x="40" y="23" >Text: </text>
            <text x="40" y="40" fill="rgb(121,0,121)">WWW.JavaTPoint.COM</text>
         </g> 
      </svg>
   
   </body>
</html>

Test it Now

Explanation

x: It defines the position of the top left corner of the text.

y: It defines the top position of the text.

width: It defines the width.

height: It defines the height.

fill: fill attribute is used to define the fill color.

Text with rotate

It is used to create rotational text.

Example

<!DOCTYPE html>
<html>
<body>

<svg height="60" width="200">
  <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
</svg>
 
</body>
</html>

Test it Now

Explanation

x: It defines the position of the top left corner.

y: It defines the top position.

width: It defines the width.

height: It defines the height.

fill: fill attribute is used to define the fill color.

Multiline Text

It is used to create multiline text. With the <tspan> element, the <text> element can be arranged in any number of sub-groups.

Example

<!DOCTYPE html>
<html>
   <title>SVG Text</title>
   <body>
   
      <h1>SVG Text</h1>
      
      <svg width="570" height="100">
         <g>
            <text x="40" y="23" >Multiline Text: </text>
            <text x="40" y="40" fill="rgb(121,0,121)">WWW.JavaTPoint.COM
               <tspan x="40" y="60" font-weight="bold"> This is Simple Easy learning. </tspan>
            </text>
         </g>
      </svg>
      
   </body>
</html>

Test it Now

Explanation

x: It defines the position of the top left corner.

y: It defines the top position.

width: It defines the width.

height: It defines the height.

fill: fill attribute is used to define the fill color.

Hyper link Text

It is used to create the text which has hyper link.

Example

<!DOCTYPE html>
<html>
   <title>SVG Text</title>
   <body>
   
      <h1>Sample SVG Text</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="20" y="10" >Text as Link: </text>
         
            <a xlink:href="https://www.javatpoint.com/svg-tutorial" target="_blank">
               <text font-family="Verdana" font-size="30" x="40" y="40" 
               fill="rgb(121,0,121)">WWW.JavaTPoint.COM</text>
            </a>
         </g>
      </svg>
      
   </body>
</html>

Test it Now