<path id="path"> ...</path>
 
 <text><textPath xlink:href="#path"> ...</textPath></text>

Code Example

SVG Image

<?xml version="1.0" standalone="no"?>

Right-click on the image to open the SVG viewer pop-up menu.
Click 'view SVG' to display the image in a new, full window to zoom & pan the image.  (SVG Viewer Tips)

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="700" height="700">

<!-- Text on a path -->
<defs>
<path id="textPath" d="M25 50 C10 0 90 0 90 65"/>
</defs>

<text fill="green" font-size="16">
<textPath xlink:href="#textPath">Text on a Path </textPath> </text>

<!-- Text on a wavy path -->
<defs>
<path id="wavyPath"
d="M15,150 c25,-75 50,50 100,0 s50,-50 150,50"/>
</defs>

<text fill="blue">
<textPath xlink:href="#wavyPath">
We go up and down and up.
</textPath> </text>

<!-- Text on an outline of a duck -->
<defs>
<path id="duck" d="M 0 312 C 40 360 100 280 160 306 C 160 306 165 310 170 303
C 180 200 220 220 260 261 C 260 261 280 273 290 268 C 288 280 272 285 250 285
C 195 283 210 310 230 320 C 260 340 265 385 200 391 C 150 395 30 395 5 314 Z"/>
</defs>

<text style="font-size:14" fill="red">
<textPath xlink:href="#duck">
We go up, then we go down, up again around his head. Now we are upside down as we go round his neck, along the body to the tail. </text>

</svg>

Here we show three examples of placing text on simple curved paths and on a complex path. (an outline of a duck).

We first define a path in a <defs> element and give the path an id. Starting with a <text> element, we reference within the path we just created with the <textPath> element. Like <use>, the <textPath> element uses the xlink:href attribute to reference a piece of code defined in a <defs> element and named with an id attribute.

Conceptually, for placing text on a path, the basic algorithm is such that each glyph is positioned at a specific point on the path, with the glyph getting rotated such that the baseline of the glyph is either parallel or tangent to the tangent of the curve at the given point.

A glyph is an important concept in SVG:

• A glyph is the way that particular character is rendered; for instance, A, A, A, and A are all versions of the capital letter A character. But they are displayed in different fonts, which means that they are all different glyphs.
• Therefore, a character is the basic idea of a letter or number, and a glyph is the way it is rendered on screen or paper.