For developers · SVG textPath
SVG textPath generator
Curve text along an arc, a circle or a wave without outlining it. The result is real text on a path, ready to paste inline.
How the path is built
The arc is a single quadratic curve whose control point moves up or down with the Bend slider. The circle is two arc commands; for text on the bottom the path runs counter-clockwise so the letters stay upright. The wave is two cubic curves with mirrored control points. The text is anchored in the middle and placed with startOffset, so changing the text never shifts its center.
For shapes that are not a path at all, like bulge, fisheye or flag, textPath cannot help; use theText Warper and export a baked SVG path instead.
Frequently asked questions
Does the text stay selectable and accessible?
Yes. textPath keeps the characters as real text, so screen readers read it, users can select it, and search engines index it. That is the advantage over a baked outline.
Why is the end of my text cut off?
The text is longer than the path. Lower the font size, widen the curve, or add letter-spacing with a negative value. The preview shows how much of the path the text uses.
Can I use a web font?
Yes. Load it the usual way (Google Fonts link or @font-face) and set font-family on the text element. The SVG inherits page fonts when it is inline in the HTML.
href or xlink:href?
All current browsers accept plain href on textPath. Add xlink:href only if you must support very old Safari or an SVG-to-PDF tool that predates SVG 2.
Can I animate it?
Yes. Animate startOffset with CSS or SMIL to make the text travel along the path, or animate the path's d for a moving curve.