ImageToSVG

SVG Text on Path — Curved Text Tutorial

Make text follow a curved path in SVG using the textPath element or Inkscape's text-on-path feature — for badges, labels, and circular typography.

Preset:
Colors:
VTracer vectorization + SVGO optimizationPrivacy protected

SVG textPath Element

SVG natively supports text on paths via the <textPath> element.

  • Define a path in <defs>: <path id='curve' d='M 50 200 Q 200 50 350 200'/>
  • Add text: <text><textPath href='#curve'>Your curved text here</textPath></text>
  • Hide the path: add visibility='hidden' to the path in <defs>
  • Offset: startOffset='50%' centers the text on the path
  • Font size, fill, and font-family work the same as regular SVG text

Practical Use Cases for SVG Text on Path

Text on paths creates distinctive typography effects widely used in badges and seals.

  • Circular badge text: text arcing around the top of a circular badge
  • Seal and stamp designs: text around the circumference of a circular seal
  • Wavy headline: text following a gentle wave path for editorial design
  • Arch text: text arcing over or under an image or design element
  • Curved price tags: product labels with text following an organic curve

Frequently Asked Questions

How do I make text follow a circle in SVG?

Define an arc path: <path id='circ' d='M 100 200 A 100 100 0 0 1 300 200 A 100 100 0 0 1 100 200'/>. Then <text><textPath href='#circ'>Circular text</textPath></text>.

How do I put text on a path in Inkscape?

Draw the path. Add a text element. Select both. Text > Put on Path. The text follows the selected path. Adjust startOffset in the XML editor for positioning.

Can I animate SVG text on a path?

Yes — animate the startOffset attribute with CSS or JavaScript to make text appear to flow along the path.

How do I flip curved text to the inside of a circle?

Reverse the path direction (Path > Reverse in Inkscape) or adjust the arc sweep flag. Text always renders on the 'top' side of the path in the path's direction.

Does text on path work in all browsers?

Yes — SVG textPath is supported in all modern browsers (Chrome, Firefox, Safari, Edge). It's been a standard SVG feature since SVG 1.1.

Related guides

Free converterConvert any image to SVG instantlyHow-to guideStep-by-step SVG conversionInkscape vs IllustratorSVG editor comparisonBest SVG toolsTop converter comparison

Ready to Convert Your Image to SVG?

Free online converter — no sign-up, no watermarks, results in under 3 seconds.

Convert Image to SVG — Free