Most ways of bending text give you a picture of text. Object to Path in a desktop editor, and the outlined export from many curved text generators, turn every letter into its own shape. It looks right, but you can no longer retype it, swap the font, or let a screen reader read it.

SVG already has the right tool for this: textPath .

The markup

Give a path an id, then point a textPath inside your text at it:

<svg viewBox= "0 0 800 420" xmlns= "http://www.w3.org/2000/svg" > <path id= "curve" d= "M 100 320 Q 400 40 700 320" fill= "none" stroke= "#7e9bd6" /> <text font-size= "40" > <textPath href= "#curve" startOffset= "50%" text-anchor= "middle" > Text that follows the curve </textPath> </text> </svg>

Enter fullscreen mode

Exit fullscreen mode

href names the path. Older tools want xlink:href too.

startOffset is where along the curve the words start. 50% with text-anchor="middle" centres them.

Text runs the way the path is drawn.…