How do I add an SVG textPath?

Paste a path plus a node and click Add textPath. The path gets an id if it lacked one; the string moves into . x/y on the text are dropped because the path is the layout.

How is textPath different from converting text to path?

Text to path replaces with outlined d so the font is not needed. Add textPath keeps a live text node that follows the curve — you can still edit the string and the font.

Do I need an id on the path already?

No. A missing id is allocated (text-path, text-path-2, …). Existing ids are reused. The first drawable path (not inside clipPath/mask/defs) is the track.

Is this the same as converting tspan to text?

No. Tspan → text unwraps line runs into sibling elements. This page attaches a run to a path. Set startOffset afterwards to slide the string along the curve.

Add SVG textPath — Free Tool

FAQ

Quick answers

How do I add an SVG textPath?: Paste a path plus a <text> node and click Add textPath. The path gets an id if it lacked one; the string moves into <textPath href="#id">. x/y on the text are dropped because the path is the layout.
How is textPath different from converting text to path?: Text to path replaces <text> with outlined d so the font is not needed. Add textPath keeps a live text node that follows the curve — you can still edit the string and the font.
Do I need an id on the path already?: No. A missing id is allocated (text-path, text-path-2, …). Existing ids are reused. The first drawable path (not inside clipPath/mask/defs) is the track.
Is this the same as converting tspan to text?: No. Tspan → text unwraps line runs into sibling <text> elements. This page attaches a run to a path. Set startOffset afterwards to slide the string along the curve.

Text to path → textPath → text → Set startOffset → Tspan → text →

Privacy Terms

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B

Add SVG textPath

Live preview