SVG Text

January 19, 2021 1:50 pm IST

You are Here:

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.

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>

Run

How to Custom a Text?

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>

Run

How to Slant a Text?

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>

Run

How to Link a Text?

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>

Run

Attributes Value

Attribute	Explanation
x	Specifies the x coordinate of the starting point of the text baseline.
y	Specifies the y coordinate of the starting point of the text baseline.
dx	Shifts the text position horizontally from a previous text element.
dy	Shifts the text position vertically from a previous text element.
rotate	Rotates 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.