JSFiddle - React, Tailwind, and code Playground

HTML

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
 "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

<svg width="300px" height="400px" style="fill:#AAEEBB;" >
  <g transform="translate(50,50)" style="fill:none;stroke:#AABBEE;stroke-linejoin:round;stroke-width:4px;stroke-dasharray:4,4;">
    <path d="M 0,0 L-100.5,0 L100,45  v20 h30
             M0,100 L50,50 L100,125      m20,0 l20,-20
             M0,150               M100,150
             M0,150 L180,220  M0,200 L190,210  M0,250 L160,200
             M0,160 L160,218  M0,210 L130,208  M0,260 L160,198
             M0,170 L190,216  M0,220 L170,206  M0,270 L160,196
             M0,180 L120,214  M0,230 L150,204  M0,280 L170,194
             M0,190 L170,212  M0,240 L160,202  M0,290 L160,192
             M0,5 Q 20,20 40,5
             "></path>
  </g>
</svg>

<h3>Mnemo</h3>
<b>10 commands:</b> M, L, H, V, C, S, Q, T ou A, Z. <br />
<ul>
    <li>M start at x,y</li>
    <li>L lineup to x,y</li>
    <li>H horizontal line +x</li>
    <li>V vertical line +y</li>
    <li>C</li>
    <li>S</li>
    <li>Q bezier: attracted by x1,y1 line up x2,y2. ex "M0,0 Q5,5 20,0".</li>
    <li>T ou A : A for circle arcs.</li>
    <li>Z: and line back to beggining of path (closing path command) </li>
</ul>
<b>2 coordinates systems:</b>
<ul>
    <li>UPPER case : absolute coordinates.</li>
    <li>lower case : relative to previous point.</li>
</ul>

CSS

svg { border: 3px solid #6688CC;}

JavaScript

var getBBox = function(selector){
    var xmin, xmax, ymin, ymax,p;
    // clean up path
    var t = d3.select(selector).attr("d");  // get svg line's code
    console.log(t)
   t = t.replace(/[a-z].*/g," ") // remove relative coords, could rather tag it for later processing to absolute!
        .replace(/[\sA-Z]+/gi," ").trim().split(" ");  // remove letters and simplify spaces.
    console.log(t)
    
    for(var i in t){    // set valid initial values
        if(t[i].length>1){ 
            p = t[i].split(","); 
            xmin = xmax = p[0]; ymin = ymax = p[1]; }
    }
    for(var i in t){ // update xmin,xmax,ymin,ymax
      p = t[i].split(",");
      if(!p[1]){ p[0]=xmin; p[1] = ymin;} // ignore relative jumps such h20 v-10
      xmin = Math.min(xmin, p[0]);
      xmax = Math.max(xmax, p[0]);
      ymin = Math.min(ymin, p[1]);
      ymax = Math.max(ymax, p[1]);
    } return [[xmin,ymax],[xmax,ymin]]; //  [[left, bottom], [right, top]] as for https://github.com/mbostock/d3/wiki/Geo-Paths#bounds
}
var bb = getBBox("path");
console.log(bb+"")