SVG Text on a Path

One of SVG's most distinctive features is the ability to flow text along any custom path, be it a curve, a wave, or even a circle. This is achieved with the textPath element.

How It Works

Rather than placing text at a fixed coordinate, textPath attaches the text to a path you have already defined. The text then flows along the shape of that path from start to end.

The technique requires three steps:

  1. Define a path inside a defs block and give it an id.
  2. Inside a text element, nest a textPath element.
  3. Reference the path by its id using the href attribute on textPath.

Example: Text on a Curved Path

View Output

Key textPath Attributes

Attribute Description
href References the id of the path to follow (e.g., href="#myPath").
startOffset Controls where along the path the text starts. Accepts a length or percentage. 50% starts at the midpoint.
text-anchor Combined with startOffset, this centers the text around the offset point when set to middle.

The Path Doesn't Have to Be Visible

In the example above, the path is shown with a faint gray line. In practice, you would usually hide the guide path entirely by not including a stroke or by simply not using a use element to render it, since paths inside defs are invisible by default.