YouTip

SVG Text <text>

The <text> element in SVG is used to add text content to an SVG image. It allows you to display text at a specified location and control the style, font, size, etc., of the text by setting attributes.

Basic Syntax

<text x="x-coordinate"  y="y-coordinate"  font-family="font"  font-size="size"  fill="fill-color"  text-anchor="anchor" <!-- Text anchor --> Text content <!-- Text content --></text>

Attribute Analysis:

• The x and y attributes define the coordinates of the top-left corner of the text, i.e., the starting position of the text.
• The font-family attribute defines the font name of the text, which can be a system font or a custom font.
• The font-size attribute defines the font size of the text, in pixels.
• The fill attribute defines the color of the text.
• The text-anchor attribute defines the text anchor, i.e., the alignment method of the text relative to the specified coordinates. Common values are "start" (default, left-aligned), "middle" (center-aligned), and "end" (right-aligned).

The following code draws some text in an SVG image. The text content is "Hello, SVG!", the font is Arial, the size is 20 pixels, the color is blue, it is center-aligned, and the top-left corner of the text is at (100, 100).

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <text x="100" y="100" font-family="Arial" font-size="20" fill="blue" text-anchor="middle">Hello, SVG!</text></svg>

Example 1

Write a text:

Here is the SVG code:

Example

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

<text x="0" y="15" fill="red">I love SVG</text>

</svg>

Try it »

View: View SVG File.

---

Example 2

Text with rotation:

Here is the SVG code:

Example

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

<text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>

</svg>

Try it »

View: View SVG File.

---

Example 3

Text on a path:

Here is the SVG code:

Example

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
 xmlns:xlink="http://www.w3.org/1999/xlink">

<defs>
<path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
</defs>

<text x="10" y="100" style="fill:red;">
<textPath xlink:href="#path1">I love SVG I love SVG</textPath>
</text>

</svg>

Try it »

View: View SVG File.

---

Example 4

Elements can arrange any number of groups with the <tspan> element. Each <tspan> element can contain different formats and positions. Multiple lines of text (with the <tspan> element):

Here is the SVG code:

Example

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

<text x="10" y="20" style="fill:red;">Several lines:
<tspan x="10" y="45">First line</tspan>
<tspan x="10" y="70">Second line</tspan>
</text>

</svg>

Try it »

View: View SVG File.

---

Example 5

Text as a link (using the <a> element):

Here is the SVG code:

Example

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
 xmlns:xlink="http://www.w3.org/1999/xlink">

<a xlink:href="http://www.w3schools.com/svg/" target="_blank">
<text x="0" y="15" fill="red">I love SVG</text>
</a>

</svg>

Try it »

View: View SVG File.