DEV Community

Cover image for Curved text in SVG without turning your words into shapes
Usman Bashir
Usman Bashir

Posted on Edited on Originally published at svglab.app

Curved text in SVG without turning your words into shapes

#webdev #design #css #svg

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.

Two panels: converted to paths, where each letter becomes a shape you cannot retype, and real textPath, where the words stay text you can edit, slide and flip

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. To flip it under a curve, reverse the path.

It is part of SVG 1.1 and renders in Chrome, Edge, Firefox and Safari.

Doing it by eye in SVG Lab

Writing the curve by hand is fine for one arc. For anything you want to place by eye, SVG Lab (svglab.app), a free browser SVG editor, binds text to a path in one click. I ran it as a guest, no sign-in, on 31 October 2026. Before, one path and one line of text, both selected:

The SVG Lab artboard with a blue arc and a straight line of text under it, both selected

After pressing Text on path:

The SVG Lab editor with text bent along a blue arc and the On path panel open

  1. Draw the curve with the Pen or Curve tool, or import an SVG that has one.
  2. Add the words with the Text tool.
  3. Select both (Ctrl+A).
  4. Press Text on path in the Path panel.
  5. Drag the text to slide it, or use the On path controls: Start, Side (Above or Below), Flip (Upside down) and Length (Natural or Fit path).

This is exactly what SVG Lab wrote, copied from its SVG source panel:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 420" width="800" height="420">
  <rect x="0" y="0" width="800" height="420" fill="#f7f3ec"/>
  <path id="path_path1" d="M 100 320 C 300 133.33 500 133.33 700 320" stroke="#7e9bd6" stroke-width="4" stroke-linecap="butt" stroke-linejoin="miter" fill="none"/>
  <text font-family="Arial" font-size="40" font-weight="400" font-style="normal" text-anchor="start" dominant-baseline="hanging" paint-order="fill stroke" xml:space="preserve" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="#1d1d1d"><textPath href="#path_path1" xlink:href="#path_path1" startOffset="15.881%"><tspan dy="-40">Text that follows the curve</tspan></textPath></text>
</svg>
Enter fullscreen mode Exit fullscreen mode

The path got an id, both href and xlink:href are set, and the words are still words.

One flaw I left in: with Side set to Below at 40 px, the letters touch the line. A nudge on Start or a smaller size fixes it.

The same text moved below the arc with Side set to Below

Which to use

  • Curving text in the browser and keeping it editable: SVG Lab, because it binds in one click and exports a real textPath.
  • Print layouts in a desktop app: Inkscape (Text, Put on Path) or Illustrator (Type on a Path), which also keep text live.
  • One curved line in a web page: write the textPath yourself.

The editor is free. Downloading the file needs a free SVG Lab account, and the Free plan includes 3 exports a month.

Full walkthrough with screenshots: https://svglab.app/blog/how-to-put-text-on-a-curved-path-in-svg

Top comments (0)