SVG Text

How to Draw a Text?

The <text> SVG element that draws a graphics element consisting of text. It's possible to apply a gradient, pattern, clipping path, mask, or filter to <text>, like any other SVG graphics element.

Learn SVG

In this example, we will draw a text 'Learn SVG' by using <text> SVG element.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <body> <svg height="25" width="100"> <text x="0" y="15" fill="red">Learn SVG</text> </svg> </body> </html>

How to Custom a Text?

He is Great!

In this example, we will customize the text by using CSS properties.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> .small { font: italic 13px sans-serif; } .medium { font: bold 30px sans-serif; } .large { font: italic 40px serif; fill: red; } </style> </head> <body> <svg height="70" width="180"> <text x="20" y="35" class="small">He</text> <text x="40" y="35" class="medium">is</text> <text x="65" y="55" class="large">Great!</text> </svg> </body> </html>

How to Slant a Text?

Learn SVG

In this example, we will slant a text by using transform CSS property or SVG attribute.

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> svg text{ fill:red; transform:rotate(20 10,70); } </style> </head> <body> <svg height="50" width="100"> <text x="0" y="15">Learn SVG</text> </svg> </body> </html>

How to Link a Text?

Learn SVG!

In this example , we will create a link for the text by covering the specific SVG element by <a> SVG element.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <body> <svg height="20" width="80" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="/svg" target="_blank"> <text x="0" y="15" fill="red">Learn SVG!</text> </a> </svg> </body> </html>

Attributes Value

AttributeExplanation
xSpecifies the x coordinate of the starting point of the text baseline.
ySpecifies the y coordinate of the starting point of the text baseline.
dxShifts the text position horizontally from a previous text element.
dyShifts the text position vertically from a previous text element.
rotateRotates orientation of each individual glyph.
textlength How the text is stretched or compressed to fit the width defined by the textLength attribute.
lengthAdjust Specifies a width that the text should be scaled to fit.

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Share this Page

Meet the Author