How to Put Text on a Path in SVG — Curved Text Guide
Use SVG textPath to curve text around circles, arcs, and custom shapes — no Photoshop or Illustrator required.
Drop your image here
Supports PNG, JPG, WEBP up to 5MB
Using SVG textPath Element
The SVG `<textPath>` element links text to any `<path>` definition, flowing glyphs along its curve. Define a `<path>` in `<defs>`, then reference it with `xlink:href` or `href` on `<textPath>`.
- Define path in <defs> with a unique id
- Wrap text in <textPath href='#pathId'>
- Use startOffset to position text along the path
Common Curved Text Examples
Circle text uses an elliptical arc path. Wave text uses a cubic bezier curve. Badge arched text uses a simple arc from left to right along the top of a circle.
- Circle text: arc path connecting two endpoints
- Wave text: cubic bezier S or C command
- Badge top arch: arc with large-arc-flag=1
Frequently Asked Questions
How do I center text on an SVG path?
Set startOffset='50%' and text-anchor='middle' on the textPath element to center text along the path.
Does SVG textPath work in all browsers?
Yes — textPath is supported in all modern browsers. Use href instead of xlink:href for modern SVG specs.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in seconds.
Try It Free — Convert Image to SVG