SVG Text

SVG : Adding Text to Graphics

Introduction to the Element

The <text> element allows you to embed textual content within your SVG graphics. This text is rendered as a graphic element and can be styled, transformed, and manipulated like other SVG shapes.

Example 1: Basic Text

Displaying a simple text string:

The text “I love SVG!” rendered in red.

SVG Code:

<svg width="200" height="30">
  <text x="0" y="15" fill="red" font-family="Arial" font-size="16">
    I love SVG!
  </text>
</svg>

Key Attributes:

x: The x-coordinate of the starting point of the text baseline.
y: The y-coordinate of the starting point of the text baseline.
fill: Sets the color of the text.
font-family, font-size, font-weight: Standard CSS font properties can be applied.

Tip: For precise text alignment, the text-anchor property (values: start, middle, end) is very useful. For example, text-anchor="middle" will center the text horizontally at the given x coordinate.

Example 2: Rotating Text

Applying a rotation transformation to text:

The text “I love SVG” rendered in red and rotated.

SVG Code:

<svg width="200" height="60">
  <text x="0" y="15" fill="red" font-family="Verdana" font-size="16" transform="rotate(30 20,40)">
    I love SVG
  </text>
</svg>

Code Explanation:

transform="rotate(angle cx,cy)": Rotates the text. angle is the rotation in degrees. cx,cy are optional coordinates for the center of rotation. If omitted, rotation is around (0,0) of the current user coordinate system.

Example 3: Multi-line Text with

The <tspan> element is used within a <text> element to apply different styling or positioning to parts of the text, or to create multi-line text.

Text displayed on multiple lines:

A label “Several lines:” followed by “First line.” and “Second line.” on subsequent lines, all in red.

SVG Code:

<svg width="200" height="90">
  <text x="10" y="20" style="fill:red; font-family:sans-serif; font-size:14px;">
    Several lines:
    <tspan x="10" dy="1.2em">First line.</tspan>
    <tspan x="10" dy="1.2em">Second line.</tspan>
  </text>
</svg>

Code Explanation:

Each <tspan> element can have its own x, y, dx, or dy attributes for positioning.
dy="1.2em": Positions the tspan 1.2 ems down from the previous text position, effectively creating a new line. em is relative to the current font size.

Example 4: Text as a Link

You can make SVG text clickable by wrapping it in an <a> (anchor) element.

Clickable text “I love SVG!” in red.

SVG Code:

<svg width="200" height="30">
  <a href="https://developer.mozilla.org/en-US/docs/Web/SVG" target="_blank">
    <text x="0" y="15" fill="blue" style="text-decoration: underline; font-family:Arial; font-size:16px;">
      I love SVG!
    </text>
  </a>
</svg>

Code Explanation:

The <a> element uses the href attribute to specify the link destination.
target="_blank" opens the link in a new tab/window.
Styling for links (like underline and color) should be applied to the <text> element or via CSS.

Practical Applications:

SVG text is used for labels in charts and diagrams, dynamic text overlays on images, interactive UI elements, and accessible graphical text. Always provide a <title> and <desc> element for accessibility when text conveys important information.