Simplify SVG (Vector Graphics) Path – Jquery

let paths = document.querySelectorAll('path');
let decimals = 2;
paths.forEach((path, c) => {

  /**
   * 1. convert inline css style to 
   * svg presentational attributes
   */
  let style = path.style;
  if (style.length) {
    for (let i = 0; i < style.length; i++) {
      let propertyName = style.item(i);
      let value = style.getPropertyValue(propertyName);

      // 1.2 convert rgb colors to hex
      if ((propertyName === 'stroke' || propertyName === 'fill') && value !== 'none') {
        //hexToRgb
        let [r, g, b] = value.replaceAll('rgb(', '').replaceAll(')', '').split(',');
        let colorHex = rgbToHex(r, g, b);
        value = colorHex;
      }
      //set attribute
      path.setAttribute(propertyName, value)

    }
    // remove style attribute
    path.removeAttribute('style')
  }

  /**
   * 1.3 optional: convert transform matrix 
   * to readable properties
   */
  let transform = window.getComputedStyle(path).transform;
  let matrix = path.transform.baseVal[0].matrix;
  let transforms = qrDecomposeMatrix(matrix);
  path.setAttribute('transform', transforms.svgTransform)


  /**
   * 2. round pathdata
   * requires getPathData() polyfill
   */
  roundPath(path, decimals)
  
  // output
  output.value = new XMLSerializer().serializeToString(svg)


})


/**
 * round pathData
 */
function roundPath(path, decimals = 3) {
  let pathData = path.getPathData();
  pathData.forEach((com, c) => {
    if (decimals >= 0) {
      com.values.forEach((val, v) => {
        pathData[c].values[v] = +val.toFixed(decimals);
      });
    }
  });
  // apply rounded
  path.setPathData(pathData)
}



/**
 *  Decompose matrix to readable transform properties 
 *  translate() rotate() scale() etc.
 *  based on @AndreaBogazzi's answer
 *  https://stackoverflow.com/questions/5107134/find-the-rotation-and-skew-of-a-matrix-transformation#32125700
 *  return object with seperate transform properties 
 *  and ready to use css or svg attribute strings
 */
function qrDecomposeMatrix(matrix, precision = 1) {
  let {
    a,
    b,
    c,
    d,
    e,
    f
  } = matrix;
  // matrix is array
  if (Array.isArray(matrix)) {
    [a, b, c, d, e, f] = matrix;
  }

  let angle = Math.atan2(b, a),
    denom = Math.pow(a, 2) + Math.pow(b, 2),
    scaleX = Math.sqrt(denom),
    scaleY = (a * d - c * b) / scaleX,
    skewX = Math.atan2(a * c + b * d, denom) / (Math.PI / 180),
    translateX = e ? e : 0,
    translateY = f ? f : 0,
    rotate = angle ? angle / (Math.PI / 180) : 0;
  let transObj = {
    translateX: translateX,
    translateY: translateY,
    rotate: rotate,
    scaleX: scaleX,
    scaleY: scaleY,
    skewX: skewX,
    skewY: 0
  };

  let cssTransforms = [];
  let svgTransforms = [];
  for (let prop in transObj) {
    transObj[prop] = +parseFloat(transObj[prop]).toFixed(precision);
    let val = transObj[prop];
    let unit = "";
    if (prop == "rotate" || prop == "skewX") {
      unit = "deg";
    }
    if (prop.indexOf("translate") != -1) {
      unit = "px";
    }

    // combine these properties
    let convert = ["scaleX", "scaleY", "translateX", "translateY"];

    if (val !== 0) {
      cssTransforms.push(`${prop}(${val}${unit})`);
    }

    if (convert.indexOf(prop) == -1 && val !== 0) {
      svgTransforms.push(`${prop}(${val})`);
    } else if (prop == "scaleX") {
      svgTransforms.push(
        `scale(${+scaleX.toFixed(precision)} ${+scaleY.toFixed(precision)})`
      );
    } else if (prop == "translateX") {
      svgTransforms.push(
        `translate(${transObj.translateX} ${transObj.translateY})`
      );
    }

  }
  // append css style string to object
  transObj.cssTransform = cssTransforms.join(" ");
  transObj.svgTransform = svgTransforms.join(" ");
  return transObj;
}



/**
 *  based on @Tim Down's answer
 *  https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb#5624139
 */
function rgbToHex(r, g, b) {
  return "#" + (1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1);
}

body {
  padding: 2em;
}

svg {
  border: 1px solid #ccc;
  overflow: visible;
  width: 50%;
}

textarea{
min-height:20em;
width:100%;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/path-data-polyfill.min.js"></script>


<svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="107.7 331.25 3.5 3.5">
        <g>
            <path
                style="fill:none;stroke-width:0.074;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(50.19989%,50.19989%,50.19989%);stroke-opacity:1;stroke-miterlimit:10;"
                d="M 110.949219 265.421875 L 109.730469 265.691406 L 108.699219 266.410156 L 108.011719 267.460938 L 107.78125 268.679688 "
                transform="matrix(1,0,0,-1,0,600)" />
            <path
                style="fill:none;stroke-width:0.074;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(50.19989%,50.19989%,50.19989%);stroke-opacity:1;stroke-miterlimit:10;"
                d="M 111.050781 268.679688 L 111.050781 265.421875 " transform="matrix(1,0,0,-1,0,600)" />
            <path
                style="fill:none;stroke-width:0.074;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(50.19989%,50.19989%,50.19989%);stroke-opacity:1;stroke-miterlimit:10;"
                d="M 110.949219 268.679688 L 110.949219 265.421875 " transform="matrix(1,0,0,-1,0,600)" />
        </g>
    </svg>
    
    
    <textarea id="output"></textarea>