Text Along a Path

<textPath href="#id"> inside a <text> lays glyphs along a <path>, each turned to the tangent. startOffset="50%" with text-anchor="middle" centers the text on the path, dy lifts it off the line, and textLength fits it exactly. SVG 2's side and inline path attributes work only in Firefox 555 .

A circular BookNest seal and a title that follows a trailHTMLLive

<svg width="600" height="146" font-family="Georgia" font-weight="bold">
  <path id="ring" d="M20 75a55 55 0 1 1 110 0a55 55 0 1 1-110 0" fill="none"/>
  <circle cx="75" cy="75" r="68" fill="#1f5f8b"/>
  <circle cx="75" cy="75" r="42" fill="#fff3e0"/>
  <text font-size="13" fill="#fff" dy="4"><textPath href="#ring" textLength="340">
    BOOKNEST &#183; INDEPENDENT BOOKSHOP &#183; EST. 2024 &#183;</textPath></text>
  <text x="75" y="88" text-anchor="middle" font-size="34" fill="#1f5f8b">BN</text>
  <path id="ridge" d="M170 125C260 -10 360 150 450 60S560 40 590 70" fill="none"
    stroke="#3f7d3a" stroke-width="3"/>
  <text font-size="17" fill="#263238" dy="-8"><textPath href="#ridge" startOffset="50%"
    text-anchor="middle">Small Steps to Big Summits</textPath></text>
</svg>

Browser output of 27

The ring runs clockwise from nine o'clock; a textLength just under its circumference (2π × 55 ≈ 346) closes the circle evenly. Keep text paths smooth: glyphs collide at sharp corners.

MENU