Text in SVG

In SVG (Scalable Vector Graphics), text elements allow you to display text within your graphical content. SVG supports various text-related elements and attributes for displaying text, including <text>, <tspan>, and <textPath>. Here's how to work with text in SVG:

---

1. Text Element

The <text> element in SVG is used to display a block of text at a specified position. You can customize the appearance of text using attributes such as x, y, font-family, font-size, and fill.

Example:

<svg width="200" height="100">
  <text x="50" y="50" font-family="Arial" font-size="20" fill="red">Hello, SVG!</text>
</svg>

---

2. Text with tspans

The <tspan> element allows you to group multiple text strings within a single <text> element. This is useful for applying different styles or positioning to different parts of the text.

Example:

<svg width="200" height="100">
  <text x="50" y="50">
    <tspan font-weight="bold">Hello,</tspan>
    <tspan fill="red"> SVG!</tspan>
  </text>
</svg>

---

3. Text along a Path

The <textPath> element allows you to render text along a specified path. This is useful for creating curved or decorative text effects.

Example:

<svg width="200" height="100">
  <path id="textPath" d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" fill="none" />
  <text>
    <textPath xlink:href="#textPath">Text along a path</textPath>
  </text>
</svg>

In this example, the text "Text along a path" follows the path defined by the <path> element.

---

4. Conclusion

SVG provides powerful features for displaying text within graphical content. By using elements like <text>, <tspan>, and <textPath>, you can create visually appealing text elements that enhance the overall design of your SVG graphics.