A round loyalty stamp with a café's name curving around its edge, a logo that writes its motto all the way around a badge: text that hugs a shape like that is not straight text rotated letter by letter, it is <textPath> making it follow an existing path.
Without it, bending text in SVG would mean positioning every letter by hand, at a different angle each time, a slow job that breaks the moment the size changes.
Definition
<textPath> makes text follow the outline of a <path> already defined elsewhere in the document, referenced through its href attribute. It is never used on its own: it sits inside a <text> element, in place of plain text, and inherits the styling set on that enclosing <text>.
Main attributes
| Attribute | Role |
|---|---|
href | References the id of the path to follow, for example #myPath |
startOffset | Shifts the starting point of the text along the path |
method | align by default, or stretch to spread letters over tight curves |
spacing | auto or exact, for letter spacing along the curve |
The path being followed does not need to be visible: it can stay invisible, with no stroke and no fill, only guiding the text.
Concrete rendering example
Here is text curving all the way around a circle, like a coffee stamp writing its name around the rim of a coloured disc.
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="80" fill="#78350f" />
<path
id="circleText"
d="M 100 20 A 80 80 0 1 1 99.9 20"
fill="none"
stroke="none"
/>
<text
font-size="16"
font-family="sans-serif"
fill="#fef3c7"
letter-spacing="2"
>
<textPath href="#circleText" startOffset="5%">ARTISAN COFFEE CO</textPath>
</text>
</svg>The circular path only works as an invisible guide: giving it fill="none" and stroke="none" keeps just the trajectory, with no outline added to the final drawing.
The direction the path is drawn in matters too: a path drawn left to right makes the text advance left to right, but a reversed path flips the reading direction of the letters. It is worth checking on the first try, especially on a path imported from design software rather than hand-written.
Difference with plain <text>
A regular <text> element is positioned with fixed x and y coordinates, on a straight line. <textPath> drops those coordinates in favour of the referenced path: every letter is positioned and rotated automatically according to the path's geometry, something that would be impossible to achieve by hand with a plain <text>.
Classic trap: <textPath> only works if the referenced path already exists in the document and carries a correctly spelled id. If the path is misidentified, the text silently falls back to a plain straight line, with no error shown in the console.
Real-world use case
Curved text is used for round logos such as stamps or seals, for text hugging a route on a map, or for titles following the shape of a wavy banner. It is the technique behind "official seal" style logos found on certificates or loyalty badges.
Frequently asked questions
path have to be visible on screen?No, it is common to make it invisible with fill="none" and stroke="none". The path still defines the text's trajectory even when it is not drawn, a bit like a rail hidden under the carriage it carries.
Yes, by using a path made of two arcs that almost close back onto themselves, as in the circular stamp example. The text then travels all the way around, from the path's starting point to its end point. On a very tight curve, the method="stretch" attribute keeps the letters from squashing into one another.
Yes, with startOffset, expressed as a percentage of the path's total length or as an absolute unit. A value of 50% starts the text exactly halfway along the path instead of at its origin.