Crus4

logo

SVG Text Element


Table Of Contents

SVG <text> Element

In SVG the Text Element (<text>) is used to define a text. We can change the color of our text and can also apply gradient, mask or filter to our text.

Below in an example let’s write an SVG code to write a stylish text:

Example

<!DOCTYPE html>
<html>
<head>
  <title>SVG Text</title> 
<body>
<svg height="30" width="200">
  <text x="0" y="15" fill="green">SVG is fun</text>
</svg> 
</body>
</html>

The Attribute x and y defines the x-axis and y-axis of the text.

Rotate the Text

We can also rotate the text by using the transform attribute.

Below in an example let’s write a code to rotate the text.

Example

<!DOCTYPE html>
<html>
<head>
  <title>SVG Text</title>
</head>
<body>
<svg height="60" width="200">
  <text x="0" y="15" fill="red" transform="rotate(30 20,40)">SVG is fun</text>
</svg>
</body>
</html>

By using the <a> element we can insert link in the text.

Below in an example let’s write a code to insert a link in the text.

Example

<!DOCTYPE html>
<html>
<head>
  <title>SVG Text as a link</title>
<body>
<svg height="30" width="200">
  <a xlink:href="https://crus4.com/web-development/" target="_blank">
    <text x="0" y="15" fill="red">SVG is fun</text>
  </a>
</svg>
</body>
</html>

SVG Create Stylish Text

Now we are gonna create a stylish SVG text like this:

SVG is Fun!

Here is the SVG code:

<!DOCTYPE html>
<html>
<head>
  <title>SVG Create Stylish Text</title>
<body>
<svg height="300" width="600">
  <style>
     .Rrrrr {
      font: italic 40px serif;
      fill: red;
    }
    .small {
      font: italic 13px sans-serif;
    }
    .heavy {
      font: bold 30px sans-serif;
    }
   
  </style>
  <text x="20" y="35" class="Rrrrr">SVG</text>
  <text x="38" y="45" class="small">is</text>
  <text x="65" y="55" class="heavy">Fun!</text> 
</svg>
</body>
</html>


Related Posts

SVG Drawing Ellipse

Dotted Line SVG

SVG Circle

SVG Text Element- crus4