<svg width="400" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg">
<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
</textPath>
</text>
</svg>
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 ...>
| Attribute | Description |
| d | path data, indicates data for a path follows |
| M | moveto - is followed by the coordinates of the location to begin drawing the path |
| C | curveto - data for a path segment draws a Bezier curve from the current coordinate point |
| x1 y1 | the control point at the beginning of the curve |
| x2 y2 | the control point at the end of the curve |
| x y | the 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.
More Graphics Design Tips:
• What is the Pantone Color System?
• Five Surprising Reasons I Use Krita for Photo Editing
• What is Blender? The Software's Origins and Evolution
• Pencil Free Open Source Cartoon Animation Drawing Program
• MathML Element to Display a Fraction
• How to Use Basic Linear Gradients in Inkscape
• Stop Motion Animation: Nine Creative and Easy Techniques
• RGB Vs CMYK
• How to Remove PNG and JPEG EXIF Metadata
• Where To Find Free Stock Photography, Clip Art, And Other Graphics For Your Web Site