SVG Code to Place Text on a Curved Path

Text is on a path
<svg width="400" height="220" version="1.1" xmlns="">
   <path id="textPath" stroke="black" fill="transparent"
   d="M 50 200 
   C 80 100 100 0 200 100
   C 200 100 300 200 300 200" />

   <text font-family="Verdana" font-size="42.5" fill="blue">
   <textPath href="#textPath">
      Text is on a path

One interesting thing you can do with SVG is to place text on a curved path. The first thing you have to do is code the path, giving the path tag an id attribute. The syntax for a path is shown below.

<path d="M x y C x1 y1 x2 y2 x y ...>

dpath data, indicates data for a path follows
Mmoveto - is followed by the coordinates of the location to begin drawing the path
Ccurveto - data for a path segment draws a Bezier curve from the current coordinate point
x1 y1the control point at the beginning of the curve
x2 y2the control point at the end of the curve
x ythe new current point

A path can have many segments as desired, each in the form of C x1 y1 x2 y2 x y.

The second thing you need to do is code the text. As you see in the above code this is simply done using the <text> tag, and adding font-family, font-size, and fill attributes if desired. The important part is to place the text within <textPath> </textPath> tags, adding the href attribute with the path's id to point to the path the text should follow.

Learn more at

More Graphics Design Tips:
• XDdom 3D Axis and Coordinate System
• How to Use Basic Linear Gradients in Inkscape
• Find Free Stock Photos You'll Actually Want to Use For Your Website or Blog
• SVG Image Clipping
• The Browser Safe Palette
• Inkscape Document Properties
• Inkscape - How to Add a New Node
• SVG Code to Create a Rectangle and Text and Translate as a Group
• Stop Motion Animation: Nine Creative and Easy Techniques
• History of Type Development and Type Terminology