Alternatively, you could rotate the circle in your vector editing application before exporting it.

Note that the SVG transform coordinates - the last two numbers in the transform - are relative to the viewBox , not the element.

It’s usually easiest to rotate the path to your preferred orientation, which will carry the text along with it:

It can be difficult to determine the “starting point” on a closed shape. One easy way to do so in Illustrator is to temporarily apply a stroke to the path and turn on the end arrowhead in the Stroke panel (note that you may have to turn on Show Options in the top right corner of the panel to reveal the arrowhead options). The arrowhead will point to the starting point.

If the text starts too “early” on the circle but has room to move on the end, use startOffset . The value of this attribute determines the “starting point” for the text, and is measured in percentages, with 0% being the default and 100% (i.e. “starting” at the very end of the path) as the maximum possible value. As before, text that goes past the end point of the path will effectively disappear. It can be difficult to determine the “starting point” on a closed shape. One easy way to do so in Illustrator is to temporarily apply a stroke to the path and turn on the end arrowhead in the Stroke panel (note that you may have to turn on Show Options in the top right corner of the panel to reveal the arrowhead options). The arrowhead will point to the starting point.

Add an dx (or x ) attribute value to the <text> element, which will move the text along the path by the value of the attribute (this value is interpreted as pixels, by default). Note that dx currently works best with Firefox, so it’s the option I recommend.

<text dx="50"> <textPath xlink:href="#textcircle"> Red Hot Chilli Peppers </textPath> </text>

Negative values for x or dx will suck the leading letters for the text into invisibility. You can also set a new starting point by using the Scissors tool in Illustrator: clicking anywhere the path will set that as the new starting point. This will also open the path, making the code for the shape slightly longer. SVG text placement on the same circular path with different path directions: clockwise (left) and counter-clockwise (right)

Reversing Course

The text will proceed in the direction implied by the way the path is drawn. There are two possible interpretations in SVG:

A circle that proceeds clockwise will have the bases of the letters set on the outside of the path: that is, the letters will be “facing outwards” A circle that is interpreted as being “anticlockwise” will have the bases of the letters set on the inside of the path: that is, the letters will be “facing inwards”.

Reverse-path option for a compound path in Adobe Illustrator

The easiest way to reverse the course of a path in Adobe Illustrator is to make sure it is a Compound Path ( Object / Compound Path / Make ) and then use Reverse Path Direction in the Attributes panel (again, you may have to use Show Options in the top right corner to see these controls).

SVG2 adds the side attribute, which will make text directionality on paths significantly easier: a side value of left or right will effectively reverse the directionality of a path. side will also allow the application of text around, and within, basic shapes like rectangles and circles, rather than exclusively paths. Sadly, as of this writing, no browser yet supports it.

Reversing the path doesn’t remove the potential problem of having clockwise text appear on the outside while anticlockwise text appears on the inside of a path. The easiest way to fix this is to use the dy attribute to move the text “up” or “down” relative to the path. For example:

<text dy="50"> <textPath xlink:href="#textcircle"> Red Hot Chilli Peppers </textPath> </text>

The result, on a clockwise path, is to move the text inward. You can also use a negative value to move the text outwards.

Alternate Curves

Text read in opposite directions on the same curve are fairly frequent in logo design. The most familiar identity that uses this technique is probably the ubiquitous Starbucks Coffee logo.

Starbucks Coffee Logo Starbucks Coffee

There are two ways to achieve this result in SVG:

Use a copy of the same path, but reversed in direction, with a new id , as a reference for the other text element. (You’ll need to move the characters using the dy attribute) Assuming both text fragments are the same size: use another path that touches the top of the lower characters. This will become the baseline for the upper text. (You may still have to reverse the direction of one path).

In the example above, I used the second technique. The code, without the central mermaid design or stars:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200"> <title>Starbucks Coffee Logo</title> <defs> <path d="M15,100a85,85 0 1,0 170,0a85,85 0 1,0 -170,0" id="coffeecircle" /> <path d="M100,37c34.8,0,63,28.2,63,63s-28.2,63-63,63s-63-28.2-63-63S65.2,37,100,37z" id="starbuckscircle" transform="rotate(-85 100 100)" /> </defs> <circle cx="100" cy="100" r="100" fill="#067655" id="background" /> <circle fill="none" stroke="#FFF" cx="100" cy="100" r="93.8" stroke-width="3" id="rim" /> <text> <textPath xlink:href="#starbuckscircle">Starbucks</textPath> </text> <text dx="55" textLength="160" class="coffee"> <textPath xlink:href="#coffeecircle">Coffee</textPath> </text> </svg>

The associated styles:

text { font-family: Santana-Black, sans-serif; fill: #fff; text-transform: uppercase; font-size: 32px; } .coffee { letter-spacing: 6px; }

You can see the actual paths used for the text by dragging them out of the <defs> section and applying a stroke and stroke-width attribute in the CodePen version.

Conclusion

There are several reasons why you might want to place text on a path:

You want the text to remain readable, accessible, and SEO-friendly

You plan to animate the text .

. You want the text to be easily editable and/or selectable.

If you don’t want these qualities - or can built alternatives to them - then it may be easier to break the text into paths and export the result as a “frozen” SVG.

Of course, circles and ellipses are not the only way text can be applied to a path: I’ll look at other possibilities in the next article.