SVG <text> Text

SVG <text> element is used to draw text in SVG images. In SVG, the <text> element can be used to draw text, rotate text, multiline text, and text with hyperlinks.

To draw text, use the <text> element.

　　　　　　<h1>SVG Text</h1>
　　　　　　<svg width="550" height="150">
　　　　　　　　　<g>
　　　　　　　　　　　　<text x="40" y="23" >Text: </text>
　　　　　　　　　　　　<text x="40" y="40" fill="rgb(121,0,121)">www.oldtoolbag.com Basic Tutorial</text>
　　　　　　　　　</g>　
　　　　　　</svg>

The effect after running is as follows:

SVG Text

Usage Explanation

x: It defines the position of the top-left corner of the text.

y: It defines the top position of the text.

width: Defines the width.

height: Defines the height.

fill: The fill attribute is used to define the fill color.

Rotated Text

It is used to create rotated text.

<svg height="100" width="200">
　　<text x="0" y="15" fill="red" transform="rotate(30　20,40)">www.oldtoolbag.com</text>
</svg>

The effect after running is as follows:

Usage Explanation

x: Defines the top-left position.

y: It defines the top position.

width: Defines the width.

height: Defines the height.

fill: The fill attribute is used to define the fill color.

Multiline Text

It is used to create multiline text. Use the <tspan> element to arrange the <text> element in any number of subgroups.

<svg width="570" height="100">
　　<g>
　　<text x="40" y="23"Multiline Text: </text>
　　<text x="40" y="40" fill="rgb(121,0,121)">www.oldtoolbag.com
　　　<tspan x="40" y="60" font-weight="bold">Online Basic Tutorial.</tspan>
　　　</text>
　　</g>
　</svg>

The effect after running is as follows:

Usage Explanation

x: Defines the top-left position.

y: It defines the top position.

width: Defines the width.

height: Defines the height.

fill: The fill attribute is used to define the fill color.

Hyperlink Text

It is used to create text with hyperlinks.

　　　　　　<svg width="500" height="100">
　　　　　　　　　<g>
　　　　　　　　　　　　<text x="20" y="10"Text as Link: </text>
　　　　　　　　　
　　　　　　　　　　　　<a xlink:href="https://www.oldtoolbag.com/svg-tutorial" target="_blank">
　　　　　　　　　　　　　　　<text font-family="Verdana" font-size="30" x="40" y="40"　
　　　　　　　　　　　　　　　fill="rgb(121,0,121)">www.oldtoolbag.com</text>
　　　　　　　　　　　　</a>
　　　　　　　　　</g>
　　　　　　</svg>

The effect after running is as follows:

Usage Explanation

x: Defines the top-left position.

y: It defines the top position.

width: Defines the width.

height: Defines the height.

fill: The fill attribute is used to define the fill color.