SVG Text Element
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>
Text As a Link
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:
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 Text Element- crus4
