https://www.sarasoueidan.com/demos/interactive-svg-coordinate-system/
<!-----------------------------------------><hr>
<p>viewBox = <min-x> <min-y> <width> <height></p>
<ul>
<li><code>xPosition</code>: The X (horizontal axis) position of the top left corner of the viewBox</li>
<li><code>yPosition</code>: The Y (vertical axis) position of the top left corner of the viewBox</li>
<li><code>width</code>: The width of the portion of the entire SVG we want to capture</li>
<li><code>height</code>: The height of the portion of the entire SVG we want to capture</li>
</ul>

<ul>
  <li>M = moveto</li>
  <li>L = lineto</li>
  <li>H = horizontal lineto</li>
  <li>V = vertical lineto</li>
  <li>C = curveto</li>
  <li>S = smooth curveto</li>
  <li>Q = quadratic Bézier curve</li>
  <li>T = smooth quadratic Bézier curveto</li>
  <li>A = elliptical Arc</li>
  <li>Z = closepath</li>
</ul>
<!-----------------------------------------><hr>
1
 <svg width="200" height="200">
      <defs>
        <path id="myTextPath" d="M 50,100 Q 150,50 250,100" />
      </defs>
      <text fill="steelblue" font-size="20">
        <textPath xlink:href="#myTextPath">Internet Explorer Forever!</textPath>
      </text>
    </svg>

<!-----------------------------------------><hr>
2
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs><path id="path2" d="M50 50 L 50 50 A 30 30 0 0 1 130 80 L 130 130"/></defs>
<text font-size="18" text-anchor="middle" fill="#9d1d20">
<textPath xlink:href="#path2" startOffset="50%">
Text on a round corner
</textPath>
</text>
<!-- a subsidiary path to show how the text is drawn -->
<path d="M50 50 L 50 50 A 30 30 0 0 1 130 80 L 130 130" stroke="grey"stroke-width="1pt" fill="none"/>
</svg>

<!-----------------------------------------><hr>
3
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" style="border: solid 1px grey">
 <defs>
        <radialGradient id="grad">
            <stop offset="10%" stop-color="red"/>
            <stop offset="10%" stop-color="purple"/>
            <stop offset="10%" stop-color="blue"/>
            <stop offset="10%" stop-color="green"/>
            <stop offset="10%" stop-color="yellow"/>
            <stop offset="10%" stop-color="orange"/>
            <stop offset="10%" stop-color="red"/>
            <stop offset="10%" stop-color="purple"/>
            <stop offset="10%" stop-color="blue"/>
            <stop offset="10%" stop-color="green"/>
        </radialGradient>
    </defs>
    <circle fill="url(#grad)" cx="50" cy="50" r="50"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 50 50" style="border: solid 1px grey">
 <circle fill="url(#grad)" cx="50" cy="50" r="50"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 200 200" style="border: solid 1px grey">
 <circle fill="url(#grad)" cx="50" cy="50" r="50"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="50 50 100 100" style="border: solid 1px grey">
 <circle fill="url(#grad)" cx="50" cy="50" r="50"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 200 100" style="border: solid 1px grey">
 <circle fill="url(#grad)" cx="50" cy="50" r="50"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 200 100" style="border: solid 1px grey" preserveAspectRatio="none">
 <circle fill="url(#grad)" cx="50" cy="50" r="50"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 200 100" style="border: solid 1px grey" preserveAspectRatio="xMidYMin meet">
 <circle fill="url(#grad)" cx="50" cy="50" r="50"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 200 100" style="border: solid 1px grey" preserveAspectRatio="xMaxYMid meet">
 <circle fill="url(#grad)" cx="50" cy="50" r="50"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 200 100" style="border: solid 1px grey" preserveAspectRatio="xMaxYMax meet">
 <circle fill="url(#grad)" cx="50" cy="50" r="50"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 200" style="border: solid 1px grey" preserveAspectRatio="xMinYMid meet">
 <circle fill="url(#grad)" cx="50" cy="50" r="50"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 200" style="border: solid 1px grey" preserveAspectRatio="xMidYMid meet">
 <circle fill="url(#grad)" cx="50" cy="50" r="50"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 200" style="border: solid 1px grey" preserveAspectRatio="xMaxYMid meet">
 <circle fill="url(#grad)" cx="50" cy="50" r="50"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 200 100" style="border: solid 1px grey" preserveAspectRatio="xMidYMin slice">
 <circle fill="url(#grad)" cx="50" cy="50" r="50"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 166 100" style="border: solid 1px grey" preserveAspectRatio="xMinYMid slice">
 <circle fill="url(#grad)" cx="50" cy="50" r="50"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 166 100" style="border: solid 1px grey" preserveAspectRatio="xMidYMid slice">
 <circle fill="url(#grad)" cx="50" cy="50" r="50"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 166 100" style="border: solid 1px grey" preserveAspectRatio="xMaxYMid slice">
 <circle fill="url(#grad)" cx="50" cy="50" r="50"/>
</svg>

<!-----------------------------------------><hr>
4
<svg viewBox="0 0 500 150">
  <path id="curve" fill="transparent" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
  <text width="500">
    <textPath xlink:href="#curve">
      Dangerous Curves Ahead
    </textPath>
  </text>
</svg>
<!-----------------------------------------><hr>
5
<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500">
    <title>Circular Text Path</title>
    <style>
       #textcircle text {
            font-size: 76px;
            font-family: Copperplate, Copperplate Gothic, serif;
            font-weight: bold;
            font-variant: small-caps;
            font-variant-ligatures: none;
            stroke: black;
            stroke-width: 1.5px;
            fill: white;
        }
    </style>
    <defs>
        <path id="textcircle"
              d="M250,400
                 a150,150 0 0,1 0,-300a150,150 0 0,1 0,300Z"
              transform="rotate(12,250,250)"/>
    </defs>
    <rect width="100%" height="100%" fill="silver" />
    <text>
        <textPath xlink:href="#textcircle"
                  aria-label="All for One &amp; One for All"
                  textLength="942">&#160;One for All
                                         for One &amp;</textPath>
    </text>
</svg>
<!-----------------------------------------><hr>
6
<path id="textheart"M 400 400 L 300 300 A 50 50 0 1 1 400 300 A 50 50 0 1 1 500 300 L 400 400"/>
    </defs>
    <rect width="100%" height="100%" fill="silver" />
    <text>
        <textPath xlink:href="#textcircle"
                  aria-label="All for One &amp; One for All"
                  textLength="942">&#160;One for All
                                         for One &amp;</textPath>
    </text>
</svg>
<!-----------------------------------------><hr>
7
<!-----------------------------------------><hr>