Text on Path SVG Generator

Place text along SVG paths (circles, waves, custom curves) with offset and spacing controls.

Tested tool guide Tested browser tools Checked August 16, 2026

What Text on Path SVG Generator does, with a checked example

Point a block of text at an SVG path and it stops sitting on a straight baseline: it follows the curve. Choose a circle, a wave, or paste your own path data, and the tool writes the path plus a textPath element that rides along it, with start-offset and letter-spacing controls for positioning and spread. Two things surprise most first-time users. First, each glyph is rotated to follow the path's direction, so along the underside of a circle the letters come out upside down. Second, nothing wraps: text longer than the path simply runs off the end.

Worked example

A concrete input and expected output from the current implementation.

Input

Text: SVG CIRCLE TEXT
Path (d attribute): M250,150 A100,100 0 1 1 50,150 A100,100 0 1 1 250,150
Start offset: 50%
Letter spacing: 2

Expected output

<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <path id="path1" d="M250,150 A100,100 0 1 1 50,150 A100,100 0 1 1 250,150" fill="none" stroke="#ccc"/>
  <text font-size="24" fill="#111">
    <textPath href="#path1" startOffset="50%" letter-spacing="2">SVG CIRCLE TEXT</textPath>
  </text>
</svg>

The two arcs each sweep 180 degrees, so the circle's circumference is 2 x pi x 100, about 628 units, and 50% of that is about 314 units, exactly half: the text starts at (50,150), the leftmost point, diametrically opposite the path start at (250,150). Because sweep flag 1 runs the path clockwise, the letters are upright as they pass over the top of the circle and inverted along the bottom, where the path travels right to left.

How the result is produced

Path and textPath, bound by id

The output is two elements: a <path> carrying an id, and a <text> whose <textPath href="#id"> points at it. At render time the browser resolves that reference, measures the path, and lays the glyphs along it. Delete the path or rename its id in an exported file and the text silently vanishes. The text stays live text, not converted to outlines, so the result is editable and font-dependent.

How offset and spacing are measured

The offset control writes startOffset, measured along the path from its starting point: a plain number is user units of distance, a percentage is relative to the path's total length, so 50% lands exactly halfway no matter how large the path is. The spacing control writes letter-spacing, added to every glyph's advance along the curve. Each glyph rotates to the path's tangent, which is why the text follows the path's direction rather than the page's.

Good uses

Setting the ring of text around a circular badge, seal, or coin-style logo, where the label must wrap the edge of the artwork.
Arching a section heading along a wave or banner curve so a hero image header follows the artwork instead of sitting on a flat line across it.
Labelling a river, route, or contour line on an SVG map or diagram so the name hugs the feature it refers to.

Limits and checks

Nothing wraps: a string longer than the path runs past the end and can spill outside the viewBox. Fix it by shortening the text, lengthening the path, or reducing the font size, because the tool will not break the line for you.
The output is only valid as a pair: the textPath depends on the path staying in the document with the same id. Copying just the <text> block into another file, or letting a minifier rewrite the id, blanks the text with no error.
Newlines in your text do not create lines: everything renders as one string along the single path, with line breaks typically collapsing to spaces. Multi-line or wrapped copy will not look the way it did in your source.

Common questions

Why is the text upside down on the bottom of my circle?

Each letter is rotated so its baseline matches the path's tangent, so wherever the path runs right-to-left the letters flip over, as on the bottom half of a clockwise circle. Reverse the direction of the path data to flip which half is inverted. The SVG 2 spec adds side="right" on textPath for exactly this case, but support varies, so reversing the path is the dependable fix.

Can I reuse a path from another SVG file?

Yes. Copy the d attribute, the coordinate string after d= in the other file, into the custom-curve field and the text will follow it. The text runs from the path's start point, so check which end of the curve is the start before you fine-tune: the offset control is how you skip ahead along the path.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.