svg-path-simplify 0.0.7 → 0.0.8

package/src/svgii/pathData_parse_els.js

@@ -0,0 +1,239 @@
+//import { pathDataToAbsoluteOrRelative, pathDataToLonghands, cubicToArc } from './pathData_convert.js';
+import { parsePathDataString, parsePathDataNormalized, stringifyPathData } from './pathData_parse.js';
+
+export function shapeElToPath(el){
+
+    let nodeName = el.nodeName.toLowerCase();
+    if(nodeName==='path')return el;
+
+    let pathData = getPathDataFromEl(el);
+    let d = pathData.map(com=>{return `${com.type} ${com.values} `}).join(' ')
+    let attributes = [...el.attributes].map(att=>att.name);
+
+    let pathN = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    pathN.setAttribute('d', d );
+
+    let exclude = ['x', 'y', 'cx', 'cy', 'dx', 'dy', 'r', 'rx', 'ry', 'width', 'height', 'points']
+
+    attributes.forEach(att=>{
+        if(!exclude.includes(att)){
+            let val = el.getAttribute(att);
+            pathN.setAttribute(att, val)
+        }
+    })
+
+    //el.replaceWith(pathN)
+    return pathN
+
+}
+
+
+// retrieve pathdata from svg geometry elements
+export function getPathDataFromEl(el, stringify=false) {
+
+    let pathData = [];
+    let type = el.nodeName;
+    let atts, attNames, d, x, y, width, height, r, rx, ry, cx, cy, x1, x2, y1, y2;
+
+    // convert relative or absolute units 
+    const svgElUnitsToPixel = (el, decimals = 9) => {
+        //console.log(this);
+        const svg = el.nodeName !== "svg" ? el.closest("svg") : el;
+
+        // convert real life units to pixels
+        const translateUnitToPixel = (value) => {
+
+            if (value === null) {
+                return 0
+            }
+            //default dpi = 96
+            let dpi = 96;
+            let unit = value.match(/([a-z]+)/gi);
+            unit = unit ? unit[0] : "";
+            let val = parseFloat(value);
+            let rat;
+
+            // no unit - already pixes/user unit
+            if (!unit) {
+                return val;
+            }
+
+            switch (unit) {
+                case "in":
+                    rat = dpi;
+                    break;
+                case "pt":
+                    rat = (1 / 72) * 96;
+                    break;
+                case "cm":
+                    rat = (1 / 2.54) * 96;
+                    break;
+                case "mm":
+                    rat = ((1 / 2.54) * 96) / 10;
+                    break;
+                // just a default approximation
+                case "em":
+                case "rem":
+                    rat = 16;
+                    break;
+                default:
+                    rat = 1;
+            }
+            let valuePx = val * rat;
+            return +valuePx.toFixed(decimals);
+        };
+
+        // svg width and height attributes
+        let width = svg.getAttribute("width");
+        width = width ? translateUnitToPixel(width) : 300;
+        let height = svg.getAttribute("height");
+        height = width ? translateUnitToPixel(height) : 150;
+
+        //prefer viewBox values
+        let vB = svg.getAttribute("viewBox");
+        vB = vB
+            ? vB
+                .replace(/,/g, " ")
+                .split(" ")
+                .filter(Boolean)
+                .map((val) => {
+                    return +val;
+                })
+            : [];
+
+        let w = vB.length ? vB[2] : width;
+        let h = vB.length ? vB[3] : height;
+        let scaleX = w / 100;
+        let scaleY = h / 100;
+        let scalRoot = Math.sqrt((Math.pow(scaleX, 2) + Math.pow(scaleY, 2)) / 2);
+
+        let attsH = ["x", "width", "x1", "x2", "rx", "cx", "r"];
+        let attsV = ["y", "height", "y1", "y2", "ry", "cy"];
+
+
+        let atts = el.getAttributeNames();
+        atts.forEach((att) => {
+            let val = el.getAttribute(att);
+            let valAbs = val;
+            if (attsH.includes(att) || attsV.includes(att)) {
+                let scale = attsH.includes(att) ? scaleX : scaleY;
+                scale = att === "r" && w != h ? scalRoot : scale;
+                let unit = val.match(/([a-z|%]+)/gi);
+                unit = unit ? unit[0] : "";
+                if (val.includes("%")) {
+                    valAbs = parseFloat(val) * scale;
+                }
+                //absolute units
+                else {
+                    valAbs = translateUnitToPixel(val);
+                }
+                el.setAttribute(att, +valAbs);
+            }
+        });
+    }
+
+    svgElUnitsToPixel(el)
+
+    const getAtts = (attNames) => {
+        atts = {}
+        attNames.forEach(att => {
+            atts[att] = +el.getAttribute(att)
+        })
+        return atts
+    }
+
+    switch (type) {
+        case 'path':
+            d = el.getAttribute("d");
+            pathData = parsePathDataNormalized(d);
+            break;
+
+        case 'rect':
+            attNames = ['x', 'y', 'width', 'height', 'rx', 'ry'];
+            ({ x, y, width, height, rx, ry } = getAtts(attNames));
+
+
+            if (!rx && !ry) {
+                pathData = [
+                    { type: "M", values: [x, y] },
+                    { type: "L", values: [x + width, y] },
+                    { type: "L", values: [x + width, y + height] },
+                    { type: "L", values: [x, y + height] },
+                    { type: "Z", values: [] }
+                ];
+            } else {
+
+                if (rx > width / 2) {
+                    rx = width / 2;
+                }
+                if (ry > height / 2) {
+                    ry = height / 2;
+                }
+                pathData = [
+                    { type: "M", values: [x + rx, y] },
+                    { type: "L", values: [x + width - rx, y] },
+                    { type: "A", values: [rx, ry, 0, 0, 1, x + width, y + ry] },
+                    { type: "L", values: [x + width, y + height - ry] },
+                    { type: "A", values: [rx, ry, 0, 0, 1, x + width - rx, y + height] },
+                    { type: "L", values: [x + rx, y + height] },
+                    { type: "A", values: [rx, ry, 0, 0, 1, x, y + height - ry] },
+                    { type: "L", values: [x, y + ry] },
+                    { type: "A", values: [rx, ry, 0, 0, 1, x + rx, y] },
+                    { type: "Z", values: [] }
+                ];
+            }
+            break;
+
+        case 'circle':
+        case 'ellipse':
+
+            attNames = ['cx', 'cy', 'rx', 'ry', 'r'];
+            ({ cx, cy, r, rx, ry } = getAtts(attNames));
+
+            if (type === 'circle') {
+                r = r;
+                rx = r
+                ry = r
+            } else {
+                rx = rx ? rx : r;
+                ry = ry ? ry : r;
+            }
+
+            pathData = [
+                { type: "M", values: [cx + rx, cy] },
+                { type: "A", values: [rx, ry, 0, 1, 1, cx - rx, cy] },
+                { type: "A", values: [rx, ry, 0, 1, 1, cx + rx, cy] },
+            ];
+
+            break;
+        case 'line':
+            attNames = ['x1', 'y1', 'x2', 'y2'];
+            ({ x1, y1, x2, y2 } = getAtts(attNames));
+            pathData = [
+                { type: "M", values: [x1, y1] },
+                { type: "L", values: [x2, y2] }
+            ];
+            break;
+        case 'polygon':
+        case 'polyline':
+
+            let points = el.getAttribute('points').replaceAll(',', ' ').split(' ').filter(Boolean)
+
+            for (let i = 0; i < points.length; i += 2) {
+                pathData.push({
+                    type: (i === 0 ? "M" : "L"),
+                    values: [+points[i], +points[i + 1]]
+                });
+            }
+            if (type === 'polygon') {
+                pathData.push({
+                    type: "Z",
+                    values: []
+                });
+            }
+            break;
+    }
+
+    return stringify ? stringifyPathData(pathData): pathData;
+
+};

package/src/svgii/pathData_remove_collinear.js

@@ -1,5 +1,6 @@
-import { checkBezierFlatness, getDistAv, getSquareDistance } from "./geometry.js";
+import { getDistAv, getSquareDistance } from "./geometry.js";
 import { getPolygonArea } from "./geometry_area.js";
+import { checkBezierFlatness, commandIsFlat } from "./geometry_flatness.js";
 import { renderPoint } from "./visualize.js";
 
 export function pathDataRemoveColinear(pathData, tolerance = 1, flatBezierToLinetos = true) {
@@ -50,6 +51,7 @@ export function pathDataRemoveColinear(pathData, tolerance = 1, flatBezierToLine
             //let areaBez = getPolygonArea([p0, ...cpts, p], true)
 
             isFlatBez = checkBezierFlatness(p0, cpts, p)
+            //isFlatBez = commandIsFlat([p0, ...cpts, p]).flat
            // console.log();
 
             //isFlatBez = areaBez < distMax * 0.25

package/src/svgii/pathData_remove_orphaned.js

@@ -0,0 +1,20 @@
+export function removeOrphanedM(pathData) {
+
+    for (let i = 0, l = pathData.length; i < l; i++) {
+        let com = pathData[i];
+        if (!com) continue;
+        let { type = null, values = [] } = com;
+        let comN = pathData[i + 1] ? pathData[i + 1] : null;
+        if ((type === 'M' || type === 'm')) {
+
+            if (!comN || (comN && (comN.type === 'Z' || comN.type === 'z'))) {
+                pathData[i] = null
+                pathData[i + 1] = null
+            }
+        }
+    }
+
+    pathData = pathData.filter(Boolean);
+    return pathData;
+
+}

package/src/svgii/pathData_remove_zerolength.js

@@ -1,4 +1,5 @@
 
+/*
 // remove zero-length segments introduced by rounding
 export function removeZeroLengthLinetos_post(pathData) {
     let pathDataOpt = []
@@ -13,6 +14,7 @@ export function removeZeroLengthLinetos_post(pathData) {
     })
     return pathDataOpt
 }
+*/
 
 export function removeZeroLengthLinetos(pathData) {
 
@@ -26,14 +28,22 @@ export function removeZeroLengthLinetos(pathData) {
         let com = pathData[c];
         let { type, values } = com;
 
-        let valsL = values.slice(-2);
-        p = { x: valsL[0], y: valsL[1] };
+        let valsLen = values.length;
+        //let valsL = values.slice(-2);
+        //p = { x: valsL[0], y: valsL[1] };
+        p = { x: values[valsLen-2], y: values[valsLen-1] };
 
         // skip lineto
         if (type === 'L' && p.x === p0.x && p.y === p0.y) {
             continue
         }
 
+        // skip minified zero length
+        if (type === 'l' || type === 'v' || type === 'h') {
+            let noLength = type === 'l' ? (values.join('') === '00') : values[0] === 0;
+            if(noLength) continue
+        } 
+
         pathDataN.push(com)
         p0 = p;
     }

package/src/svgii/pathData_reorder.js

@@ -1,10 +1,12 @@
 import { splitSubpaths, addExtemesToCommand } from './pathData_split.js';
-import { getComThresh, commandIsFlat, getPathDataVertices, getSquareDistance } from './geometry.js';
+import { getComThresh, getPathDataVertices, getSquareDistance } from './geometry.js';
 import { getPolyBBox } from './geometry_bbox.js';
 
 
 import { renderPoint, renderPath } from './visualize.js';
 import { getPolygonArea } from './geometry_area.js';
+import { checkBezierFlatness, commandIsFlat } from "./geometry_flatness.js";
+
 
 
 export function pathDataToTopLeft(pathData) {

package/src/svgii/pathData_split.js

@@ -2,6 +2,7 @@ import { pointAtT, svgArcToCenterParam, getBezierExtremeT  } from "./geometry";
 import { renderPoint, renderPath } from "./visualize";
 
 
+
 /**
  * split segments into chunks to
  * prevent simplification across 

package/src/svgii/rounding.js

@@ -11,7 +11,7 @@ export function detectAccuracy(pathData) {
 
     // Reference first MoveTo command (M)
     let M = { x: pathData[0].values[0], y: pathData[0].values[1] };
-    let p0 =  M
+    let p0 = M
     let p = M
     pathData[0].decimals = 0
     let lastDec = 0;
@@ -29,34 +29,40 @@ export function detectAccuracy(pathData) {
         let { type, values } = com;
 
         let lastVals = values.length ? values.slice(-2) : [M.x, M.y];
-        p={x:lastVals[0], y:lastVals[1]}
+        p = { x: lastVals[0], y: lastVals[1] }
 
         // use existing averave dimension value or calculate
-        let dimA = com.dimA ? +com.dimA.toFixed(8) : type!=='M' ? +getDistAv(p0, p).toFixed(8) : 0
+        let dimA = com.dimA ? +com.dimA.toFixed(8) : type !== 'M' ? +getDistAv(p0, p).toFixed(8) : 0
         //let dimA = +getDistAv(p0, p).toFixed(8)
         //console.log('dimA', dimA, com.dimA, type);
 
-        if(dimA) dims.add(dimA);
+        if (dimA) dims.add(dimA);
+
+        if (dimA && dimA < minDim) minDim = dimA;
+        if (dimA && dimA > maxDim) maxDim = dimA;
 
-        if(dimA && dimA<minDim) minDim = dimA;
-        if(dimA && dimA>maxDim) maxDim = dimA;
-        
 
-        if(type==='M'){
-            M=p;
+        if (type === 'M') {
+            M = p;
         }
         p0 = p;
     }
 
 
     let dim_min = Array.from(dims).sort()
-    let sliceIdx = Math.ceil(dim_min.length/8);
-    dim_min = dim_min.slice(0, sliceIdx );
 
-    let dimVal = dim_min.reduce((a,b)=>a+b, 0) / sliceIdx;
+    /*
+    let minVal = dim_min.length > 15 ?
+        (dim_min[0] + dim_min[2]) / 2 :
+        dim_min[0];
+    */
+        
+    let sliceIdx = Math.ceil(dim_min.length / 10);
+    dim_min = dim_min.slice(0, sliceIdx);
+    let minVal = dim_min.reduce((a, b) => a + b, 0) / sliceIdx;
 
-    let threshold = 50
-    let decimalsAuto = dimVal > threshold ? 0 : Math.floor(threshold / dimVal).toString().length
+    let threshold = 40
+    let decimalsAuto = minVal > threshold*1.5 ? 0 : Math.floor(threshold / minVal).toString().length
 
     // clamp
     return Math.min(Math.max(0, decimalsAuto), 8)
@@ -145,16 +151,16 @@ export function roundPathData(pathData, decimals = -1) {
     let hasDecimal = decimals == 'auto' && pathData[0].hasOwnProperty('decimals') ? true : false;
     //console.log('decimals', decimals, hasDecimal);
 
-    for(let c=0, len=pathData.length; c<len; c++){
-        let com=pathData[c];
-        let {type, values} = com
+    for (let c = 0, len = pathData.length; c < len; c++) {
+        let com = pathData[c];
+        let { type, values } = com
 
-        if (decimals >-1 || hasDecimal) {
+        if (decimals > -1 || hasDecimal) {
             decimals = hasDecimal ? com.decimals : decimals;
 
 
             //console.log('decimals', type, decimals);
-            pathData[c].values = com.values.map(val=>{return val ? +val.toFixed(decimals) : val });
+            pathData[c].values = com.values.map(val => { return val ? +val.toFixed(decimals) : val });
 
         }
     };

package/src/svgii/simplify_refineExtremes.js

@@ -0,0 +1,173 @@
+import { getCombinedByDominant } from "../pathData_simplify_cubic_extrapolate";
+import { getDistAv, interpolate } from "./geometry";
+import { getPathArea } from "./geometry_area";
+import { getPathDataBBox } from "./geometry_bbox";
+import { renderPoint } from "./visualize";
+
+export function refineAdjacentExtremes(pathData, {
+    threshold = null, tolerance = 1
+} = {}) {
+
+    //dimA = dimA ? dimA : 
+    if (!threshold) {
+        let bb = getPathDataBBox(pathData);
+        threshold = (bb.width + bb.height) / 2 * 0.05
+        //console.log('new threshold', threshold);
+    }
+
+    let l = pathData.length
+
+    for (let i = 0; i < l; i++) {
+        let com = pathData[i];
+        let { type, values, extreme, corner=false, dimA, p0, p } = com;
+        let comN = pathData[i + 1] ? pathData[i + 1] : null;
+
+
+        // adjacent 
+        //&& comN.extreme
+        if (comN && type === 'C' && comN.type === 'C' && extreme && !corner) {
+
+            // check dist
+            let diff = getDistAv(p, comN.p)
+            let isCose = diff < threshold;
+
+
+            if (isCose) {
+                //renderPoint(markers, comN.p, 'cyan', '1%', '0.5')
+                //console.log(comN);
+                //console.log(diff, threshold);
+
+                let dx1 = (com.cp1.x - comN.p0.x)
+                let dy1 = (com.cp1.y - comN.p0.y)
+
+                let horizontal = Math.abs(dy1) < Math.abs(dx1);
+
+                let pN = comN.p;
+                let ptI;
+                let t = 1;
+
+                if (comN.extreme) {
+
+                    // extend cp2
+                    if (horizontal) {
+                        t = Math.abs(Math.abs(comN.cp2.x - comN.p.x) / Math.abs(com.cp2.x - com.p.x))
+                        //console.log('t', t);
+                        ptI = interpolate(comN.p, com.cp2, 1 + t)
+                        com.cp2.x = ptI.x
+                        //renderPoint(markers, com.cp2, 'cyan', '1%', '0.5')
+                        //renderPoint(markers, ptI, 'orange', '1%', '0.5')
+                    }
+                    else {
+                        //renderPoint(markers, comN.p0, 'cyan', '1%', '0.5')
+                        t = Math.abs(Math.abs(comN.cp2.y - comN.p.y) / Math.abs(com.cp2.y - com.p.y))
+                        ptI = interpolate(comN.p, com.cp2, 1 + t)
+                        com.cp2.y = ptI.y
+                    }
+
+                    //merge commands
+                    pathData[i + 1].values = [com.cp1.x, com.cp1.y, com.cp2.x, com.cp2.y, pN.x, pN.y]
+                    pathData[i + 1].cp1 = com.cp1
+                    pathData[i + 1].cp2 = com.cp2
+                    pathData[i + 1].p0 = com.p0
+                    pathData[i + 1].p = pN
+                    pathData[i + 1].extreme = true
+
+                    // nullify 1st
+                    pathData[i] = null;
+                    continue
+
+                }
+
+                // extend fist command
+                else {
+
+                    let comN2 = pathData[i + 2] ? pathData[i + 2] : null;
+                    if (!comN2 && comN2.type !== 'C') continue
+
+                    //continue
+
+                    // extrapolate
+                    let comEx = getCombinedByDominant(comN, comN2, threshold, tolerance, false)
+                    //console.log('comEx', comEx);
+
+                    if (comEx.length === 1) {
+                        pathData[i + 1] = null;
+
+                        comEx = comEx[0]
+
+                        pathData[i + 2].values = [comEx.cp1.x, comEx.cp1.y, comEx.cp2.x, comEx.cp2.y, comEx.p.x, comEx.p.y]
+                        pathData[i + 2].cp1 = comEx.cp1
+                        pathData[i + 2].cp2 = comEx.cp2
+                        pathData[i + 2].p0 = comEx.p0
+                        pathData[i + 2].p = comEx.p
+                        pathData[i + 2].extreme = comEx.extreme
+
+                        i++
+                        continue
+                    }
+
+                }
+
+            }
+        }
+    }
+
+    // remove commands
+    pathData = pathData.filter(Boolean)
+    l = pathData.length
+
+
+
+    /**
+     * refine closing commands
+     */
+
+    let closed = pathData[l - 1].type.toLowerCase() === 'z';
+    let lastIdx = closed ? l - 2 : l - 1;
+    let lastCom = pathData[lastIdx];
+    let penultimateCom = pathData[lastIdx - 1] || null;
+    let M = { x: pathData[0].values[0], y: pathData[0].values[1] }
+
+    let dec = 8
+    let lastVals = lastCom.values.slice(-2);
+    let isClosingTo = +lastVals[0].toFixed(dec) === +M.x.toFixed(dec) && +lastVals[1].toFixed(dec) === +M.y.toFixed(dec)
+    let fistExt = pathData[1].type === 'C' && pathData[1].extreme ? pathData[1] : null;
+
+
+    //renderPoint(markers, M, 'blue')
+    //renderPoint(markers, fistExt.cp1, 'blue')
+    //renderPoint(markers, fistExt.p0, 'blue')
+
+
+
+    let diff = getDistAv(lastCom.p0, lastCom.p)
+    let isCose = diff < threshold;
+
+
+    if (penultimateCom && penultimateCom.type === 'C' && isCose && isClosingTo && fistExt) {
+
+        let dx1 = Math.abs(fistExt.cp1.x - M.x)
+        let dy1 = Math.abs(fistExt.cp1.y - M.y)
+
+        let horizontal = dy1 < dx1;
+        //console.log(dx1, dx2);
+        //console.log('isCose', isCose, diff, dimA);
+
+        let comEx = getCombinedByDominant(penultimateCom, lastCom, threshold, tolerance, false)
+        console.log('comEx', comEx);
+
+        if (comEx.length === 1) {
+            pathData[lastIdx - 1] = comEx[0];
+            pathData[lastIdx] = null;
+            pathData = pathData.filter(Boolean)
+        }
+
+
+    }
+
+
+    //console.log('pathData ex', pathData);
+
+    return pathData
+
+}

package/src/svgii/svg_cleanup.js

@@ -1,3 +1,6 @@
+
+
+
 export function removeEmptySVGEls(svg) {
   let els = svg.querySelectorAll('g, defs');
   els.forEach(el => {
@@ -22,7 +25,7 @@ export function cleanUpSVG(svgMarkup, {
     .querySelector("svg");
   
   
-  let allowed=['viewBox', 'xmlns', 'width', 'height', 'id', 'class'];
+  let allowed=['viewBox', 'xmlns', 'width', 'height', 'id', 'class', 'fill', 'stroke', 'stroke-width'];
   removeExcludedAttribues(svg, allowed)
   
   let removeEls = ['metadata', 'script']

package/testSVG.js

@@ -0,0 +1,39 @@
+// add suport for DOM manipulations
+import { DOMParser, parseHTML } from 'linkedom';
+//import { XMLSerializerPoly, DOMParserPoly } from 'svg-path-simplify/dom_polyfills.js';
+import { svgPathSimplify } from 'svg-path-simplify';
+
+
+
+
+let svgMarkup =
+    `<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px"
+	 height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
+<g id="garamond">
+	<path id="path1" d="M16.2 125.7 L16.2 125.7 Q12.1 125.7 8.4 123.8 Q4.6 122 2.3 119.1 Q0 116.2 0.2 113.1 L0.2 113.1 L0.4 112.6 Q2.2 111.2 5 109.3 Q7.8 107.4 11.4 105.1 Q15 102.8 19.1 100.4 L19.1 100.4 L19.2 99.5 Q16.8 98.1 15.5 94.7 Q14.1 91.3 14.1 86.7 L14.1 86.7 Q14.1 81.1 16 75.5 Q17.9 70 21.1 65.5 Q24.2 61 28.1 58.3 Q32 55.6 35.9 55.6 L35.9 55.6 L46.1 57.2 L47.2 54.7 L47.7 54.6 L50.8 56.1 L51.6 57 Q49.2 61.4 47.6 65.1 Q45.9 68.9 45 72 Q44 75.1 43.7 77.8 L43.7 77.8 Q43.4 80.3 43.2 83.7 Q43 87.1 42.8 90.6 Q42.6 94.2 42.5 97.1 Q42.3 100.1 42.1 101.6 L42.1 101.6 Q41.7 105.1 40 108.5 Q38.2 112 35.6 115.1 Q32.9 118.2 29.7 120.6 Q26.5 123 23 124.3 Q19.5 125.7 16.2 125.7 ZM19.5 119.9 L19.5 119.9 Q25.9 119.9 30.4 115.3 Q34.9 110.7 35.9 102.7 L35.9 102.7 L38.4 82 L37.6 81.8 Q34.5 87.5 32.3 91 Q30 94.6 28 96.8 Q25.9 99 23.5 100.8 L23.5 100.8 Q20.4 103.1 16.8 105.3 Q13.2 107.6 10.7 109.4 Q8.1 111.3 8.1 112.3 L8.1 112.3 Q8.1 114 9.9 115.8 Q11.6 117.5 14.3 118.7 Q16.9 119.9 19.5 119.9 ZM24.8 92.9 L24.8 92.9 Q26.3 92.9 29 89.4 Q31.6 86 35.2 79.5 Q38.7 73.1 42.9 64.1 L42.9 64.1 Q40.9 63.1 39.1 62.4 Q37.2 61.7 35.7 61.3 Q34.1 61 32.8 61 L32.8 61 Q29.8 61 27.1 64 Q24.4 67.1 22.7 71.9 Q21 76.7 21 82 L21 82 Q21 86.3 22.2 89.6 Q23.3 92.9 24.8 92.9 Z "/>
+</g>
+</svg>`
+
+
+/*
+*/
+let document = new DOMParser().parseFromString(svgMarkup, 'image/svg+xml');
+let svg = document.querySelector('svg');
+let path = svg.querySelector('path');
+let d = path.getAttribute('d')
+
+let markup = document.toString()
+markup = new XMLSerializer().serializeToString(svg)
+
+console.log(markup);
+
+/*
+// try to simplify
+let svgOpt = svgPathSimplify(svgMarkup);
+
+// simplified pathData
+console.log(svgOpt)
+*/