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.
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>
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