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, BMP, 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 under 3 seconds.
Try It Free — Convert Image to SVG