Text

Code

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="150">
  <text x="10" y="30" font-family="Arial" font-size="24" fill="black">Simple text</text>
  <text x="150" y="70" font-size="20" font-weight="bold" text-anchor="middle">Bold centered</text>
  <text x="10" y="110">
    <tspan font-weight="bold">Bold</tspan>
    <tspan fill="red"> red</tspan>
    <tspan font-style="italic"> italic</tspan>
  </text>
  <text x="10" y="140" letter-spacing="2" text-decoration="underline">Spaced underline</text>
</svg>

Explanation

The text element renders glyphs at a baseline position controlled by x, y, and text-anchor. The tspan element styles or positions sub-runs of text independently, enabling mixed colors and weights within one line. Common typographic attributes include font-family, font-size, font-weight, and letter-spacing.

More SVG Snippets