svg-path-simplify 0.4.1 → 0.4.3

package/dist/svg-path-simplify.esm.js

@@ -52,12 +52,12 @@ function detectInputType(input) {
         // nested array
         if (Array.isArray(input[0])) {
 
-            if(input[0].length===2){
+            if (input[0].length === 2) {
 
                 return 'polyArray'
             }
 
-            else if (Array.isArray(input[0][0]) && input[0][0].length === 2 ) {
+            else if (Array.isArray(input[0][0]) && input[0][0].length === 2) {
 
                 return 'polyComplexArray'
             }
@@ -68,7 +68,7 @@ function detectInputType(input) {
         }
 
         // is point array
-        else if (input[0].x!==undefined && input[0].y!==undefined) {
+        else if (input[0].x !== undefined && input[0].y !== undefined) {
 
             return 'polyObjectArray'
         }
@@ -86,12 +86,22 @@ function detectInputType(input) {
     if (typeof input === "string") {
         input = input.trim();
         let isSVG = input.includes('<svg') && input.includes('</svg');
+        let isSymbol = input.startsWith('<symbol') && input.includes('</symbol');
         let isPathData = input.startsWith('M') || input.startsWith('m');
         let isPolyString = !isNaN(input.substring(0, 1)) && !isNaN(input.substring(input.length - 1, input.length));
+        let isJson = isNumberJson(input);
 
         if (isSVG) {
             type = 'svgMarkup';
         }
+
+        else if (isJson) {
+            type = 'json';
+        }
+
+        else if (isSymbol) {
+            type = 'symbol';
+        }
         else if (isPathData) {
             type = 'pathDataString';
         }
@@ -114,6 +124,21 @@ function detectInputType(input) {
     return (constructor || type).toLowerCase();
 }
 
+function isNumberJson(str) {
+
+    str = str.trim();
+
+    let hasNumber = /\d/.test(str);
+    let hasInvalid = /[abcdfghijklmnopqrstuvwz]/gi.test(str);
+    if (!hasNumber || hasInvalid) return false
+
+    // is JSON like
+    let isJson = str.startsWith('[') && str.endsWith(']');
+
+    return isJson
+    
+}
+
 const {
     abs: abs$1, acos: acos$1, asin: asin$1, atan: atan$1, atan2: atan2$1, ceil: ceil$1, cos: cos$1, exp: exp$1, floor: floor$1,
     log: log$1, hypot, max: max$1, min: min$1, pow: pow$1, random: random$1, round: round$1, sin: sin$1, sqrt: sqrt$1, tan: tan$1, PI: PI$1
@@ -438,7 +463,36 @@ function pointAtT(pts, t = 0.5, getTangent = false, getCpts = false, returnArray
 /**
  * get vertices from path command final on-path points
  */
-function getPathDataVertices(pathData) {
+
+function getPathDataVertices(pathData=[], includeCpts = false, decimals = -1) {
+    let polyPoints = [];
+
+    pathData.forEach((com) => {
+        let { type, values } = com;
+
+        // get final on path point from last 2 values
+        if (values.length) {
+
+            // round
+            if (decimals > -1) values = values.map(val => +val.toFixed(decimals));
+
+            if (includeCpts) {
+
+                for (let i = 1; i < values.length; i += 2) {
+                    polyPoints.push({ x: values[i - 1], y: values[i] });
+                }
+
+            } else {
+                polyPoints.push({ x: values[values.length - 2], y: values[values.length - 1] });
+            }
+
+        }
+    });
+    return polyPoints;
+}
+
+/*
+export function getPathDataVertices(pathData) {
     let polyPoints = [];
     let p0 = { x: pathData[0].values[0], y: pathData[0].values[1] };
 
@@ -453,22 +507,30 @@ function getPathDataVertices(pathData) {
         }
     });
     return polyPoints;
-}
+};
+*/
 
 /**
  *  based on @cuixiping;
  *  https://stackoverflow.com/questions/9017100/calculate-center-of-svg-arc/12329083#12329083
  */
-function svgArcToCenterParam(x1, y1, rx, ry, xAxisRotation, largeArc, sweep, x2, y2) {
+
+function svgArcToCenterParam(x1, y1, rx, ry, xAxisRotation, largeArc, sweep, x2, y2, normalize = true
+) {
 
     // helper for angle calculation
-    const getAngle = (cx, cy, x, y) => {
-        return atan2(y - cy, x - cx);
+    const getAngle = (cx, cy, x, y, normalize = true) => {
+        let angle = Math.atan2(y - cy, x - cx);
+        if (normalize && angle < 0) angle += Math.PI * 2;
+        return angle
     };
 
     // make sure rx, ry are positive
-    rx = abs(rx);
-    ry = abs(ry);
+    rx = Math.abs(rx);
+    ry = Math.abs(ry);
+
+    // normalize xAxis rotation
+    xAxisRotation = rx === ry ? 0 : (xAxisRotation < 0 && normalize ? xAxisRotation + 360 : xAxisRotation);
 
     // create data object
     let arcData = {
@@ -492,53 +554,11 @@ function svgArcToCenterParam(x1, y1, rx, ry, xAxisRotation, largeArc, sweep, x2,
         throw Error("rx and ry can not be 0");
     }
 
-    let shortcut = true;
-
-    if (rx === ry && shortcut) {
-
-        // test semicircles
-        let diffX = Math.abs(x2 - x1);
-        let diffY = Math.abs(y2 - y1);
-        let r = diffX;
-
-        let xMin = Math.min(x1, x2),
-            yMin = Math.min(y1, y2),
-            PIHalf = Math.PI * 0.5;
-
-        // semi circles
-        if (diffX === 0 && diffY || diffY === 0 && diffX) {
-
-            r = diffX === 0 && diffY ? diffY / 2 : diffX / 2;
-            arcData.rx = r;
-            arcData.ry = r;
-
-            // verical
-            if (diffX === 0 && diffY) {
-                arcData.cx = x1;
-                arcData.cy = yMin + diffY / 2;
-                arcData.startAngle = y1 > y2 ? PIHalf : -PIHalf;
-                arcData.endAngle = y1 > y2 ? -PIHalf : PIHalf;
-                arcData.deltaAngle = sweep ? Math.PI : -Math.PI;
-
-            }
-            // horizontal
-            else if (diffY === 0 && diffX) {
-                arcData.cx = xMin + diffX / 2;
-                arcData.cy = y1;
-                arcData.startAngle = x1 > x2 ? Math.PI : 0;
-                arcData.endAngle = x1 > x2 ? -Math.PI : Math.PI;
-                arcData.deltaAngle = sweep ? Math.PI : -Math.PI;
-            }
-
-            return arcData;
-        }
-    }
-
     /**
      * if rx===ry x-axis rotation is ignored
      * otherwise convert degrees to radians
      */
-    let phi = rx === ry ? 0 : (xAxisRotation * PI) / 180;
+    let phi = rx === ry ? 0 : xAxisRotation * deg2rad;
     let cx, cy;
 
     let s_phi = !phi ? 0 : Math.sin(phi);
@@ -557,8 +577,9 @@ function svgArcToCenterParam(x1, y1, rx, ry, xAxisRotation, largeArc, sweep, x2,
     //   Step 3: Ensure radii are large enough
     let lambda = (x1_ * x1_) / (rx * rx) + (y1_ * y1_) / (ry * ry);
     if (lambda > 1) {
-        rx = rx * Math.sqrt(lambda);
-        ry = ry * Math.sqrt(lambda);
+        let lambdaRoot = Math.sqrt(lambda);
+        rx = rx * lambdaRoot;
+        ry = ry * lambdaRoot;
 
         // save real rx/ry
         arcData.rx = rx;
@@ -574,7 +595,7 @@ function svgArcToCenterParam(x1, y1, rx, ry, xAxisRotation, largeArc, sweep, x2,
         throw Error("start point can not be same as end point");
     }
     let coe = Math.sqrt(Math.abs((rxry * rxry - sum_of_sq) / sum_of_sq));
-    if (largeArc == sweep) {
+    if (largeArc === sweep) {
         coe = -coe;
     }
 
@@ -594,24 +615,33 @@ function svgArcToCenterParam(x1, y1, rx, ry, xAxisRotation, largeArc, sweep, x2,
      * calculate angles between center point and
      * commands starting and final on path point
      */
-    let startAngle = getAngle(cx, cy, x1, y1);
-    let endAngle = getAngle(cx, cy, x2, y2);
+    let startAngle = getAngle(cx, cy, x1, y1, normalize);
+    let endAngle = getAngle(cx, cy, x2, y2, normalize);
 
     // adjust end angle
-    if (!sweep && endAngle > startAngle) {
-
-        endAngle -= Math.PI * 2;
-    }
 
-    if (sweep && startAngle > endAngle) {
-
-        endAngle = endAngle <= 0 ? endAngle + Math.PI * 2 : endAngle;
+    // Adjust angles based on sweep direction
+    if (sweep) {
+        // Clockwise
+        if (endAngle < startAngle) {
+            endAngle += Math.PI * 2;
+        }
+    } else {
+        // Counterclockwise
+        if (endAngle > startAngle) {
+            endAngle -= Math.PI * 2;
+        }
     }
 
     let deltaAngle = endAngle - startAngle;
+
+    // The rest of your code remains the same
     arcData.startAngle = startAngle;
+    arcData.startAngle_deg = startAngle * rad2Deg;
     arcData.endAngle = endAngle;
+    arcData.endAngle_deg = endAngle * rad2Deg;
     arcData.deltaAngle = deltaAngle;
+    arcData.deltaAngle_deg = deltaAngle * rad2Deg;
 
     return arcData;
 }
@@ -1117,7 +1147,7 @@ function getDistance(p1, p2, isArray = false) {
     let dx = isArray ? p2[0] - p1[0] : (p2.x - p1.x);
     let dy = isArray ? p2[1] - p1[1] : (p2.y - p1.y);
 
-    return sqrt(dx * dx + dy * dy);
+    return Math.sqrt(dx * dx + dy * dy);
 }
 
 function getSquareDistance(p1, p2) {
@@ -1637,7 +1667,7 @@ function detectAccuracy(pathData) {
 
     let dim_min = dims.sort();
 
-    let sliceIdx = Math.ceil(dim_min.length / 8);
+    let sliceIdx = Math.ceil(dim_min.length / 6);
     dim_min = dim_min.slice(0, sliceIdx);
     let minVal = dim_min.reduce((a, b) => a + b, 0) / sliceIdx;
 
@@ -1650,6 +1680,7 @@ function detectAccuracy(pathData) {
 }
 
 function roundTo(num = 0, decimals = 3) {
+    if(decimals<=-1) return num;
     if (!decimals) return Math.round(num);
     let factor = 10 ** decimals;
     return Math.round(num * factor) / factor;
@@ -1660,19 +1691,20 @@ function roundTo(num = 0, decimals = 3) {
  * floating point accuracy 
  * based on numeric value
  */
-function autoRound(val, integerThresh = 10){
+function autoRound(val, integerThresh = 50){
   let decimals=8;  
-
   
-  if(val>integerThresh){
+  if(val>integerThresh*2){
     decimals=0;
   }
-  else if(val>5){
+  else if(val>integerThresh){
     decimals=1;
   }else {
-     decimals=Math.ceil(integerThresh/val).toString().length;
+     decimals=Math.ceil(500/val).toString().length;
+
   }
       
+
   let factor = 10 ** decimals;
   return Math.round(val * factor) / factor;
 }
@@ -1726,6 +1758,7 @@ const transHorizontal = ['scaleX', 'translateX', 'skewX'];
 const transVertical = ['scaleY', 'translateY', 'skewY'];
 
 const colorProps = ['fill', 'stroke', 'stop-color'];
+const geometryProps = ['d', 'points', 'cx', 'cy', 'x1', 'x2', 'y1', 'y2', 'width', 'height', 'r', 'rx', 'ry', 'x', 'y'];
 
 const geometryEls = [
     "path",
@@ -2067,7 +2100,14 @@ function svgElUnitsToPixel(el, {
 
     let attributes = [...el.attributes];
     let attNames = attributes.map(att => att.name);
-    let attValues = attributes.map(att => att.nodeValue);
+
+    // doesn't work in node!
+
+    
+    let attValues = [];
+    attNames.forEach(att=>{
+        attValues.push(el.getAttribute(att));
+    });
 
     let isSquare = width === height;
 
@@ -2612,20 +2652,24 @@ function getPolygonArea(points, absolute=false) {
 * d attribute string 
 */
 
-function pathDataToD(pathData, optimize = 0) {
-
-    optimize = parseFloat(optimize);
+function pathDataToD(pathData, mode = 0) {
 
+    mode = parseFloat(mode);
+    /*
+    0 = max minification
+    0.5 = safe
+    1 = verbose
+    2 = beautify
+    */
     let len = pathData.length;
-    let beautify = optimize > 1;
-    let minify = beautify || optimize ? false : true;
 
-    let d = '';
     let valsString = pathData[0].values.join(" ");
-    let separator_command = beautify ? `\n` : (minify ? '' : ' ');
-    let separator_type = !minify ? ' ' : '';
+    let separator_command = mode > 1 ? `\n` :
+        ((mode < 1) ? '' : ' ');
+    let separator_type = mode > 0.5 ? ' ' : '';
 
-    d = `${pathData[0].type}${separator_type}${valsString}${separator_command}`;
+    // 1st command
+    let d = `${pathData[0].type}${separator_type}${valsString}${separator_command}`;
 
     for (let i = 1; i < len; i++) {
         let com0 = pathData[i - 1];
@@ -2634,7 +2678,7 @@ function pathDataToD(pathData, optimize = 0) {
         valsString = '';
 
         // Minify Arc commands (A/a) – actually sucks!
-        if (minify && (type === 'A' || type === 'a')) {
+        if (!mode && (type === 'A' || type === 'a')) {
             values = [
                 values[0], values[1], values[2],
                 `${values[3]}${values[4]}${values[5]}`,
@@ -2643,14 +2687,14 @@ function pathDataToD(pathData, optimize = 0) {
         }
 
         // Omit type for repeated commands
-        type = (minify && com0.type === com.type && com.type.toLowerCase() !== 'm')
+        type = ((mode < 1) && com0.type === com.type && com.type.toLowerCase() !== 'm')
             ? " "
-            : (minify && com0.type === "M" && com.type === "L"
+            : ((mode < 1) && com0.type === "M" && com.type === "L"
                 ? " "
                 : com.type);
 
         // concatenate subsequent floating point values
-        if (minify) {
+        if (!mode) {
 
             let prevWasFloat = false;
 
@@ -2674,22 +2718,23 @@ function pathDataToD(pathData, optimize = 0) {
                 prevWasFloat = isSmallFloat;
             }
 
-            d += `${type}${separator_type}${valsString}${separator_command}`;
-
         }
         // regular non-minified output
         else {
-            d += `${type}${separator_type}${values.join(' ')}${separator_command}`;
+            valsString = values.join(' ');
         }
+
+        if(i===len-1) separator_command='';
+        d += `${type}${separator_type}${valsString}${separator_command}`;
     }
 
-    if (minify) {
+    if (mode < 1) {
         d = d
             .replace(/[A-Za-z]0(?=\.)/g, m => m[0])
             .replace(/ 0\./g, " .") // Space before small decimals
             .replace(/ -/g, "-")     // Remove space before negatives
             .replace(/-0\./g, "-.")  // Remove leading zero from negative decimals
-            .replace(/Z/g, "z");     // Convert uppercase 'Z' to lowercase
+            .replace(/Z/g, "z");    // Convert uppercase 'Z' to lowercase
     }
 
     return d;
@@ -3566,6 +3611,7 @@ const sanitizeArc = (val='', valueIndex=0) => {
 };
 
 function parsePathDataString(d, debug = true, limit=0) {
+    if(!d) return []
     d = d.trim();
 
     if(limit) console.log('!!!limit', limit);
@@ -3901,6 +3947,7 @@ function convertPathData(pathData, {
     toShorthands = true,
     toLonghands = false,
     toRelative = true,
+    toMixed = false,
     toAbsolute = false,
     decimals = 3,
     arcToCubic = false,
@@ -3911,11 +3958,14 @@ function convertPathData(pathData, {
     hasShorthands = true,
     hasQuadratics = true,
     hasArcs = true,
+    isPoly = false,
     optimizeArcs = true,
     testTypes = false
 
 } = {}) {
 
+    let pathDataAbs = [];
+
     // pathdata properties - test= true adds a manual test 
     if (testTypes) {
 
@@ -3929,6 +3979,7 @@ function convertPathData(pathData, {
 
     // some params exclude each other
     toRelative = toAbsolute ? false : toRelative;
+
     toShorthands = toLonghands ? false : toShorthands;
 
     if (toAbsolute) pathData = pathDataToAbsolute(pathData);
@@ -3943,12 +3994,38 @@ function convertPathData(pathData, {
 
     if (hasQuadratics && quadraticToCubic) pathData = pathDataQuadraticToCubic(pathData);
 
+    if(toMixed) toRelative = true;
+
     // pre round - before relative conversion to minimize distortions
     if (decimals > -1 && toRelative) pathData = roundPathData(pathData, decimals);
 
+    // clone absolute pathdata
+    if(toMixed){
+        pathDataAbs = JSON.parse(JSON.stringify(pathData));
+    }
+
     if (toRelative) pathData = pathDataToRelative(pathData);
     if (decimals > -1) pathData = roundPathData(pathData, decimals);
 
+    // choose most compact commands: relative or absolute
+    if(toMixed){
+        for(let i=0; i<pathData.length; i++){
+            let com = pathData[i];
+            let comA = pathDataAbs[i];
+            // compare Lengths
+            let comStr = [com.type, com.values.join(' ')].join('').replaceAll(' -', '-').replaceAll(' 0.', ' .');
+            let comStrA = [comA.type, comA.values.join(' ')].join('').replaceAll(' -', '-').replaceAll(' 0.', ' .');
+
+            let lenR = comStr.length;
+            let lenA = comStrA.length;
+
+            if(lenA<lenR){
+
+                pathData[i] = pathDataAbs[i];
+            }
+        }
+    }
+
     return pathData
 }
 
@@ -3959,6 +4036,9 @@ function convertPathData(pathData, {
  */
 
 function optimizeArcPathData(pathData = []) {
+
+    let remove =[];
+
     pathData.forEach((com, i) => {
         let { type, values } = com;
         if (type === 'A') {
@@ -3968,6 +4048,12 @@ function optimizeArcPathData(pathData = []) {
             let M = { x: x0, y: y0 };
             let p = { x, y };
 
+            if(rx===0 || ry===0){
+                pathData[i]= null;
+                remove.push(i);
+
+            }
+
             // rx and ry are large enough
             if (rx >= 1 && (x === x0 || y === y0)) {
                 let diff = Math.abs(rx - ry) / rx;
@@ -3990,6 +4076,8 @@ function optimizeArcPathData(pathData = []) {
             }
         }
     });
+
+    if(remove.length) pathData = pathData.filter(Boolean);
     return pathData;
 }
 
@@ -5615,153 +5703,20 @@ function qrDecomposeMatrix(matrix, precision = 4) {
     return transObj;
 }
 
-function pathElToShape(el, {
-    convert_rects = false,
-    convert_ellipses = false,
-    convert_poly = false,
-    convert_lines = false
-} = {}) {
-
-    let pathData = parsePathDataNormalized(el.getAttribute('d'));
-    let coms = Array.from(new Set(pathData.map(com => com.type))).join('');
-
-    let hasArcs = (/[a]/gi).test(coms);
-    let hasBeziers = (/[csqt]/gi).test(coms);
-    let hasLines = (/[l]/gi).test(coms);
-    let isPoly = !(/[acqts]/gi).test(coms);
-    let closed = (/[z]/gi).test(coms);
-    let shape = null;
-    let type = null;
-
-    let attributes = getElementAtts(el);
-    let attsNew = {};
-    let decimals = 7;
-
-    if (isPoly) {
-
-        // is line
-        if (pathData.length === 2 && convert_lines) {
-            type = 'line';
-            shape = document.createElementNS(svgNs, type);
-            let [x1, y1, x2, y2] = [...pathData[0].values, ...pathData[1].values].map(val => roundTo(val, decimals));
-            attsNew = { x1, y1, x2, y2 };
-        }
-        // polygon, polyline or rect
-        else {
-
-            let vertices = getPathDataVertices(pathData);
-            let bb = getPolyBBox(vertices);
-            let areaPoly = getPolygonArea(vertices, true);
-            let areaRect = bb.width * bb.height;
-            let areaDiff = Math.abs(1 - areaRect / areaPoly);
-
-            // is rect
-            if (convert_rects && areaDiff < 0.01) {
-                type = 'rect';
-                shape = document.createElementNS(svgNs, type);
-                let { x, y, width, height } = bb;
-                attsNew = { x, y, width, height };
-
-            }
-            // polyline or polygon
-            else if(convert_poly) {
-                type = closed ? 'polygon' : 'polyline';
-                shape = document.createElementNS(svgNs, type);
-                let points = vertices.map(pt => { return [pt.x, pt.y] }).flat().map(val => roundTo(val, decimals)).join(' ');
-                attsNew = { points };
-            }
-        }
-    }
-    // circles or ellipses
-    else if (!hasLines && convert_ellipses) {
-
-        // try to convert cubics to arcs
-        if (!hasArcs && hasBeziers) {
-            pathData = pathDataCubicsToArc(pathData, { areaThreshold: 2.5 });
-            hasArcs = pathData.filter(com => com.type === 'A').length;
-        }
-
-        if (hasArcs) {
-            let pathData2 = getPathDataVerbose(pathData, { addArcParams: true });
-            let arcComs = pathData2.filter(com => com.type === 'A');
-
-            let cxVals = new Set();
-            let cyVals = new Set();
-            let rxVals = new Set();
-            let ryVals = new Set();
-
-            if (arcComs.length > 1) {
-
-                pathData2.forEach(com => {
-                    if (com.type === 'A') {
-
-                        cxVals.add(roundTo(com.cx, decimals));
-                        cyVals.add(roundTo(com.cy, decimals));
-                        rxVals.add(roundTo(com.rx, decimals));
-                        ryVals.add(roundTo(com.ry, decimals));
-                    }
-                });
-            }
-
-            cxVals = Array.from(cxVals);
-            cyVals = Array.from(cyVals);
-            rxVals = Array.from(rxVals);
-            ryVals = Array.from(ryVals);
-
-            if(cxVals.length===1 && cyVals.length===1 && rxVals.length===1 && ryVals.length===1){
-                let [rx, ry, cx, cy] = [rxVals[0], ryVals[0], cxVals[0], cyVals[0]];
-                type = rx===ry ? 'circle' : 'ellipse';
-                shape = document.createElementNS(svgNs, type);
-                attsNew = type==='circle' ? { r:rx, cx, cy } : {rx, ry, cx, cy};
-            }
-        }
-    }
-
-    // if el could be replaced
-    if (shape) {
-        let ignore = ['id', 'class'];
-
-        // set  shape attributes
-        for (let att in attsNew) {
-            shape.setAttribute(att, attsNew[att]);
-        }
-
-        // copy old attributes
-        for (let att in attributes) {
-
-            if (attLookup.atts[att].includes(type) || ignore.includes(att) || att.startsWith('data-')) {
-                shape.setAttribute(att, attributes[att]);
-            }
-        }
-
-        // replace
-        el = shape;
-    }
-
-    return el;
-
-}
-
+/**
+ * Convert shapes to paths
+ * converts also transforms
+ */
 function shapeElToPath(el, { width = 0,
     height = 0,
-    convert_rects = false,
-    convert_ellipses = false,
-    convert_poly = false,
-    convert_lines = false,
-
-    matrix=null
+    convertShapes = [],
+    matrix = null
 
 } = {}) {
 
     let nodeName = el.nodeName.toLowerCase();
 
-    if (
-        nodeName === 'path' && !matrix ||
-        nodeName === 'rect' && !convert_rects ||
-        (nodeName === 'circle' || nodeName === 'ellipse') && !convert_ellipses ||
-        (nodeName === 'polygon' || nodeName === 'polyline') && !convert_poly ||
-        (nodeName === 'line') && !convert_lines
-    ) return el;
+    if (!convertShapes.includes(nodeName)) return el;
 
     let pathData = getPathDataFromEl(el, { width, height });
 
@@ -5769,8 +5724,9 @@ function shapeElToPath(el, { width = 0,
     let exclude = ['d', 'x', 'y', 'x1', 'y1', 'x2', 'y2', 'cx', 'cy', 'dx', 'dy', 'r', 'rx', 'ry', 'width', 'height', 'points'];
 
     // transform pathData
-    if(matrix && Object.values(matrix).join('')!=='100100'){
+    if (matrix && Object.values(matrix).join('') !== '100100') {
         pathData = transformPathData(pathData, matrix);
+
         exclude.push('transform', 'transform-origin');
     }
 
@@ -5791,13 +5747,6 @@ function shapeElToPath(el, { width = 0,
     return pathN
 
 }
-/*
-export function copyAttributes(newEl, oldEl){
-
-    let attributes = [...oldEl.attributes].map(att => att.name);
-
-}
-*/
 
 // retrieve pathdata from svg geometry elements
 function getPathDataFromEl(el, {
@@ -5828,39 +5777,7 @@ function getPathDataFromEl(el, {
 
         case 'rect':
             ({ x=0, y=0, width=0, height=0, rx=0, ry=0 } = atts);
-
-            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 {
-
-                rx = rx ? rx : ry;
-                ry = ry ? ry : rx;
-
-                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: [] }
-                ];
-            }
+            pathData = rectToPathData(x, y, width, height, rx, ry);
             break;
 
         case 'circle':
@@ -5920,25 +5837,187 @@ function getPathDataFromEl(el, {
 
 }
 
-function pathDataRemoveColinear(pathData, {
-    tolerance = 1,
-
-    flatBezierToLinetos = true
-} = {}) {
+function rectToPathData(x = 0, y = 0, width = 0, height = 0, rx = 0, ry = 0) {
+    let pathData = [];
 
-    let pathDataN = [pathData[0]];
+    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 {
 
-    let M = { x: pathData[0].values[0], y: pathData[0].values[1] };
-    let p0 = M;
-    let p = M;
-    pathData[pathData.length - 1].type.toLowerCase() === 'z';
+        rx = rx ? rx : ry;
+        ry = ry ? ry : rx;
 
-    for (let c = 1, l = pathData.length; c < l; c++) {
+        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: [] }
+        ];
+    }
 
-        let com = pathData[c];
-        let comN = pathData[c + 1] || pathData[l - 1];
+    return pathData
+}
 
-        let p1 = comN.type.toLowerCase() === 'z' ? M : { x: comN.values[comN.values.length - 2], y: comN.values[comN.values.length - 1] };
+function pathElToShape(el, {
+    convertShapes = [],
+} = {}) {
+
+    let pathData = parsePathDataNormalized(el.getAttribute('d'));
+    let coms = Array.from(new Set(pathData.map(com => com.type))).join('');
+
+    let hasArcs = (/[a]/gi).test(coms);
+    let hasBeziers = (/[csqt]/gi).test(coms);
+    let hasLines = (/[l]/gi).test(coms);
+    let isPoly = !(/[acqts]/gi).test(coms);
+    let closed = (/[z]/gi).test(coms);
+    let shape = null;
+    let type = null;
+
+    let attributes = getElementAtts(el);
+    let attsNew = {};
+    let decimals = 7;
+
+    if (isPoly) {
+
+        // is line
+        if (pathData.length === 2 && convertShapes.includes('line')) {
+            type = 'line';
+            shape = document.createElementNS(svgNs, type);
+            let [x1, y1, x2, y2] = [...pathData[0].values, ...pathData[1].values].map(val => roundTo(val, decimals));
+            attsNew = { x1, y1, x2, y2 };
+        }
+        // polygon, polyline or rect
+        else {
+
+            let vertices = getPathDataVertices(pathData);
+            let bb = getPolyBBox(vertices);
+            let areaPoly = getPolygonArea(vertices, true);
+            let areaRect = bb.width * bb.height;
+            let areaDiff = Math.abs(1 - areaRect / areaPoly);
+
+            // is rect
+            if (convertShapes.includes('rect') && areaDiff < 0.01) {
+                type = 'rect';
+                shape = document.createElementNS(svgNs, type);
+                let { x, y, width, height } = bb;
+                attsNew = { x, y, width, height };
+
+            }
+            // polyline or polygon
+            else if (convertShapes.includes('polygon') || convertShapes.includes('polyline')) {
+                type = closed ? 'polygon' : 'polyline';
+                shape = document.createElementNS(svgNs, type);
+                let points = vertices.map(pt => { return [pt.x, pt.y] }).flat().map(val => roundTo(val, decimals)).join(' ');
+                attsNew = { points };
+            }
+        }
+    }
+    // circles or ellipses
+    else if (!hasLines && (convertShapes.includes('circle') || convertShapes.includes('ellipse'))) {
+
+        // try to convert cubics to arcs
+        if (!hasArcs && hasBeziers) {
+            pathData = pathDataCubicsToArc(pathData, { areaThreshold: 2.5 });
+            hasArcs = pathData.filter(com => com.type === 'A').length;
+        }
+
+        if (hasArcs) {
+            let pathData2 = getPathDataVerbose(pathData, { addArcParams: true });
+            let arcComs = pathData2.filter(com => com.type === 'A');
+
+            let cxVals = new Set();
+            let cyVals = new Set();
+            let rxVals = new Set();
+            let ryVals = new Set();
+
+            if (arcComs.length > 1) {
+
+                pathData2.forEach(com => {
+                    if (com.type === 'A') {
+
+                        cxVals.add(roundTo(com.cx, decimals));
+                        cyVals.add(roundTo(com.cy, decimals));
+                        rxVals.add(roundTo(com.rx, decimals));
+                        ryVals.add(roundTo(com.ry, decimals));
+                    }
+                });
+            }
+
+            cxVals = Array.from(cxVals);
+            cyVals = Array.from(cyVals);
+            rxVals = Array.from(rxVals);
+            ryVals = Array.from(ryVals);
+
+            if (cxVals.length === 1 && cyVals.length === 1 && rxVals.length === 1 && ryVals.length === 1) {
+                let [rx, ry, cx, cy] = [rxVals[0], ryVals[0], cxVals[0], cyVals[0]];
+                type = rx === ry ? 'circle' : 'ellipse';
+                shape = document.createElementNS(svgNs, type);
+                attsNew = type === 'circle' ? { r: rx, cx, cy } : { rx, ry, cx, cy };
+            }
+        }
+    }
+
+    // if el could be replaced
+    if (shape) {
+        let ignore = ['id', 'class'];
+
+        // set  shape attributes
+        for (let att in attsNew) {
+            shape.setAttribute(att, attsNew[att]);
+        }
+
+        // copy old attributes
+        for (let att in attributes) {
+
+            if (attLookup.atts[att].includes(type) || ignore.includes(att) || att.startsWith('data-')) {
+                shape.setAttribute(att, attributes[att]);
+            }
+        }
+        // replace
+        el = shape;
+    }
+
+    return el;
+
+}
+
+function pathDataRemoveColinear(pathData, {
+    tolerance = 1,
+
+    flatBezierToLinetos = true
+} = {}) {
+
+    let pathDataN = [pathData[0]];
+
+    let M = { x: pathData[0].values[0], y: pathData[0].values[1] };
+    let p0 = M;
+    let p = M;
+    pathData[pathData.length - 1].type.toLowerCase() === 'z';
+
+    for (let c = 1, l = pathData.length; c < l; c++) {
+
+        let com = pathData[c];
+        let comN = pathData[c + 1] || pathData[l - 1];
+
+        let p1 = comN.type.toLowerCase() === 'z' ? M : { x: comN.values[comN.values.length - 2], y: comN.values[comN.values.length - 1] };
 
         let { type, values } = com;
         let valsL = values.slice(-2);
@@ -6722,8 +6801,17 @@ function polyPtsToArray(pts) {
 // convert flat point value array to point object array
 function toPointArray(pts) {
     let ptArr = [];
-    for (let i = 1, l = pts.length; i < l; i += 2) {
-        ptArr.push({ x: pts[i - 1], y: pts[i] });
+
+    if(pts[0].length===2){
+        for (let i = 0, l = pts.length; i < l; i ++) {
+            let pt = pts[i];
+            ptArr.push({ x: pt[0], y:pt[1] });
+        }
+
+    }else {
+        for (let i = 1, l = pts.length; i < l; i += 2) {
+            ptArr.push({ x: pts[i - 1], y: pts[i] });
+        }
     }
     return ptArr;
 }
@@ -6779,29 +6867,63 @@ function parseStylesProperties(el, {
     autoRoundValues = false,
     minifyRgbColors = false,
     removeInvalid = true,
+    allowDataAtts=true,
+    allowAriaAtts=true,
     removeDefaults = true,
     cleanUpStrokes = true,
     normalizeTransforms = true,
+    removeIds = false,
+    removeClassNames = false,
+
+    include = [],
     exclude = [],
     width = 0,
     height = 0,
+    stylesheetProps = {}
 } = {}) {
 
     let nodeName = el.nodeName.toLowerCase();
     let attProps = getSvgPresentationAtts(el);
-    let cssProps = getSvgCssProps(el);
+    let inlineCssProps = getSvgCssProps(el);
+
+    // get CSS properties from SVG style element
+    let cssRuleSelectors = el.cssRules || [];
+    let cssProps = {};
+
+    cssRuleSelectors.forEach(selector => {
+        for (let prop in stylesheetProps[selector]) {
+            let val = stylesheetProps[selector][prop];
+
+            // check CSS vars
+            if (val.startsWith('var(')) {
+                let varName = val.replace(/[var\(|\)]/g, '').trim();
+
+                if (stylesheetProps[':root']) {
+                    val = `var(${varName}, ${stylesheetProps[':root'][varName]})`;
+                }
+            }
+            cssProps[prop] = val;
+        }
+    });
 
     /**
-     * merge props
-     * CSS has higher specificity
+     * merge props by specificity
+     * 1. attributes
+     * 2. CSS rules
+     * 3. inline CSS
      */
     let props = {
         ...attProps,
         ...cssProps,
+        ...inlineCssProps,
     };
 
+    // obsolete/not style relevant anymore
     delete props['style'];
-    exclude.push('style');
+    delete props['class'];
+    delete props['id'];
+
+    exclude.push('style', 'class', 'id');
 
     let remove = ['style'];
     let transformsStandalone = ['scale', 'translate', 'rotate'];
@@ -6812,9 +6934,10 @@ function parseStylesProperties(el, {
      */
 
     if (removeInvalid || removeDefaults || removeNameSpaced) {
-        let propsFilteredObj = filterSvgElProps(nodeName, props, { removeDefaults, removeNameSpaced, exclude, cleanUpStrokes, include: transformsStandalone, cleanUpStrokes: false });
+        let propsFilteredObj = filterSvgElProps(nodeName, props, {allowDataAtts, allowAriaAtts, removeIds, removeClassNames, removeDefaults, removeNameSpaced, exclude, cleanUpStrokes, include: [...transformsStandalone, ...include], cleanUpStrokes: false });
         props = propsFilteredObj.propsFiltered;
         remove.push(...propsFilteredObj.remove);
+
     }
 
     // sanitized prop array
@@ -6833,11 +6956,14 @@ function parseStylesProperties(el, {
 
         // minify rgb values
         if (minifyRgbColors && colorProps.includes(prop)) {
+
             let color = parseColor(valueStr);
+
             if (color.mode === 'rgba' || color.mode === 'rgb') {
                 let hex = rgba2Hex(color);
                 valueStr = hex;
             }
+
         }
 
         if (prop === 'transform') {
@@ -6877,7 +7003,6 @@ function parseStylesProperties(el, {
         else {
 
             item.values = parseValue(valueStr);
-
         }
 
         if (item.values.length) {
@@ -6952,6 +7077,7 @@ function parseStylesProperties(el, {
 
                             if (autoRoundValues && isNumeric) {
                                 valAbs = autoRound(valAbs);
+
                             }
 
                         }
@@ -7146,16 +7272,24 @@ function filterSvgElProps(elNodename = '', props = {}, {
     removeInvalid = true,
     removeDefaults = true,
     allowDataAtts = true,
+    allowMeta = false,
+    allowAriaAtts = false,
     cleanUpStrokes = true,
-    include = ['id', 'class'],
+
+    include = [],
+    removeIds = false,
+    removeClassNames = false,
     exclude = [],
 } = {}) {
     let propsFiltered = {};
     let remove = [];
 
+    if (!removeIds) include.push('id');
+    if (!removeClassNames) include.push('class');
+
     // allow defaults for nested
 
-    let noStrokeColor = cleanUpStrokes ? (props['stroke'] === undefined) : false;
+    let noStrokeColor = cleanUpStrokes ? (props['stroke'] === undefined || props['stroke'][0] === 'none') : false;
 
     for (let prop in props) {
         let values = props[prop];
@@ -7167,43 +7301,41 @@ function filterSvgElProps(elNodename = '', props = {}, {
             false;
 
         // remove null transforms
-        if(prop==='transform' && value==='matrix(1 0 0 1 0 0)') isValid = false;
+        if (prop === 'transform' && value === 'matrix(1 0 0 1 0 0)') isValid = false;
 
         // allow data attributes
-        let isDataAtt = allowDataAtts ? prop.startsWith('data-') : false;
+        let isDataAtt = prop.startsWith('data-') ? true : false;
+        let isMeta = prop === 'title';
+        let isAria = prop.startsWith('aria-');
+
+        if( (allowDataAtts && isDataAtt) || (allowAriaAtts && isAria) || (allowMeta && isMeta ) ) continue
 
         // filter out defaults
         let isDefault = removeDefaults ?
             (attLookup.defaults[prop] ? attLookup.defaults[prop] !== undefined && attLookup.defaults[prop].includes(value) : false) :
             false;
 
-        if (isDataAtt || include.includes(prop)) isValid = true;
-        if (isDefault) isValid = false;
-        if (exclude.length && exclude.includes(prop)) isValid = false;
-        if (noStrokeColor && strokeAtts.includes(prop)) isValid = false;
+        let isFutileStroke = noStrokeColor && strokeAtts.includes(prop);
+
+        if (isDefault || isDataAtt || isMeta || isAria || isFutileStroke) isValid = false;
+        if (include.includes(prop)) isValid = true;
 
         if (isValid) {
             propsFiltered[prop] = props[prop];
         }
         else {
+
             remove.push(prop);
         }
     }
 
-    /*
-    // set explicit stroke width when disabled by stroke color
-    if (propsFiltered['stroke'] && propsFiltered['stroke'][0] === 'none') {
-        propsFiltered['stroke-width'] = [1]
-        remove.push('stroke', 'stroke-width')
-        console.log('remove', remove);
-    }
-    */
-
     return { propsFiltered, remove }
 }
 
 function parseValue(valStr = '') {
-    let valArr = valStr.split(/,| /);
+
+    valStr = valStr.replace('!important', '');
+    let valArr = (valStr.includes("'") || valStr.includes('(') || valStr.includes(')')) ? [valStr] : valStr.split(/,| /).filter(Boolean);
 
     for (let i = 0; i < valArr.length; i++) {
 
@@ -7284,110 +7416,787 @@ function parseInlineCss(styleAtt = '') {
     return props
 }
 
-function removeEmptySVGEls(svg) {
-  let els = svg.querySelectorAll('g, defs');
-  els.forEach(el => {
-    if (!el.children.length) el.remove();
-  });
+function toCamelCase(str) {
+  return str
+    .split(/[-| ]/)
+    .map((e, i) => i
+      ? e.charAt(0).toUpperCase() + e.slice(1).toLowerCase()
+      : e.toLowerCase()
+    )
+    .join('')
 }
 
-function cleanUpSVG(svgMarkup, {
-  removeHidden = true,
+function toShortStr(str) {
+  if (isNumericValue(str)) return str
+  let strShort = str.split('-').map(str => { return str.replace(/a|e|i|o|u/g, '') }).join('-');
+  strShort = toCamelCase(strShort);
+  return strShort
+}
 
-  stylesToAttributes = true,
-  removePrologue = true,
-  removeIds = false,
-  removeClassNames = false,
-  removeDimensions = false,
-  fixHref = false,
-  legacyHref = false,
-  cleanupDefs = true,
-  cleanupClip = true,
-  addViewBox = false,
-  addDimensions = false,
-  minifyRgbColors = false,
+function stringifySVG(svg, {
+  omitNamespace = false,
+  removeComments = true,
+  format = 0,
+} = {}) {
 
-  normalizeTransforms = true,
-  autoRoundValues = true,
+  let markup = '';
 
-  unGroup = false,
+  if (format < 2) {
+    markup = new XMLSerializer().serializeToString(svg);
 
-  mergePaths = false,
-  removeOffCanvas = true,
-  cleanupSVGAtts = true,
-  removeNameSpaced = true,
-  attributesToGroup = true,
+    markup = minifySVGMarkup(markup, { removeComments });
+    
+  } else {
+    markup = serializeSVGPretty(svg);
+  }
 
-  shapeConvert = false,
-  convert_rects = false,
-  convert_ellipses = false,
-  convert_poly = false,
-  convert_lines = false,
+  if (omitNamespace) {
+    markup = markup.replaceAll('xmlns="http://www.w3.org/2000/svg"', '');
+  }
 
-  convertTransforms = false,
-  removeDefaults = true,
-  cleanUpStrokes = true,
-  decimals = -1,
-  excludedEls = [],
-} = {}) {
+  if (removeComments) {
+    markup = markup
+      .replace(/(<!--.*?-->)|(<!--[\S\s]+?-->)|(<!--[\S\s]*?$)/g, '');
+  }
 
-  // replace namespaced refs 
-  if (fixHref) svgMarkup = svgMarkup.replaceAll("xlink:href=", "href=");
+  /*
+  markup = markup
+    .replace(/\t/g, "")
+    .replace(/[\n\r|]/g, "\n")
+    .replace(/\n\s*\n/g, '\n')
+    .replace(/ +/g, ' ')
 
-  let svg = new DOMParser()
-    .parseFromString(svgMarkup, "text/html")
-    .querySelector("svg");
+    .replace(/> </g, '><')
+    .trim()
+    // sanitize linebreaks within pathdata
+    .replaceAll('&#10;', '\n');
+  */
 
-  let viewBox = getViewBox(svg);
-  let { x, y, width, height } = viewBox;
+  return markup
+}
 
-  // get svg styles
-  let propOptions = {
-    width: width,
-    height: height,
-    normalizeTransforms,
-    removeDefaults: false,
-    cleanUpStrokes: false,
-    autoRoundValues,
-    minifyRgbColors,
-  };
-  let stylePropsSVG = parseStylesProperties(svg, propOptions);
+function minifySVGMarkup(svg, {
+  removeComments = true,
+} = {}) {
 
-  // add svg font size for scaling relative
-  propOptions.fontSize = stylePropsSVG['font-size'] ? stylePropsSVG['font-size'][0] : 16;
+  if (removeComments) {
+    svg = svg.replace(/<!--[\s\S]*?-->/g, '');
+  }
 
-  /**
-   * get group styles
-   * especially transformations to
-   * be inherited by children
-   */
-  let groups = svg.querySelectorAll('g');
-  let groupProps = [];
+  // Remove whitespace between tags
+  svg = svg.replace(/>\s+</g, '><')
+    // Trim leading/trailing whitespace
+    .trim()
+    // Remove extra whitespace within tags (attributes)
+    .replace(/\s+([=])\s+/g, '$1')
+    .replace(/\s+(?=[^<]*>)/g, ' ')
+    // Collapse multiple spaces to single space
+    .replace(/\s{2,}/g, ' ')
+    // Remove spaces around = signs in attributes
+    .replace(/\s*=\s*/g, '=');
 
-  groups.forEach(g => {
-    let stylePropsG = parseStylesProperties(g, propOptions);
-    groupProps.push(stylePropsG);
-    let children = g.querySelectorAll(`${renderedEls.join(', ')}`);
+  return svg
+}
 
-    // store parent styles to child property
-    children.forEach(child => {
-      if (child.parentStyleProps === undefined) {
-        child.parentStyleProps = [];
+function serializeSVGPretty(xmlDoc, {
+  indentSize = 2 } = {}) {
+  if (typeof xmlDoc === 'string') {
+    xmlDoc = new DOMParser().parseFromString(xmlDoc, 'image/svg+xml').querySelector('svg');
+  }
+  return formatXMLNode(xmlDoc, 0, indentSize);
+}
+
+function formatXMLNode(node, level, indentSize) {
+  let indent = " ".repeat(level * indentSize);
+
+  if (node.nodeType === Node.TEXT_NODE) {
+    let text = node.textContent.trim();
+    return text ? text : "";
+  }
+
+  if (node.nodeType === Node.ELEMENT_NODE) {
+    let hasChildren = node.children.length > 0;
+    let hasTextContent = node.textContent.trim().length > 0 && node.children.length === 0;
+
+    let result = `${indent}<${node.nodeName}`;
+
+    // Add attributes
+    for (let i = 0; i < node.attributes.length; i++) {
+      let att = node.attributes[i];
+      result += ` ${att.name}="${att.value}"`;
+    }
+
+    if (!hasChildren && !hasTextContent) {
+      return result + " />\n";
+    }
+
+    result += ">";
+
+    if (hasChildren) {
+      result += "\n";
+      for (let child of node.children) {
+        result += formatXMLNode(child, level + 1, indentSize);
       }
-      child.parentStyleProps.push(stylePropsG);
+      result += `${indent}</${node.nodeName}>\n`;
+    } else if (hasTextContent) {
+      result += node.textContent.trim();
+      result += `</${node.nodeName}>\n`;
+    } else {
+      result += `</${node.nodeName}>\n`;
+    }
+
+    return result;
+  }
+
+  return "";
+}
+
+function removeHiddenSvgEls(svg) {
+  let els = svg.querySelectorAll('*');
+  els.forEach(el => {
+    el.nodeName.toLowerCase();
+    let style = el.getAttribute('style') || '';
+    let isHiddenByStyle = style ? style.trim().includes('display:none') : false;
+    let isHidden = (el.getAttribute('display') && el.getAttribute('display') === 'none') || isHiddenByStyle;
+    if (isHidden) el.remove();
+  });
+
+}
+
+function removeSvgEls(svg, {
+  removeElements = [],
+  removeNameSpaced = true,
+} = {}) {
+
+  // always remove scripts
+  removeElements.push('script');
+
+  let els = svg.querySelectorAll('*');
+  let allowMeta = !removeElements.includes('metadata');
+
+  els.forEach(el => {
+    let nodeName = el.nodeName;
+    let isMeta = allowMeta && el.closest('metadata');
+    if (
+      !isMeta &&
+      ((removeNameSpaced && nodeName.includes(':')) ||
+        removeElements.includes(nodeName))
+    ) {
+      el.remove();
+    }
+  });
+}
+
+/*export function removeSvgEls(svg, remove = []) {
+  // remove elements
+  if (remove.length) {
+    let selector = remove.join(', ').replaceAll(':', '\\:');
+    svg.querySelectorAll(selector).forEach(el => {
+      el.remove()
+    })
+  }
+}
+*/
+
+function removeSvgAtts(svg, remove = []) {
+  remove.forEach(att => {
+    svg.removeAttribute(att);
+  });
+}
+
+function removeSvgChildAtts(svg, remove = []) {
+  if (remove.length) {
+    let selector = remove.map(att => { return `[${att}]` }).join(', ')
+      // escape name spaced
+      .replaceAll(':', '\\:');
+
+    svg.querySelectorAll(selector).forEach(el => {
+      remove.forEach(att => {
+        el.removeAttribute(att);
+      });
     });
+  }
+}
+
+/**
+ * general clean up to remove bullshit like
+ * version or enable background
+ */
+
+function cleanupSVGAttributes(svg, {
+  removeIds = false,
+  removeClassNames = false,
+  removeDimensions = false,
+  stylesToAttributes = false,
+  allowMeta = false,
+  allowAriaAtts = false,
+  allowDataAtts = false,
+} = {}) {
+
+  let allowed = new Set(['viewBox', 'xmlns', 'width', 'height']);
+
+  if (!removeIds) allowed.add('id');
+  if (!removeClassNames) allowed.add('class');
+  if (removeDimensions) {
+    allowed.delete('width');
+    allowed.delete('height');
+  }
+
+  allowed = Array.from(allowed);
+  if (!stylesToAttributes) {
+    allowed.push('fill', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin', 'font-size', 'font-family', 'font-style', 'style');
+  }
+
+  removeExcludedAttribues(svg, { allowed, allowMeta, allowAriaAtts, allowDataAtts });
+}
+
+function removeExcludedAttribues(el, {
+  allowed = ['viewBox', 'xmlns', 'width', 'height', 'id', 'class'],
+  allowAriaAtts = true,
+  allowDataAtts = true,
+  allowMeta = false
+} = {}) {
+  let atts = [...el.attributes].map((att) => att.name);
+  atts.forEach((att) => {
+
+    let isMeta = allowMeta && (att === 'title');
+    let isAria = allowAriaAtts && att.startsWith('aria-');
+    let isData = allowDataAtts && att.startsWith('data-');
+
+    if (
+      !allowed.includes(att) &&
+      !isAria && !isData && !isMeta
+    ) {
+      el.removeAttribute(att);
+    }
+  });
+}
+
+function removeElAtts(el, exclude = [], include = []) {
+  let atts = [...el.attributes].map((att) => att.name);
+  atts.forEach((att) => {
+    if (exclude.includes(att) && !include.includes(att)) {
+      el.removeAttribute(att);
+    }
   });
+}
+
+/*
+
+function cleanSvgPrologue(svgString) {
+  return (
+    svgString
+      // Remove XML prologues like <?xml ... ?>
+      .replace(/<\?xml[\s\S]*?\?>/gi, "")
+      // Remove DOCTYPE declarations
+      .replace(/<!DOCTYPE[\s\S]*?>/gi, "")
+      // Remove comments <!-- ... -->
+      .replace(/<!--[\s\S]*?-->/g, "")
+      // Trim extra whitespace
+      .trim()
+  );
+}
+*/
+
+function convertPathLengthAtt(el, {
+    styleProps = {}
+}={}) {
+
+    let pathLength = el.getAttribute('pathLength') ? +el.getAttribute('pathLength') : 0;
+
+    if (pathLength && (styleProps['stroke-dasharray'] || styleProps['stroke-dashoffset'])) {
+        let elLength = getElementLength(el, {
+            pathLength,
+            props: styleProps
+        });
+
+        let scale = elLength / pathLength;
+
+        styleProps = scaleProps(styleProps, { props: ['stroke-dasharray', 'stroke-dashoffset'], scale });
+        [styleProps['stroke-dasharray'], styleProps['stroke-dashoffset']];
 
-  if (cleanupSVGAtts) {
+        // tag for removal
+        delete styleProps['pathLength'];
+        styleProps.remove.push('pathLength');
+        el.removeAttribute('pathLength');
 
-    let allowed = ['viewBox', 'xmlns', 'width', 'height', 'id', 'class'];
-    if (!stylesToAttributes) {
-      allowed.push('fill', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin', 'font-size', 'font-family', 'font-style', 'style');
     }
 
-    removeExcludedAttribues(svg, allowed);
+    return styleProps;
+
+}
+
+function ungroupElements(groups) {
+  groups.forEach((g, i) => {
+    let children = [...g.children];
+
+    children.forEach(child => {
+      g.parentNode.insertBefore(child, g);
+    });
+    g.remove();
+  });
+}
+
+/**
+ * Parse nested CSS text into a flat object structure
+ * Supports arbitrary nesting depth and & parent selector reference
+ * Respects !important modifiers and handles data URLs
+ */
+function parseSvgCss(css, {
+  parent=null,
+  removeUnused=true,
+  flatten = true
+}={}) {
+  
+  let type = typeof css;
+  if(type==='string') removeUnused = false;
+  
+  // get style element text content
+  if(type!=='string' ){
+    if(css.nodeName==='style'){
+      css = css.innerHTML;
+    }
+    else if(css.nodeName==='svg'){
+      let styleEl = css.querySelector('style');
+      if(!styleEl) return {}
+      parent = css;
+      css = styleEl.innerHTML;
+    }
+
+    else {
+     console.warn('invalid CSS input');
+     return {}
+    }
+  }
+  
+  css = css.trim();
+  if (!css) return {};
+
+  // Remove comments
+  css = css.replace(/\/\*[\s\S]*?\*\//g, "");
+
+  function parseBlock(text, parentSelector = "") {
+    let i = 0;
+    let rules = {};
+    let l = text.length;
+
+    while (i < l) {
+      // Skip whitespace
+      while (/\s/.test(text[i])) i++;
+      if (i >= l) break;
+
+      // Peek ahead to check if this is a selector or a declaration
+      let peekIdx = i;
+      let isSelector = false;
+
+      // Look for '{' before ';' to determine if it's a selector
+      while (peekIdx < l && text[peekIdx] !== ";") {
+        if (text[peekIdx] === "{") {
+          isSelector = true;
+          break;
+        }
+        peekIdx++;
+      }
+
+      if (!isSelector) {
+        // It's a declaration, skip it (will be handled below)
+        i = peekIdx + 1;
+        continue;
+      }
+
+      // Read selector (up to '{')
+      let selector = "";
+      while (i < l && text[i] !== "{") {
+        selector += text[i];
+        i++;
+      }
+
+      selector = selector.trim();
+      if (!selector || text[i] !== "{") continue;
+
+      i++; // skip '{'
+
+      // Find matching closing brace
+      let blockContent = "";
+      let depth = 1;
+
+      while (i < l && depth > 0) {
+        if (text[i] === "{") depth++;
+        else if (text[i] === "}") depth--;
+
+        if (depth > 0) blockContent += text[i];
+        i++;
+      }
+
+      // Compose full selector
+      let fullSelector = selector;
+      if (parentSelector) {
+        if (selector.includes("&")) {
+          fullSelector = selector.replace(/&/g, parentSelector);
+        } else {
+          fullSelector = parentSelector + " " + selector;
+        }
+      }
+      fullSelector = fullSelector.replace(/\s+/g, " ").trim();
+
+      // Separate declarations from nested rules
+      let { declarations, hasNested } = extractDeclarations(blockContent);
+
+      // Add declarations for this selector (respect !important)
+      if (Object.keys(declarations).length) {
+        if (!rules[fullSelector]) {
+          rules[fullSelector] = declarations;
+        } else {
+          // Merge declarations, preserving !important
+          for (let prop in declarations) {
+            let existingValue = rules[fullSelector][prop];
+            let newValue = declarations[prop];
+
+            // Only override if existing doesn't have !important, or new has !important
+            let existingHasImportant =
+              existingValue && existingValue.includes("!important");
+            let newHasImportant = newValue.includes("!important");
+
+            if (!existingHasImportant || newHasImportant) {
+              rules[fullSelector][prop] = newValue;
+            }
+          }
+        }
+      }
+
+      // If block contains nested rules, parse them recursively
+      if (hasNested) {
+        parseBlock(blockContent, fullSelector);
+      }
+    }
+    
+    return rules
+    
+  }
+
+  function extractDeclarations(content) {
+    let declarations = {};
+    let i = 0;
+    let l= content.length;
+    let hasNested = false;
+
+    while (i < l) {
+      // Skip whitespace
+      while (i < l && /\s/.test(content[i])) i++;
+      if (i >= l) break;
+
+      // Check if next thing is a nested selector or a declaration
+      let checkIdx = i;
+      let isNested = false;
+
+      // Scan until we hit ':' or '{' or ';'
+      while (checkIdx < l) {
+        if (content[checkIdx] === "{") {
+          isNested = true;
+          break;
+        }
+        if (content[checkIdx] === ":") {
+          // It's a declaration
+          break;
+        }
+        if (content[checkIdx] === ";") {
+          // Empty or malformed
+          break;
+        }
+        checkIdx++;
+      }
+
+      if (isNested) {
+        // Skip nested rule (will be handled by recursive call)
+        hasNested = true;
+        // Skip to closing brace of this nested rule
+        let depth = 0;
+        while (i < l) {
+          if (content[i] === "{") depth++;
+          if (content[i] === "}") depth--;
+          i++;
+          if (depth === 0) break;
+        }
+      } else {
+        // It's a declaration, read until ';' (but respect url() and quotes)
+        let decl = "";
+        let inUrl = false;
+        let inQuotes = false;
+        let quoteChar = "";
+
+        while (i < l) {
+          let char = content[i];
+          let nextChar = content[i + 1];
+
+          // Track if we're inside url()
+          if (
+            char === "u" &&
+            nextChar === "r" &&
+            content.slice(i, i + 4) === "url("
+          ) {
+            inUrl = true;
+          }
+
+          // Track quotes
+          if (
+            (char === '"' || char === "'") &&
+            (i === 0 || content[i - 1] !== "\\")
+          ) {
+            if (!inQuotes) {
+              inQuotes = true;
+              quoteChar = char;
+            } else if (char === quoteChar) {
+              inQuotes = false;
+              quoteChar = "";
+            }
+          }
+
+          // Check for end of url()
+          if (inUrl && char === ")" && !inQuotes) {
+            inUrl = false;
+          }
+
+          // Only break on semicolon if we're not inside url() or quotes
+          if (char === ";" && !inUrl && !inQuotes) {
+            i++; // skip ';'
+            break;
+          }
+
+          decl += char;
+          i++;
+        }
+
+        decl = decl.trim();
+        if (decl) {
+          let colonIdx = decl.indexOf(":");
+          if (colonIdx > -1) {
+            let prop = decl.substring(0, colonIdx).trim();
+            let value = decl.substring(colonIdx + 1).trim();
+            if (prop && value) {
+
+              declarations[prop] = value;
+            }
+          }
+        }
+      }
+    }
+
+    return { declarations, hasNested };
+  }
+
+  let rules = parseBlock(css);
+  if(parent && removeUnused) rules = removeUnusedSelectors(parent, rules);
+  if(flatten) rules = flattenCssProps(rules);
+
+  // emulate specificity: prioritize ids and important
+  let rulesID = {};
+  let rulesImportant = {};
+  for(let rule in rules){
+    if(rule.startsWith('#')){
+      rulesID[rule] = rules[rule];
+      delete rules[rule];
+    }
+
+    for(let prop in rules[rule]){
+      let val = rules[rule][prop];
+      if(val.includes('!important')){
+        if(!rulesImportant[rule]) rulesImportant[rule]={};
+        rulesImportant[rule][prop] = val;
+      }
+    }
+  }
+
+  rules= {
+    ...rules,
+    ...rulesID,
+    ...rulesImportant
+  };
+
+  return rules;
+}
+
+function flattenCssProps(rules) {
+  for (let selector in rules) {
+    let targets = selector.split(/,/).map((sel) => sel.trim());
+    rules[selector];
+    if (targets.length > 1) {
+      targets.forEach((target) => {
+        let props = rules[target];
+        for (let prop in props) {
+          let value = props[prop];
+          if (!value.includes("!important")) {
+            rules[target][prop] = value;
+          }
+        }
+      });
+      delete rules[selector];
+    }
+  }
+  return rules;
+}
+
+function removeUnusedSelectors(parent=null, props={}){
+  let selectors = Object.keys(props);  
+  selectors.forEach(selector=>{
+    let el = parent.querySelector(selector);
+    // remove
+    if(!el && selector!==':root') {
+
+      delete props[selector];
+    }
+  });
+  return props
+}
+
+function setNormalizedTransformsToEl(el, {
+  styleProps = {},
+} = {}) {
+  let { remove, matrix, transComponents } = styleProps;
+  let name = el.nodeName.toLowerCase();
+
+  if(!matrix) return styleProps;
+
+  let { rotate, scaleX, scaleY, skewX, translateX, translateY } = transComponents;
+
+  // scale attributes instead of transform
+  let hasRot = rotate !== 0 || skewX !== 0;
+  let unProportional = scaleX !== scaleY;
+  let scalableByAtt = ['circle', 'ellipse', 'rect'];
+
+  let needsTrans = (hasRot) || unProportional;
+  needsTrans = true;
+
+  if (!needsTrans && scalableByAtt.includes(name)) {
+
+    if (name === 'circle' || name === 'ellipse') {
+      styleProps.cx[0] = [styleProps.cx[0] * scaleX + translateX];
+      styleProps.cy[0] = [styleProps.cy[0] * scaleX + translateY];
+
+      if (styleProps.r) styleProps.r[0] = [styleProps.r[0] * scaleX];
+      if (styleProps.rx) styleProps.rx[0] = [styleProps.rx[0] * scaleX];
+      if (styleProps.ry) styleProps.ry[0] = [styleProps.ry[0] * scaleX];
+
+    }
+    else if (name === 'rect') {
+      let x = styleProps.x ? styleProps.x[0] + translateX : translateX;
+      let y = styleProps.y ? styleProps.y[0] + translateY : translateY;
+
+      let rx = styleProps.rx ? styleProps.rx[0] * scaleX : 0;
+      let ry = styleProps.ry ? styleProps.ry[0] * scaleY : 0;
+
+      styleProps.x = [x];
+      styleProps.y = [y];
+
+      styleProps.rx = [rx];
+      styleProps.ry = [ry];
+
+      styleProps.width = [styleProps.width[0] * scaleX];
+      styleProps.height = [styleProps.height[0] * scaleX];
+    }
+
+    // remove now obsolete transform properties
+    delete styleProps.matrix;
+    delete styleProps.transformArr;
+    delete styleProps.transComponents;
+
+    // mark transform attribute for removal
+    styleProps.remove.push('transform');
+
+    // scale props like stroke width or dash-array
+    styleProps = scaleProps$1(styleProps, { props: ['stroke-width', 'stroke-dasharray'], scale: scaleX });
+
+  } else {
+    el.setAttribute('transform', transComponents.matrixAtt);
+
   }
 
+  return styleProps
+
+}
+
+function scaleProps$1(styleProps = {}, { props = [], scale = 1 } = {}, round = true) {
+  if (scale === 1 || !props.length) return props;
+
+  for (let i = 0; i < props.length; i++) {
+    let prop = props[i];
+
+    if (styleProps[prop] !== undefined) {
+      styleProps[prop] = styleProps[prop].map(val => round ? roundTo(val * scale, 2) : val * scale);
+    }
+  }
+  return styleProps
+}
+
+function cleanUpSVG(svgMarkup, {
+  removeHidden = true,
+
+  stylesToAttributes = true,
+  attributesToGroup = false,
+
+  removePrologue = true,
+  removeIds = false,
+  removeClassNames = false,
+  removeDimensions = false,
+  fixHref = false,
+  legacyHref = false,
+  cleanupDefs = true,
+  cleanupClip = true,
+  addViewBox = false,
+  addDimensions = false,
+  minifyRgbColors = false,
+
+  normalizeTransforms = true,
+  autoRoundValues = true,
+
+  unGroup = false,
+
+  mergePaths = false,
+  removeOffCanvas = true,
+
+  cleanupSVGAtts = true,
+  removeNameSpaced = true,
+  removeNameSpacedAtts = true,
+  convertPathLength = false,
+
+  // meta
+  allowMeta = false,
+  allowDataAtts = true,
+  allowAriaAtts = true,
+
+  shapeConvert = false,
+  convertShapes = [],
+
+  // remove elements
+  removeElements = [],
+
+  // remove attributes
+  removeSVGAttributes = [],
+  removeElAttributes = [],
+
+  convertTransforms = false,
+  removeDefaults = true,
+  cleanUpStrokes = true,
+  decimals = -1,
+  excludedEls = [],
+} = {}) {
+
+  // resolve dependencies
+  if (unGroup || convertTransforms || minifyRgbColors || attributesToGroup) 
+  stylesToAttributes = true;
+
+  if(stylesToAttributes) cleanUpStrokes = true;
+
+  // replace namespaced refs 
+  if (fixHref) svgMarkup = svgMarkup.replaceAll("xlink:href=", "href=");
+
+  let svg = new DOMParser()
+    .parseFromString(svgMarkup, "text/html")
+    .querySelector("svg");
+
+  let viewBox = getViewBox(svg);
+  let { x, y, width, height } = viewBox;
+  let remove = [];
+
   // add viewBox
   if (addViewBox) addSvgViewBox(svg, { x, y, width, height });
   if (addDimensions) {
@@ -7401,42 +8210,120 @@ function cleanUpSVG(svgMarkup, {
   // remove off canvas
   if (removeOffCanvas) removeOffCanvasEls(svg, { x, y, width, height });
 
-  // always remove scripts
-  let removeEls = ['metadata', 'script', ...excludedEls];
+  /**
+   * collect svg styles
+   * and properties
+   */
+  let propOptions = {
+    width,
+    height,
+    normalizeTransforms,
+    removeDefaults: false,
+    cleanUpStrokes: false,
+
+    allowMeta,
+    allowDataAtts,
+    allowAriaAtts,
+    autoRoundValues,
+    removeIds,
+    removeClassNames,
+    minifyRgbColors,
+    stylesheetProps: {},
+    exclude:[]
+  };
+
+  // root svg inline style properties
+  let stylePropsSVG = parseStylesProperties(svg, propOptions);
+
+  let styleEl = svg.querySelector('style');
+  let cssStylePropsSVG = {};
+
+  if (styleEl) {
+    cssStylePropsSVG = parseSvgCss(styleEl, { parent: svg });
+
+    for (let selector in cssStylePropsSVG) {
+      let els = svg.querySelectorAll(`${selector}`);
+      els.forEach(el => {
+        if (!el['cssRules']) el['cssRules'] = [];
+        el['cssRules'].push(selector);
+
+        // remove class names only used for styling
+        if (stylesToAttributes) {
+          let className = selector.substring(1);
+          el.classList.remove(className);
+        }
+      });
+    }
+
+    // remove style element from element
+    if (stylesToAttributes) {
+      styleEl.remove();
+    }
+  }
+  // remove style element from root SVG
+  if (stylesToAttributes) svg.removeAttribute('style');
 
-  removeSVGEls(svg, { removeEls, removeNameSpaced });
+  // add stylesheet props
+  propOptions.stylesheetProps = cssStylePropsSVG;
 
-  // an array of all elements' properties
+  // add svg font size for scaling relative
+  propOptions.fontSize = stylePropsSVG['font-size'] ? stylePropsSVG['font-size'][0] : 16;
+
+  /**
+   * get group styles
+   * especially transformations to
+   * be inherited by children
+   */
+  let groups = svg.querySelectorAll('g');
+
+  groups.forEach(g => {
+
+    let stylePropsG = parseStylesProperties(g, propOptions);
+    let children = g.querySelectorAll(`${renderedEls.join(', ')}`);
+
+    // store parent styles to child property
+    children.forEach(child => {
+      if (child.parentStyleProps === undefined) {
+        child.parentStyleProps = [];
+      }
+      child.parentStyleProps.push(stylePropsG);
+    });
+  });
+
+  // collect all elements' properties
   let svgElProps = [];
   let els = svg.querySelectorAll(`${renderedEls.join(', ')}`);
 
+  /**
+   * loop all geometry elements
+   */
   for (let i = 0; i < els.length; i++) {
     let el = els[i];
 
     let name = el.nodeName.toLowerCase();
 
-    // 1. remove hidden elements
-    let style = el.getAttribute('style') || '';
-    let isHiddenByStyle = style ? style.trim().includes('display:none') : false;
-    let isHidden = (el.getAttribute('display') && el.getAttribute('display') === 'none') || isHiddenByStyle;
-    if (name.includes(':') || removeEls.includes(name) || (removeHidden && isHidden)) {
-      el.remove();
-      continue;
-    }
-
     /**
-     * get all style properties
+     * get all element style properties
      * convert relative or physical units
      * to user units
      */
     let styleProps = parseStylesProperties(el, propOptions);
+    let stylePropsFiltered = {};
+
+    // convert pathLength before transforming
+    if (convertPathLength) {
+      styleProps = convertPathLengthAtt(el, { styleProps });
+      remove = [...new Set([...remove, ...styleProps.remove])];
+    }
 
     // get parent styles
     let { parentStyleProps = [] } = el;
     let inheritedProps = {};
     let transFormInherited = [];
 
-    /** inherit transforms 
+    /** 
+     * consolidate all properties:
+     * merge with inherited transforms 
      * and styles from group 
      */
     parentStyleProps.forEach(props => {
@@ -7451,9 +8338,14 @@ function cleanUpSVG(svgMarkup, {
       };
     });
 
+    // merge all transforms
     transFormInherited = [...transFormInherited, ...styleProps.transformArr];
     styleProps.transformArr = transFormInherited;
 
+    // don't inherit class from SVG
+    if (stylePropsSVG['class']) delete stylePropsSVG['class'];
+    if (stylePropsSVG['id']) delete stylePropsSVG['id'];
+
     // merge with svg props
     styleProps = {
       ...stylePropsSVG,
@@ -7464,195 +8356,378 @@ function cleanUpSVG(svgMarkup, {
     // add combined transforms
     addTransFormProps(styleProps, transFormInherited);
 
-    let { remove, matrix, transComponents } = styleProps;
+    remove = [...new Set([...remove, ...styleProps.remove])];
+
+    /**
+     * remove els and attributes
+     */
+
+    // remove meta
+    if (!allowMeta) removeElements.push('meta', 'metadata', 'desc', 'title');
+
+    if (removeClassNames) {
+      removeSVGAttributes.push('class');
+      removeElAttributes.push('class');
+    }
+
+    if (removeIds) {
+      removeSVGAttributes.push('id');
+      removeElAttributes.push('id');
+    }
+
+    // remove hidden elements
+    removeHiddenSvgEls(svg);
+
+    // remove SVG elements
+    removeSvgEls(svg, { removeElements, removeNameSpaced });
+
+    // remove SVG attributes
+    removeSvgAtts(svg, removeSVGAttributes);
+
+    // remove SVG child element attributes
+    removeSvgChildAtts(svg, removeElAttributes);
+
+    // general cleanup
+    if (cleanupSVGAtts) cleanupSVGAttributes(svg, { removeIds, removeClassNames, removeDimensions, stylesToAttributes, allowMeta, allowAriaAtts, allowDataAtts });
+
+    if (stylesToAttributes) {
+
+      /**
+       * normalize transforms
+       */
+      if (normalizeTransforms) {
+        styleProps = setNormalizedTransformsToEl(el, { styleProps });
+
+        remove = [...new Set([...remove, ...styleProps.remove])];
+
+      }
+
+      /**
+       * apply consolidated 
+       * element attributes
+       * remove non-supported element props
+       */
+      stylePropsFiltered = filterSvgElProps(name, styleProps,
+        { removeDefaults: true, cleanUpStrokes, allowMeta, allowAriaAtts, allowDataAtts, removeIds });
+
+      remove = [...new Set([...remove, ...stylePropsFiltered.remove])];
+
+      for (let prop in stylePropsFiltered.propsFiltered) {
+        let values = styleProps[prop];
+        let val = values.length ? values.join(' ') : values[0];
+        el.setAttribute(prop, val);
+      }
+
+      /**
+       * remove obsolete 
+       * attributes
+       */
+
+      for (let i = 0; i < remove.length; i++) {
+        let att = remove[i];
+
+        el.removeAttribute(att);
+      }
+
+    } // endof style processing
+
+    /**
+     * element conversions:
+     * shapes to paths or 
+     * paths to shapes
+     */
+
+    // force shape conversion when transform conversion is enabled
+    if (convertTransforms) {
+      shapeConvert = 'toPaths';
+      convertShapes = ['path', 'rect', 'ellipse', 'circle', 'line', 'polygon', 'polyline'];
+    }
+
+    // convert shapes to paths
+    if (shapeConvert === 'toPaths') {
+
+      let { matrix = null, transComponents = null } = styleProps;
+
+      // scale props like stroke width or dash-array before conversion
+      if (matrix && transComponents) {
+        ['stroke-width', 'stroke-dasharray'].forEach(att => {
+          let attVal = el.getAttribute(att);
+          let vals = attVal ? attVal.split(' ').filter(Boolean).map(Number).map(val => val * transComponents.scaleX) : [];
+          if (vals.length) el.setAttribute(att, vals.join(' '));
+        });
+      }
+
+      // convert paths only if a matrix transform is required
+      if (matrix ? geometryEls.includes(name) : shapeEls.includes(name)) {
+
+        let path = shapeElToPath(el, { width, height, convertShapes, matrix });
+        el.replaceWith(path);
+        name = 'path';
+        el = path; // required for node
+
+      }
+
+    }
+
+    /**
+     * Reverse conversion:  
+     * paths to shapes 
+     */
+    else if (shapeConvert === 'toShapes') {
+      let paths = svg.querySelectorAll('path');
+      paths.forEach(path => {
+        let shape = pathElToShape(path, { convertShapes });
+        path.replaceWith(shape);
+        path = shape;
+
+      });
+    }
+
+    /**
+     * combine styles
+     * store in node property
+     */
+    if (mergePaths || attributesToGroup) {
+
+      let options = { allowMeta, allowAriaAtts, removeIds, removeClassNames, allowDataAtts };
+
+      /**
+       * exclude properties for 
+       * adjacent path merging 
+       * e.g ignore classnames or ids
+       */
+      if (mergePaths) {
+        options.removeIds = true;
+        options.removeClassNames = true;
+        options.allowAriaAtts = false;
+        options.allowMeta = false;
+      }
+
+      stylePropsFiltered = filterSvgElProps(name, styleProps, options).propsFiltered;
+
+      for (let prop in stylePropsFiltered) {
+
+        if (geometryProps.includes(prop)) continue;
+
+        let values = stylePropsFiltered[prop];
+        let val = values.length ? values.join(' ') : values[0];
+
+        if(prop!=='class' && prop!=='id'){
+
+          let propShort = toShortStr(prop);
+          let valShort = toShortStr(val);
+          let propStr = `${propShort}-${valShort}`;
+  
+          // store in node property
+          if (!el.styleSet) el.styleSet = new Set();
+          if(propStr) el.styleSet.add(propStr);
+        }
+      }
+
+    }
+
+  }//endof element loop
+
+  /**
+   * remove group styles
+   * copied to children
+   * or remove nesting
+   */
+
+  if (unGroup) {
+    ungroupElements(groups);
+  } else {
 
-    // mark attributes for removal
-    if (removeClassNames) styleProps.remove.push('class');
-    if (removeIds) styleProps.remove.push('id');
-    if (removeDimensions) {
-      styleProps.remove.push('width');
-      styleProps.remove.push('height');
+    if (stylesToAttributes) {
+      groups.forEach(g => {
+        removeElAtts(g, ['style', 'transform']);
+      });
     }
 
-    // styles to atts
-    if (unGroup || convertTransforms || minifyRgbColors ) stylesToAttributes = true;
+  }
 
-    if (stylesToAttributes) {
+  // styles to group
+  if (attributesToGroup) sharedAttributesToGroup(svg);
 
-      /**
-       * normalize transforms
-       */
-      if (normalizeTransforms && matrix) {
-        let { rotate, scaleX, scaleY, skewX, translateX, translateY } = transComponents;
+  /** 
+   * merge paths with same styles
+   */
+  if (mergePaths) {
+    mergePathsWithSameProps(svg);
+  }
 
-        // scale attributes instead of transform
-        let hasRot = rotate !== 0 || skewX !== 0;
-        let unProportional = scaleX !== scaleY;
-        let scalableByAtt = ['circle', 'ellipse', 'rect'];
-        let needsTrans = convertTransforms || (name === 'g') || (hasRot) || unProportional;
+  // remove futile clip-paths
+  if (cleanupClip) removeFutileClipPaths(svg, { x, y, width, height });
 
-        if (!needsTrans && scalableByAtt.includes(name)) {
+  // replace href attributes with namespace - required by many older applications
+  if (legacyHref) hrefToXlink(svg);
 
-          if (name === 'circle' || name === 'ellipse') {
-            styleProps.cx[0] = [styleProps.cx[0] * scaleX + translateX];
-            styleProps.cy[0] = [styleProps.cy[0] * scaleX + translateY];
+  // remove empty class attributes
+  removeEmptyClassAtts(svg);
+  return { svg, svgElProps }
 
-            if (styleProps.r) styleProps.r[0] = [styleProps.r[0] * scaleX];
+}
 
-            if (styleProps.rx) styleProps.rx[0] = [styleProps.rx[0] * scaleX];
-            if (styleProps.ry) styleProps.ry[0] = [styleProps.ry[0] * scaleX];
+function removeEmptyClassAtts(svg) {
+  let emptyClassEls = svg.querySelectorAll('[class=""');
+  emptyClassEls.forEach(el => {
+    el.removeAttribute('class');
+  });
+}
 
-          }
-          else if (name === 'rect') {
-            let x = styleProps.x ? styleProps.x[0] + translateX : translateX;
-            let y = styleProps.y ? styleProps.y[0] + translateY : translateY;
+/** 
+* shared styles to group
+*/
+function sharedAttributesToGroup(svg) {
 
-            let rx = styleProps.rx ? styleProps.rx[0] * scaleX : 0;
-            let ry = styleProps.ry ? styleProps.ry[0] * scaleY : 0;
+  let els = svg.querySelectorAll(renderedEls.join(', '));
+  let len = els.length;
+  if(len===1) return;
 
-            styleProps.x = [x];
-            styleProps.y = [y];
+  let el0 = els[0] || null;
+  let stylePrev = el0.styleSet !== undefined ? [...el0.styleSet].join('_') : '';
 
-            styleProps.rx = [rx];
-            styleProps.ry = [ry];
+  // all props
+  let allProps = {};
 
-            styleProps.width = [styleProps.width[0] * scaleX];
-            styleProps.height = [styleProps.height[0] * scaleX];
-          }
+  // find attributes shared by all
+  let globalAtts = [];
 
-          remove.push('transform');
+  if (len) {
 
-          // scale props like stroke width or dash-array
-          styleProps = scaleProps(styleProps, { props: ['stroke-width', 'stroke-dasharray'], scale: scaleX });
+    let groups = [[el0]];
+    let idx = 0;
+    let elPrev = el0;
 
-        } else {
-          el.setAttribute('transform', transComponents.matrixAtt);
+    for (let i = 0; i < len; i++) {
+      let el = els[i];
+      let atts = getElementAtts(el);
+      for (let att in atts) {
+        let att_str = `${att}_${atts[att]}`;
 
+        if (!allProps[att_str]) {
+          allProps[att_str] = [];
+        }
+        allProps[att_str].push(el);
+        //
+        if (allProps[att_str].length === len) {
+          globalAtts.push(att);
         }
       }
+    }
 
-      /**
-       * apply consolidated 
-       * element attributes
-       */
+    // apply global to parent SVG
+    if (globalAtts.length) {
+      let atts0 = getElementAtts(el0);
+      for (let att in atts0) {
+        if (globalAtts.includes(att) && att !== 'transform') {
+          svg.setAttribute(att, atts0[att]);
+        }
+      }
+    }
 
-      let stylePropsFiltered = filterSvgElProps(name, styleProps,
-        { removeDefaults: true, cleanUpStrokes });
+    // detect groups
+    for (let i = 1; i < len; i++) {
+      let el = els[i];
+      let styleArr = el.styleSet !== undefined ? [...el.styleSet] : [];
+      let style = styleArr.length ? styleArr.join('_') : '';
 
-      remove = [...remove, ...stylePropsFiltered.remove];
+      // same style add to group
+      if (style === stylePrev && elPrev.nextElementSibling === el) {
+        groups[idx].push(el);
+      }
+      // start new group
+      else {
+        groups.push([el]);
+        idx++;
+      }
+      // update style
+      stylePrev = style;
+      elPrev = el;
 
-      for (let prop in stylePropsFiltered.propsFiltered) {
-        let values = styleProps[prop];
+    }// endof el loop
 
-        let val = values.length ? values.join(' ') : values[0];
-        el.setAttribute(prop, val);
-      }
+    // create groups
+    for (let i = 0; i < groups.length; i++) {
+      let children = groups[i];
+      let child0 = children[0];
+      let atts = getElementAtts(child0);
+      let groupEl = child0.parentNode.closest('g');
 
-      // remove obsolete attributes
-      for (let i = 0; i < remove.length; i++) {
-        let att = remove[i];
-        if (!stylesToAttributes && att === 'style') continue
+      // only 1 child - nothing to group
+      if (children.length === 1) continue
 
-        el.removeAttribute(att);
-      }
+      // create new group
+      if (!groupEl || groups.length>1) {
 
-      /**
-       * remove group styles
-       * copied to children
-       * or remove nesting
-       */
+        groupEl = document.createElementNS(svgNs, 'g');
+        child0.parentNode.insertBefore(groupEl, child0);
+        groupEl.append(...children);
+      }
 
-      if (unGroup) {
-        groups.forEach((g, i) => {
-          let children = [...g.children];
+      // move attributes to group
+      for (let att in atts) {
+        let val = atts[att];
 
+        let excludeAtts = ['id', 'class'];
+        if (!geometryProps.includes(att) && !excludeAtts.includes(att)) {
+          if (!globalAtts.includes(att) || att === 'transform') {
+            groupEl.setAttribute(att, val);
+          }
           children.forEach(child => {
-            g.parentNode.insertBefore(child, g);
-          });
-          g.remove();
-        });
-      } else {
-        groups.forEach((g, i) => {
-          let atts = [...Object.keys(groupProps[i]), 'style', 'transform'];
-          atts.forEach(att => {
-            g.removeAttribute(att);
+            child.removeAttribute(att);
           });
-        });
-
+        }
       }
 
-    } // endof style processing
+    } // endof groups
 
-    /**
-     * element conversions:
-     * shapes to paths or 
-     * paths to shapes
-     */
+  }
+}
 
-    // force shape conversion when transform conversion is enabled
-    if (convertTransforms) {
-      shapeConvert = 'toPaths';
-      convert_rects = true;
-      convert_ellipses = true;
-      convert_poly = true;
-      convert_lines = true;
-    }
+// merge adjacent paths
+function mergePathsWithSameProps(svg) {
+  let paths = svg.querySelectorAll('path');
+  let len = paths.length;
 
-    // convert shapes to paths
-    if (shapeConvert === 'toPaths') {
+  if (len) {
+    let path0 = paths[0];
+    let d0 = path0.getAttribute('d');
+    let stylePrev = path0.styleSet !== undefined ? [...path0.styleSet].join(' ') : '';
 
-      let { matrix = null, transComponents = null } = styleProps;
+    let remove = [];
 
-      if (matrix && transComponents) {
-        // scale props like stroke width or dash-array before conversion
-        ['stroke-width', 'stroke-dasharray'].forEach(att => {
-          let attVal = el.getAttribute(att);
-          let vals = attVal ? attVal.split(' ').filter(Boolean).map(Number).map(val => val * transComponents.scaleX) : [];
-          if (vals.length) el.setAttribute(att, vals.join(' '));
-        });
-      }
+    for (let i = 1; i < len; i++) {
+      let path = paths[i];
+      let style = path.styleSet !== undefined ? [...path.styleSet].join(' ') : '';
+      let isSibling = path.previousElementSibling === path0;
+      let d = path.getAttribute('d');
+      let isAbs = d.startsWith('M');
 
-      // convert paths only if a matrix transform is required
-      if (matrix ? geometryEls.includes(name) : shapeEls.includes(name)) {
+      if (isSibling && style === stylePrev) {
+        let dAbs = isAbs ? d : parsePathDataString(d).pathData.map(com => `${com.type} ${com.values.join(' ')}`).join(' ');
 
-        let path = shapeElToPath(el, { width, height, convert_rects, convert_ellipses, convert_poly, convert_lines, matrix });
-        el.replaceWith(path);
+        d0 += dAbs;
+        path0.setAttribute('d', d0);
 
-        name = 'path';
-        el = path;
+        remove.push(path);
 
-      }
+      } else {
+        path0 = path;
 
-    }
+        d0 = isAbs ? d : parsePathDataString(d).pathData.map(com => `${com.type} ${com.values.join(' ')}`).join(' ');
 
-    // convert paths to shapes 
-    else if (shapeConvert === 'toShapes') {
-      let paths = svg.querySelectorAll('path');
-      paths.forEach(path => {
-        let shape = pathElToShape(path, { convert_rects, convert_ellipses, convert_poly, convert_lines });
-        path.replaceWith(shape);
-        path = shape;
-      });
+      }
 
+      // update style
+      stylePrev = style;
     }
 
-  }//endof element loop
-
-  // remove futile clip-paths
-  if (cleanupClip) removeFutileClipPaths(svg, { x, y, width, height });
-
-  // replace href attributes with namespace - required by many older applications
-  if (legacyHref) {
-    svg.setAttribute('xmlns:xlink', "http://www.w3.org/1999/xlink");
-    let hrefs = svg.querySelectorAll('[href]');
-    hrefs.forEach(el => {
-      let href = el.getAttribute('href');
-      el.setAttribute('xlink:href', href);
-      el.removeAttribute('href');
+    remove.forEach(el => {
+      el.remove();
     });
-  }
 
-  return { svg, svgElProps }
+  }
 
 }
 
@@ -7713,8 +8788,6 @@ function cleanupSvgDefs(svg, { x = 0, y = 0, width = 0, height = 0, cleanupClip
     }
   });
 
-  // remove futile clip-paths
-
 }
 
 function removeFutileClipPaths(svg, { x = 0, y = 0, width = 0, height = 0 } = {}) {
@@ -7766,72 +8839,16 @@ function removeFutileClipPaths(svg, { x = 0, y = 0, width = 0, height = 0 } = {}
 
 }
 
-function scaleProps(styleProps = {}, { props = [], scale = 1 } = {}) {
-  if (scale === 1 || !props.length) return props;
-
-  for (let i = 0; i < props.length; i++) {
-    let prop = props[i];
-
-    if (styleProps[prop] !== undefined) {
-      styleProps[prop] = styleProps[prop].map(val => val * scale);
-    }
-  }
-  return styleProps
-}
-
-function removeSVGEls(svg, {
-  remove = ['metadata', 'script'],
-  removeNameSpaced = true,
-} = {}) {
-  let els = svg.querySelectorAll('*');
-  els.forEach(el => {
-    let nodeName = el.nodeName;
-    if ((removeNameSpaced && nodeName.includes(':')) ||
-      remove.includes(nodeName)
-    ) {
-      el.remove();
-    }
-  });
-}
+function hrefToXlink(svg) {
+  svg.setAttribute('xmlns:xlink', "http://www.w3.org/1999/xlink");
+  let hrefs = svg.querySelectorAll('[href]');
+  hrefs.forEach(el => {
+    let href = el.getAttribute('href');
+    el.setAttribute('xlink:href', href);
 
-function removeExcludedAttribues(el, allowed = ['viewBox', 'xmlns', 'width', 'height', 'id', 'class']) {
-  let atts = [...el.attributes].map((att) => att.name);
-  atts.forEach((att) => {
-    if (!allowed.includes(att)) {
-      el.removeAttribute(att);
-    }
   });
 }
 
-function stringifySVG(svg, {
-  omitNamespace = false,
-  removeComments = true,
-} = {}) {
-  let markup = new XMLSerializer().serializeToString(svg);
-
-  if (omitNamespace) {
-    markup = markup.replaceAll('xmlns="http://www.w3.org/2000/svg"', '');
-  }
-
-  if (removeComments) {
-    markup = markup
-      .replace(/(<!--.*?-->)|(<!--[\S\s]+?-->)|(<!--[\S\s]*?$)/g, '');
-  }
-
-  markup = markup
-    .replace(/\t/g, "")
-    .replace(/[\n\r|]/g, "\n")
-    .replace(/\n\s*\n/g, '\n')
-    .replace(/ +/g, ' ')
-
-    .replace(/> </g, '><')
-    .trim()
-    // sanitize linebreaks within pathdata
-    .replaceAll('&#10;', '\n');
-
-  return markup
-}
-
 function refineRoundedCorners(pathData, {
     threshold = 0,
     tolerance = 1
@@ -8401,61 +9418,69 @@ function pathDataRevertCubicToQuadratic(pathData, tolerance=1) {
     return pathData
 }
 
-function harmonizeCubicCptsThird(pathData = [], t = 0.666) {
+function fixIntersectingCpts(pathData = []) {
 
     let l = pathData.length;
-    for (let i = 0; i < l; i++) {
+    let p0 = { x: pathData[0].values[0], y: pathData[0].values[1] };
+    let p = p0;
+
+    for (let i = 1; i < l; i++) {
         let com = pathData[i];
         let comPrev = pathData[i - 1] || null;
         let { type, values } = com;
         pathData[i + 1] ? pathData[i + 1] : null;
-        let adjust = false;
 
         if (type === 'C') {
+            let tx = 1.2;
             let cp1 = { x: values[0], y: values[1] };
+            p = { x: values[4], y: values[5] };
             let cp2 = { x: values[2], y: values[3] };
-            let valuesL = comPrev.values.slice(-2);
-            let p0 = { x: valuesL[0], y: valuesL[1] };
-            let p = { x: values[4], y: values[5] };
 
-            let dist0 = getDistManhattan(p0, p);
-            getDistManhattan(p0, cp1);
-            getDistManhattan(p, cp2);
-            let dist3 = getDistManhattan(cp1, cp2);
+            interpolate(p0, cp1,   tx );
+            let cp2_ex = interpolate( p, cp2,   tx);
 
-            let ptIV = checkLineIntersection(p0, cp1, p, cp2, false);
+            comPrev.values.slice(-2);
 
-            if (ptIV) {
+            // extend tangents
 
-                // exact intersection
-                let ptI = ptIV ? checkLineIntersection(p0, cp1, p, cp2, true) : null;
+            let ptI = checkLineIntersection(p0, cp1, p, cp2_ex, true, true);
 
-                // cpts are intersection
-                if (ptI) {
-                    adjust = true;
-                }
+            
+            /*
+            renderPoly(markers, [p0, cp1], 'orange',  '0.75')
+            renderPoly(markers, [p, cp2], 'blue',  '0.75')
+            renderPoly(markers, [p, cp2_ex], 'magenta',  '0.75')
 
-                else if (dist3 < dist0 / 5) {
-                    adjust = true;
-                }
-            }
+            renderPoint(markers, p0, 'orange',  '0.75')
+            renderPoint(markers, cp1, 'magenta', '0.75')
+            renderPoint(markers, cp1_ex, 'blue', '0.5')
+ 
+            renderPoint(markers, cp2, 'cyan', '0.75')
+            */
 
-            if (adjust) {
-                cp1 = pointAtT([p0, ptIV], t);
-                cp2 = pointAtT([p, ptIV], t);
+            
+
+            /*
+            renderPoint(markers, p0, 'orange')
+            renderPoint(markers, p, 'magenta', '0.5')
+            */
+
+            if (ptI) {
+                let t = 0.666;
+                cp1 = interpolate(p0, ptI, t);
+                cp2 = interpolate(p, ptI, t);
+                com.values = [cp1.x, cp1.y, cp2.x, cp2.y, p.x, p.y];
 
-                pathData[i].values[0] = cp1.x;
-                pathData[i].values[1] = cp1.y;
-                pathData[i].values[2] = cp2.x;
-                pathData[i].values[3] = cp2.y;
             }
 
         }
 
+        if (values.length) {
+            p0 = p;
+        }
     }
 
-    return pathData
-
+    return pathData;
 }
 
 function simplifyPolyRDP(pts, {quality = 0.9, width = 0, height = 0}={}) {
@@ -8471,7 +9496,7 @@ function simplifyPolyRDP(pts, {quality = 0.9, width = 0, height = 0}={}) {
         quality = parseFloat(quality);
     }
 
-    if (pts.length < 4 || (!isAbsolute && quality) >= 1) return pts;
+    if (pts.length < 4 ) return pts;
 
     // convert quality to squaredistance tolerance
     let tolerance = quality;
@@ -8572,7 +9597,8 @@ function simplifyPolyRD(pts, {quality = 0.9, width = 0, height = 0}={}) {
     }
 
     // nothing to do - exit
-    if (pts.length < 4 || (!isAbsolute && quality) >= 1) return pts;
+
+    if (pts.length < 4 ) return pts;
 
     let p0 = pts[0];
     let pt;
@@ -8584,7 +9610,7 @@ function simplifyPolyRD(pts, {quality = 0.9, width = 0, height = 0}={}) {
     if (!isAbsolute) {
 
         // quality to tolerance
-        tolerance = 1 - quality;
+        tolerance = quality;
 
         /**
          * approximate dimensions
@@ -8631,14 +9657,15 @@ function pathDataFromPoly(pts, closed = true) {
 
     // complex polygon
     if (Array.isArray(pts[0])) {
-        pts.forEach(sub => {            
+        pts.forEach(sub => {
             subPath = [
                 { type: 'M', values: [sub[0].x, sub[0].y] },
                 ...sub.slice(1).map(pt => { return { type: 'L', values: [pt.x, pt.y] } })
             ];
+            if (closed) subPath.push({ type: 'Z', values: [] });
             pathData.push(...subPath);
         });
-    }else {
+    } else {
         pathData = [
             { type: 'M', values: [pts[0].x, pts[0].y] },
             ...pts.slice(1).map(pt => { return { type: 'L', values: [pt.x, pt.y] } })
@@ -8650,6 +9677,40 @@ function pathDataFromPoly(pts, closed = true) {
 
 }
 
+function getPolyCentroid(pts) {
+
+    let l = pts.length;
+    let x = 0, y = 0;
+    for (let i = 0; l && i < l; i++) {
+        let pt = pts[i];
+        x += pt.x;
+        y += pt.y;
+    }
+
+    let centroid = {x: x/l, y:y/l};
+    return centroid
+
+}
+
+function detectRegularPolygon(pts, centroid={x:0, y:0}) {
+    let rSq = getSquareDistance(pts[0], centroid);
+    let isRegular = true;
+
+    for (let i = 1, l = pts.length; i < l; i++) {
+        let pt1 = pts[i];
+        let dist = getSquareDistance(pt1, centroid);
+
+        let diff = Math.abs(rSq-dist);
+        let diffRel = diff/rSq;
+
+        if (diffRel > 0.05) {
+            return false;
+        }
+
+    }
+    return isRegular;
+}
+
 function analyzePoly(pts, {
     x = 0,
     y = 0,
@@ -8916,15 +9977,13 @@ function fitCurveSchneider(pts, {
 
     // create pathdata
     let pathData = bezierPtsToPathData(beziers);
-
     let cp1, cp2;
 
     adjustCpts = false;
-    harmonize = false;
 
-    if (adjustCpts) {
+    adjustCpts = true;
 
-        console.log('refine cpts');
+    if (adjustCpts) {
 
         let len2 = pathData.length;
         let com1 = pathData[0];
@@ -8954,13 +10013,16 @@ function fitCurveSchneider(pts, {
             com2.values[3] = cp2.y;
         }
 
+        /*
         // harmonize too tight tangents
-
+        let harmonize = true;
+         harmonize = false;
         if (harmonize) {
             pathData = harmonizeCubicCptsThird([{ type: 'M', values: [pts[0].x, pts[0].y] },
-            ...pathData]);
-            pathData.shift();
+            ...pathData])
+            pathData.shift()
         }
+        */
 
     }
 
@@ -9439,29 +10501,127 @@ function adjustTangentAngle(cp, p0, p1, p2) {
     return cp
 }
 
-// convert to pathdata
-function bezierPtsToPathData(beziers = []) {
-    let pathData = [];
-    beziers.forEach(bez => {
+// convert to pathdata
+function bezierPtsToPathData(beziers = []) {
+    let pathData = [];
+    beziers.forEach(bez => {
+
+        let type = bez.length === 4 ? 'C' : (bez.length === 3 ? 'Q' : 'L');
+
+        let cp1 = type === 'C' || type === 'Q' ? bez[1] : null;
+        let cp2 = type === 'C' ? bez[2] : null;
+        let p = bez[bez.length - 1];
+
+        let values = type === 'C' ?
+            [cp1.x, cp1.y, cp2.x, cp2.y, p.x, p.y] :
+            (type === 'Q' ?
+                [cp1.x, cp1.y, p.x, p.y] :
+                [p.x, p.y]
+            );
+
+        let com = { type, values };
+        pathData.push(com);
+    });
+
+    return pathData
+}
+
+function simplifyRC(pts, quality = 1, shiftStart = true) {
+
+    if (pts.length < 4) return pts;
+
+    let l = pts.length;
+
+    // starting point
+    let M = pts[0];
+
+    // last point
+    let Z = pts[l - 1];
+
+    // remove unnecessary closing point
+    if (M.x === Z.x && M.y === Z.y) {
+        pts.pop();
+        l--;
+        Z = pts[l - 1];
+    }
+
+    // init new point array
+    let ptsSmp = [M];
+    let pt0 = M;
+    let pt1, pt2;
+
+    // loop through vertices by triangles
+    for (let i = 2; i < l; i++) {
+        pt1 = pts[i - 1];
+        pt2 = pts[i];
+        let isLast = i === l - 1;
+
+        /**
+         * 1. Skip zero-length segments
+         */
+        if ((pt1.x === pt0.x && pt1.y === pt0.y) || (pt1.x === pt2.x && pt1.y === pt2.y)) {
+            continue;
+        }
+
+        /**
+         * 2. Check for perfectly flat
+         * vertical/horizontal segments
+         */
+        let isVertical = (pt0.x === pt1.x);
+        let isHorizontal = (pt0.y === pt1.y);
+
+        if (isVertical || isHorizontal) {
+
+            let isVertical2 = (pt1.x === pt2.x);
+            let isHorizontal2 = (pt1.y === pt2.y);
+
+            if (((isVertical && isVertical2) || (isHorizontal && isHorizontal2))) {
+
+                // perfectly flat segment - skip
+                if (!isLast) continue;
+
+                // flat but last – add last and skip colinearity check
+                if (isLast && M.x !== pt2.x && M.y !== pt2.y) {
+
+                    ptsSmp.push(pt2);
+                    continue
+                }
+
+            }
+        }
 
-        let type = bez.length === 4 ? 'C' : (bez.length === 3 ? 'Q' : 'L');
+        // check area
+        let area = getPolygonArea([pt0, pt1, pt2], true);
+        let thresh = getSquareDistance(pt0, pt2) * 0.005;
 
-        let cp1 = type === 'C' || type === 'Q' ? bez[1] : null;
-        let cp2 = type === 'C' ? bez[2] : null;
-        let p = bez[bez.length - 1];
+        // flat
+        if ( area <= thresh && i<l-1) {
 
-        let values = type === 'C' ?
-            [cp1.x, cp1.y, cp2.x, cp2.y, p.x, p.y] :
-            (type === 'Q' ?
-                [cp1.x, cp1.y, p.x, p.y] :
-                [p.x, p.y]
-            );
+            pt0 = pt1;
+            continue
+        }
 
-        let com = { type, values };
-        pathData.push(com);
-    });
+        // no simplification - add mid pt 
+        ptsSmp.push(pt1);
 
-    return pathData
+        // add last point if not first
+        if (isLast && M.x !== pt2.x && M.y !== pt2.y) {
+            // console.log('add last', M, pt2);
+            ptsSmp.push(pt2);
+        }
+
+        // update previous point
+        pt0 = pt1;
+
+    }
+
+    // 1st and last are colinear
+    let area0 = getPolygonArea([ptsSmp[1], M, ptsSmp[ptsSmp.length-1]], true);
+    let thresh0 = getSquareDistance (ptsSmp[1], ptsSmp[ptsSmp.length-1]) * 0.005;
+    // remove first point
+    if(area0 < thresh0) ptsSmp.shift();
+
+    return ptsSmp;
 }
 
 function simplifyPolygonToPathData(pts, {
@@ -9480,29 +10640,80 @@ function simplifyPolygonToPathData(pts, {
     simplifyRDP = 1,
 } = {}) {
 
-    /*
-    // denoise via RDP
-    if (denoise && denoise !== 1) {
-        pts = simplifyPolyRDP(pts, {
-            width,
-            height,
-            quality: denoise,
-            manhattan,
-            absolute
-        })
-    }
-    */
+    let polyPath = [];
+    let l = pts.length;
+    let M = pts[0];
+    let Z = pts[l - 1];
 
-    /*
-    // simplify polygon
-    if (simplifyRD != 1) {
-        pts = simplifyPolyRD(pts, { quality: simplifyRD+'px' })
+    // triangle
+    if (pts.length === 3) {
+
+        let pM1 = interpolate(M, pts[1], 0.5);
+        let pM2 = interpolate(pts[1], Z, 0.5);
+        let pM3 = interpolate(Z, pts[0], 0.5);
+
+        /*
+        console.log('triangle');
+        renderPoint(markers, M)
+        renderPoint(markers, pM1)
+        renderPoint(markers, pM2)
+        renderPoint(markers, pM3)
+        */
+
+        if (closed) {
+            let t = 0.6666;
+            let cp1_1 = interpolate(pM1, pts[1], t);
+            let cp2_1 = interpolate(pM2, pts[1], t);
+            let cp1_2 = interpolate(pM2, Z, t);
+            let cp2_2 = interpolate(pM3, Z, t);
+            let cp1_3 = interpolate(pM3, M, t);
+            let cp2_3 = interpolate(pM1, M, t);
+
+            polyPath = [
+                { type: 'M', values: [pM1.x, pM1.y] },
+                { type: 'C', values: [cp1_1.x, cp1_1.y, cp2_1.x, cp2_1.y, pM2.x, pM2.y] },
+                { type: 'C', values: [cp1_2.x, cp1_2.y, cp2_2.x, cp2_2.y, pM3.x, pM3.y] },
+                { type: 'C', values: [cp1_3.x, cp1_3.y, cp2_3.x, cp2_3.y, pM1.x, pM1.y] },
+                { type: 'Z', values: [] },
+            ];
+
+        } else {
+            polyPath = [
+
+                { type: 'M', values: [M.x, M.y] },
+                { type: 'C', values: [pts[1].x, pts[1].y, pts[1].x, pts[1].y, Z.x, Z.y] },
+            ];
+        }
+        return polyPath;
     }
 
-    if (simplifyRDP != 1) {
-        pts = simplifyPolyRDP(pts, { quality: simplifyRDP+'px' })
+    // remove colinear
+
+    /**
+     * detect regular polygon
+     * curved path is a circle
+     */
+    let centroid = getPolyCentroid(simplifyRC(pts));
+    let isRegularPolygon = detectRegularPolygon(pts, centroid);
+
+    if (isRegularPolygon) {
+
+        let ptAd = rotatePoint(pts[0], centroid.x, centroid.y, Math.PI);
+        let sweep = getPolygonArea(pts) > 0 ? 1 : 0;
+
+        polyPath = [
+            { type: 'M', values: [pts[0].x, pts[0].y] },
+            { type: 'A', values: [1, 1, 0, 0, sweep, ptAd.x, ptAd.y] },
+            { type: 'A', values: [1, 1, 0, 0, sweep, pts[0].x, pts[0].y] }
+        ];
+
+        if (closed) {
+            polyPath.push({ type: 'Z', values: [] });
+        }
+        return polyPath;
     }
-    */
+
+    // remove colinear
 
     // get topology of poly
     let polyAnalyzed = !keepExtremes && !keepCorners ? pts : analyzePoly(pts, {
@@ -9516,12 +10727,15 @@ function simplifyPolygonToPathData(pts, {
     // Schneider curve fit
     let threshold = width && height ? (width + height) / 2 * 0.004 * tolerance : 2.5;
 
-    let polyPath = simplifyPolyChunks(chunks, {
+    polyPath = simplifyPolyChunks(chunks, {
         closed,
         tolerance: threshold,
-        keepCorners
+        keepCorners,
+        keepExtremes: true,
     });
 
+    polyPath = fixIntersectingCpts(polyPath);
+
     return polyPath;
 }
 
@@ -9579,7 +10793,7 @@ function simplifyPolyChunks(chunks = [], {
  * creates precise polygon approximation from pathdata
  * converts arc to cubis
  */
-function pathDataToPolygon(pathData, {
+function pathDataToPolygonOpt(pathData, {
     precisionPoly = 1,
     autoAccuracy=false,
     polyFormat='points',
@@ -9654,11 +10868,11 @@ simplifyRDP=1,
 
     // simplify polygon
     if(simplifyRD>0){
-        pts2 = simplifyPolyRD(pts2, {quality:simplifyRD+'px'});
+        pts2 = simplifyPolyRD(pts2, {quality:simplifyRD});
     }
 
     if(simplifyRDP>0){
-        pts2 = simplifyPolyRDP(pts2, {quality:simplifyRDP+'px'});
+        pts2 = simplifyPolyRDP(pts2, {quality:simplifyRDP});
     }
 
     pathDataPoly = pathDataFromPoly(pts2);
@@ -9666,7 +10880,6 @@ simplifyRDP=1,
     
     if(autoAccuracy){
         decimals = detectAccuracyPoly(pts);
-
     }
 
     let poly = decimals>-1 ? pts2.map(pt => { return { x: roundTo(pt.x, decimals), y: roundTo(pt.y, decimals) } }) : pts2.map(pt => { return { x: pt.x, y: pt.y } });
@@ -9812,9 +11025,11 @@ function fixPathDataDirections(pathDataArr = [], toClockwise = false) {
         if (!includedIn.length && cw && !toClockwise
             || !includedIn.length && !cw && toClockwise
         ) {
+
             pathDataArr[i].pathData = reversePathData(pathDataArr[i].pathData);
             polys[i].cw = polys[i].cw ? false : true;
             cw = polys[i].cw;
+
         }
 
         // reverse inner sub paths
@@ -9823,6 +11038,7 @@ function fixPathDataDirections(pathDataArr = [], toClockwise = false) {
             let child = polys[ind];
 
             if (child.cw === cw) {
+
                 pathDataArr[ind].pathData = reversePathData(pathDataArr[ind].pathData);
                 polys[ind].cw = polys[ind].cw ? false : true;
             }
@@ -9833,116 +11049,404 @@ function fixPathDataDirections(pathDataArr = [], toClockwise = false) {
 
 }
 
-function svgPathSimplify(input = '', {
+let settingsDefaults = {
+
+    // SVG elements
+    removeComments: true,
+    removeOffCanvas: false,
+
+    // attributes
+    removeDimensions: false,
+    removeIds: false,
+    removeClassNames: false,
+    omitNamespace: false,
+    cleanUpStrokes: true,
+    addViewBox: true,
+    addDimensions: false,
+    removePrologue: true,
+    removeHidden: true,
+    removeUnused: true,
+    cleanupDefs: true,
+    cleanupClip: true,
+    cleanupSVGAtts: true,
+    removeNameSpaced: true,
+    removeNameSpacedAtts: true,
+    attributesToGroup: false,
+    minifyRgbColors: true,
+    stylesToAttributes: false,
+    fixHref: false,
+    legacyHref: false,
+    allowMeta: false,
+    allowDataAtts: true,
+    allowAriaAtts: true,
+
+    convertPathLength: false,
+
+    // custom removal
+    removeElements: [],
+    removeSVGAttributes: [],
+    removeElAttributes: [],
+
+    // merging/splitting
+    unGroup: false,
+    mergePaths: false,
+    splitCompound: false,
 
-    // return svg markup or object
-    getObject = false,
+    // shape conversions
+    shapesToPaths: false,
+    shapeConvert: 0,
+    convertShapes: ['rect', 'ellipse', 'circle', 'line', 'polygon', 'polyline'],
+
+    // simplify
+    keepSmaller: true,
+    simplifyBezier: true,
+    optimizeOrder: true,
+    autoClose: false,
+    removeZeroLength: true,
+    refineClosing: true,
+    removeColinear: true,
+    flatBezierToLinetos: true,
+    revertToQuadratics: true,
+    refineExtremes: false,
+    simplifyCorners: false,
+    keepExtremes: true,
+    keepCorners: true,
+    keepInflections: false,
+    addExtremes: false,
+
+    // draw direction 
+    fixDirections: false,
+    reversePath: false,
+
+    // pathdata
+    toAbsolute: false,
+    toRelative: true,
+    toMixed: false,
+    toShorthands: true,
+    toLonghands: false,
+    quadraticToCubic: true,
+    arcToCubic: false,
+    cubicToArc: false,
+    lineToCubic: false,
+
+    // minification
+    decimals: 3,
+    autoAccuracy: true,
+    minifyD: 0,
+    tolerance: 1,
+
+    // polygon
+    toPolygon: false,
+    smoothPoly: false,
+    polyFormat: 'object',
+    precisionPoly: 1,
+    simplifyRD: 0,
+    simplifyRDP: 0,
+    harmonizeCpts: false,
+    removeOrphanSubpaths: false,
+    simplifyRound: false,
+
+    scale: 1,
+    scaleTo: 0,
+    crop: false,
+    alignToOrigin: false,
 
-    toAbsolute = false,
+    // flatten transforms
+    convertTransforms: false,
+
+};
+
+const settingsNull = {};
+
+for (let prop in settingsDefaults) {
+    let val = settingsDefaults[prop];
+    let isBoolean = val === false || val === true;
+    let isNum = !isNaN(val);
+    let isArray = Array.isArray(val);
+
+    if (isBoolean) val = false;
+    else if (!isArray && isNum) val = val===1 ? 1 : (prop==='decimals'? -1 : 0);
+    else if (isArray) val = [];
+    settingsNull[prop] = val;
+}
+
+const presetSettings = {
+    default: settingsDefaults,
+
+    education: {
+        ...settingsDefaults,
+        ...{
+            keepSmaller: false,
+            toRelative: false,
+            toMixed: false,
+            toShorthands: false,
+            fixHref: true,
+            legacyHref: false,
+            addViewBox: true,
+            addDimensions: true,
+            removeComments: false,
+            decimals: 3,
+            minifyD: 2
+        }
+    },
+
+    null: settingsNull,
+
+    editor: {
+        ...settingsDefaults,
+        ...{
+            keepSmaller: false,
+            toRelative: true,
+            toMixed: true,
+            toShorthands: true,
+
+            legacyHref: true,
+            addViewBox: true,
+            addDimensions: true,
+            removeComments: true,
+            autoAccuracy: true,
+
+            minifyD: 0.5
+        }
+    },
+
+    noSimplification: {
+        ...settingsDefaults,
+        ...{
+            simplifyBezier: false,
+            quadraticToCubic: false,
+            toRelative: true,
+            toShorthands: true,
+            fixHref: true,
+            optimizeOrder: false,
+            removeZeroLength: false,
+            refineExtremes: false,
+            refineClosing: false,
+            removeColinear: false,
+            flatBezierToLinetos: false,
+
+            addDimensions: false,
+            removeComments: true,
+            minifyD: 0
+        }
+
+    },
+    path: {
+        ...settingsDefaults,
+        ...{
+            shapeConvert: 'toPaths',
+            convertShapes: ['rect', 'ellipse', 'circle', 'line', 'polygon', 'polyline'],
+            addViewBox: true,
+            minifyD: 0.5
+        }
+    },
+
+    poly: {
+        ...settingsDefaults,
+        ...{
+            toPolygon: true,
+        }
+    },
+
+    curvefit: {
+        ...settingsDefaults,
+        ...{
+            smoothPoly: true,
+        }
+    },
+
+    detransform: {
+        ...settingsDefaults,
+        ...{
+            convertTransforms: true,
+            addViewBox: true,
+            minifyD: 0.5
+        }
+    },
+
+    high: {
+        ...settingsDefaults,
+        ...{
+            tolerance: 1.2,
+            toMixed: true,
+            refineExtremes: true,
+            simplifyCorners: true,
+            simplifyRound: true,
+            removeClassNames: true,
+            cubicToArc: true,
+            removeComments: true,
+            removeHidden: true,
+            removeOffCanvas: true,
+            addViewBox: true,
+            removeDimensions: true,
+            minifyD: 0
+        }
+    }
+
+};
+
+function splitCompundGroups(pathDataPlusArr = [], {
     toRelative = true,
     toShorthands = true,
-    toLonghands = false,
+    minifyD = 0,
+    decimals = 3,
+    addDimensions = false
+} = {}) {
+    pathDataPlusArr = JSON.parse(JSON.stringify(pathDataPlusArr));
+    let len = pathDataPlusArr.length;
 
-    // not necessary unless you need cubics only
-    quadraticToCubic = true,
+    let xArr = [];
+    let yArr = [];
 
-    // mostly a fallback if arc calculations fail      
-    arcToCubic = false,
-    cubicToArc = false,
-
-    simplifyBezier = true,
-    optimizeOrder = true,
-    autoClose = false,
-    removeZeroLength = true,
-    refineClosing = true,
-    removeColinear = true,
-    flatBezierToLinetos = true,
-    revertToQuadratics = true,
-
-    refineExtremes = true,
-    simplifyCorners = false,
-    removeDimensions = false,
-    removeIds = false,
-    removeClassNames = false,
-    omitNamespace = false,
+    // refine bbox and add cpt polygon
+    for (let i = 0; i < len; i++) {
+        let sub = pathDataPlusArr[i];
+        let { pathData, bb } = sub;
 
-    fixDirections = false,
+        // console.log(bb);
+        // include control points for better overlapping approximation
 
-    keepExtremes = true,
-    keepCorners = true,
-    extrapolateDominant = true,
-    keepInflections = false,
-    addExtremes = false,
-    addSemiExtremes = false,
+        if (bb.width && bb.height) ; else {
+            let poly = getPathDataVertices(pathData, true);
+            bb = getPolyBBox(poly);
+            pathDataPlusArr[i].bb = bb;
 
-    toPolygon = false,
-    smoothPoly = false,
-    polyFormat = 'points',
-    precisionPoly = 1,
+        }
 
-    simplifyRD = 1,
-    simplifyRDP = 1,
+        xArr.push(bb.left, bb.right);
+        yArr.push(bb.top, bb.bottom);
+        sub.includes = [];
+    }
+
+    /**
+     * check overlapping 
+     * sub paths
+     */
+    for (let i = 0, l = pathDataPlusArr.length; i < l; i++) {
+        let sub1 = pathDataPlusArr[i];
+        let { bb, poly } = sub1;
 
-    harmonizeCpts = false,
+        for (let j = 0; j < l; j++) {
 
-    removeOrphanSubpaths = false,
-    simplifyRound = false,
+            let sub1 = pathDataPlusArr[j];
+            if (i === j) continue;
 
-    scale = 1,
-    scaleTo = 0,
-    crop = false,
-    alignToOrigin = false,
+            let bb1 = sub1.bb;
 
-    // flatten transforms
-    convertTransforms = false,
+            // test sample on-path points
+            let ptM = { x: bb1.x + bb1.width * 0.5, y: bb1.y + bb1.height * 0.5 };
+            if (ptM.x >= bb.x && ptM.y >= bb.y && ptM.x <= bb.right && ptM.y <= bb.bottom) {
+                pathDataPlusArr[i].includes.push(j);
+            }
 
-    decimals = 3,
-    autoAccuracy = true,
+        }
+    }
 
-    // experimental
+    /**
+     * combine overlapping 
+     * compound paths
+     */
+    for (let i = 0, l = pathDataPlusArr.length; i < l; i++) {
+        let sub = pathDataPlusArr[i];
+        let { includes } = sub;
 
-    minifyD = 0,
-    tolerance = 1,
-    reversePath = false,
+        includes.forEach(s => {
+            let pathData = pathDataPlusArr[s].pathData;
+            if (pathData.length) {
+                pathDataPlusArr[i].pathData.push(...pathData);
+                pathDataPlusArr[s].pathData = [];
+            }
+        });
+    }
 
-    minifyRgbColors = false,
-    removePrologue = true,
-    removeHidden = true,
-    removeUnused = true,
-    cleanupDefs = true,
-    cleanupClip = true,
-    cleanupSVGAtts = true,
-
-    stylesToAttributes = false,
-    fixHref = false,
-    legacyHref = false,
-    removeNameSpaced = true,
+    // remove empty els due to grouping
+    pathDataPlusArr = pathDataPlusArr.filter(sub => sub.pathData.length);
 
-    removeOffCanvas = false,
-    unGroup = false,
-    mergePaths = false,
+    // try to find row left to right order
 
-    // shape conversions
-    shapesToPaths = false,
+    pathDataPlusArr = pathDataPlusArr.sort((a, b) => ((a.bb.x ) - (b.bb.x)));
 
-    shapeConvert = 0,
-    convert_rects = false,
-    convert_ellipses = false,
-    convert_poly = false,
-    convert_lines = false,
+    // create SVG
+    let x = Math.min(...xArr);
+    let y = Math.min(...yArr);
+    let right = Math.max(...xArr);
+    let bottom = Math.max(...yArr);
+    let width = right - x;
+    let height = bottom - y;
 
-    lineToCubic = false,
-    cleanUpStrokes = true,
-    addViewBox = false,
-    addDimensions = false,
+    [x, y, width, height] = [x, y, width, height].map(val => roundTo(val, decimals));
 
-    removeComments = true,
+    let dimensionAtts = addDimensions ? `width="${width}" height="${height}"` : '';
+    let svgSplit = `<svg ${dimensionAtts} viewBox="${x} ${y} ${width} ${height}" xmlns="${svgNs}">`;
 
-} = {}) {
+    pathDataPlusArr.forEach(sub => {
+        let { pathData } = sub;
+
+        pathData = convertPathData(pathData, { toRelative, toShorthands, decimals });
+        let d = pathDataToD(pathData, minifyD);
+        svgSplit += `<path d="${d}"/>`;
+
+    });
+
+    svgSplit += '</svg>';
+
+    let splitObj = { pathData: pathDataPlusArr, svg: svgSplit };
+
+    return splitObj
+
+}
+
+/*
+function checkBBoxIntersections2(bb, bb1) {
+    let [x, y, width, height, right, bottom] = [
+        bb.x,
+        bb.y,
+        bb.width,
+        bb.height,
+        bb.x + bb.width,
+        bb.y + bb.height
+    ];
+    let [x1, y1, width1, height1, right1, bottom1] = [
+        bb1.x,
+        bb1.y,
+        bb1.width,
+        bb1.height,
+        bb1.x + bb1.width,
+        bb1.y + bb1.height
+    ];
+    let intersects = false;
+
+    if (x < x1 && right > right1 && y < y1 && bottom > bottom1) {
+        intersects = true;
+    }
+
+    console.log('???', intersects, 'dims', width, height, '2', width1, height1);
+
+    return intersects;
+}
+*/
+
+function svgPathSimplify(input = '', settings = {}) {
+
+    let preset = settings['preset'] !== undefined && settings['preset'] ? settings['preset'] : null;
+    let defaults = preset && presetSettings[preset] !== undefined ? presetSettings[preset] : presetSettings['default'];
+
+    // merge settings
+    settings = {
+        ...defaults,
+        ...settings
+    };
+
+    let { getObject = false, removeComments, removeOffCanvas, unGroup, mergePaths, removeElements, removeDimensions, removeIds, removeClassNames, omitNamespace, cleanUpStrokes, addViewBox, addDimensions, removePrologue, removeHidden, removeUnused, cleanupDefs, cleanupClip, cleanupSVGAtts, removeNameSpaced, removeNameSpacedAtts, attributesToGroup, minifyRgbColors, stylesToAttributes, fixHref, legacyHref, allowMeta, allowDataAtts, allowAriaAtts, convertPathLength, removeSVGAttributes, removeElAttributes, shapesToPaths, shapeConvert, convertShapes, simplifyBezier, optimizeOrder, autoClose, removeZeroLength, refineClosing, removeColinear, flatBezierToLinetos, revertToQuadratics, refineExtremes, simplifyCorners, fixDirections, keepExtremes, keepCorners, keepInflections, addExtremes, reversePath, toAbsolute, toRelative, toMixed, toShorthands, toLonghands, quadraticToCubic, arcToCubic, cubicToArc, lineToCubic, decimals, autoAccuracy, minifyD, tolerance, toPolygon, smoothPoly, polyFormat, precisionPoly, simplifyRD, simplifyRDP, harmonizeCpts, removeOrphanSubpaths, simplifyRound, scale, scaleTo, crop, alignToOrigin, convertTransforms, keepSmaller, splitCompound } = settings;
 
     // clamp tolerance and scale
     tolerance = Math.max(0.1, tolerance);
     scale = Math.max(0.001, scale);
+    if(fixDirections) keepSmaller = false;
+    if (scale !== 1 || scaleTo || crop || alignToOrigin) {
+        convertTransforms = true;
+        settings.convertTransforms = true;
+    }
 
     let inputType = detectInputType(input);
     let svg = '';
@@ -9957,7 +11461,9 @@ function svgPathSimplify(input = '', {
     let pathDataPlusArr_global = [];
     let paths = [];
     let polys = [];
+    let poly = [];
     let dStr = '';
+    let dOriginal = '';
 
     /**
      * normalize input
@@ -9981,25 +11487,55 @@ function svgPathSimplify(input = '', {
     autoClose = false;
     let accuracyArr = [];
 
+    // validate point JSON
+    if (inputType === 'json') {
+        let pts = [];
+        let needsQuotes = /([{,]\s*)(x|y)(\s*:)/.test(input);
+        if (needsQuotes) input = input.replaceAll('x:', '"x":').replaceAll('y:', '"y":');
+
+        try {
+            pts = JSON.parse(input);
+        } catch {
+            console.warn('No valid JSON');
+        }
+        if (pts.length) {
+            inputType = 'polyArray';
+            input = normalizePoly(pts);
+        }
+    }
+
     // single path or polys
-    if (inputType !== 'svgMarkup') {
+    if (inputType !== 'svgMarkup' && inputType !== 'symbol') {
         if (inputType === 'pathDataString') {
             d = input;
         } else if (inputType === 'polyString') {
-            d = 'M' + input;
+            splitCompound = false;
+            poly = normalizePoly(input);
+            d = pathDataFromPoly(poly, closed);
+
         }
 
         else if (inputType === 'polyArray' || inputType === 'polyObjectArray' || inputType === 'polyComplexArray' || inputType === 'polyComplexObjectArray') {
+            splitCompound = false;
 
             // normalize poly input to object array
-            let poly = normalizePoly(input);
+            poly = normalizePoly(input);
 
             // convert to pathdata
-            d = pathDataFromPoly(poly);
+            let closed = true;
 
             // calculate size
+            d = pathDataFromPoly(poly, closed);
             dStr = d.map(com => { return `${com.type} ${com.values.join(' ')}` }).join(' ');
+            dOriginal = dStr;
             svgSize = dStr.length;
+
+            /*
+            d=''
+            dOriginal = '';
+            svgSize = input.length;
+            */
+
         }
 
         else if (inputType === 'pathData') {
@@ -10008,6 +11544,11 @@ function svgPathSimplify(input = '', {
             // stringify to compare lengths
             dStr = Array.from(d).map(com => { return `${com.type} ${com.values.join(' ')}` }).join(' ');
             svgSize = dStr.length;
+
+        }
+        // not valid - set dummy path data
+        else {
+            d = 'M0 0 h0';
         }
 
         paths.push({ d, el: null });
@@ -10016,27 +11557,34 @@ function svgPathSimplify(input = '', {
     // mode:1 – process complete svg DOM
     else {
 
+        // convert symbol temporarily to SVG
+        if (inputType === 'symbol') {
+            input = input.replaceAll('<symbol', '<svg').replaceAll('</symbol', '</svg');
+            // ids are mandatory for symbols
+            removeIds = false;
+            removeDimensions = true;
+        }
+
         // convert all shapes to paths
         if (shapesToPaths) {
-            shapeConvert = true;
+            shapeConvert = 'toPaths';
             convert_rects = true;
             convert_ellipses = true;
             convert_poly = true;
             convert_lines = true;
         }
 
-        let svgPropObject = cleanUpSVG(input, {
-            removeIds, removeClassNames, removeDimensions, cleanupSVGAtts, cleanUpStrokes, removeHidden, removeUnused, removeNameSpaced, stylesToAttributes, removePrologue, fixHref, mergePaths, convertTransforms, legacyHref, cleanupDefs, cleanupClip, addViewBox, removeOffCanvas, addDimensions,
-            shapeConvert, convert_rects, convert_ellipses, convert_poly, convert_lines, minifyRgbColors, unGroup, convertTransforms
-        }
-        );
+        // sanitize SVG - clone/decouple settings
+        let svgPropObject = cleanUpSVG(input, JSON.parse(JSON.stringify(settings)));
         svg = svgPropObject.svg;
 
         // collect paths
         let pathEls = svg.querySelectorAll('path');
 
         pathEls.forEach((path, i) => {
-            paths.push({ d: path.getAttribute('d'), el: path, idx: i });
+            let d = path.getAttribute('d');
+
+            paths.push({ d, el: path, idx: i });
         });
 
         // get viewBox/dimensions
@@ -10052,20 +11600,19 @@ function svgPathSimplify(input = '', {
     // SVG optimization options
     let pathOptions = {
         toRelative,
-        toAbsolute,
-        toLonghands,
+        toMixed,
         toShorthands,
         decimals,
     };
 
-    // combinded path data for SVGs with mergePaths enabled
-    let pathData_merged = [];
-
     for (let i = 0, l = paths.length; l && i < l; i++) {
 
         let pathDataPlusArr = [];
         let path = paths[i];
         let { d, el } = path;
+        let isPoly = false;
+
+        // if polygon we already heave absolute coordinates
 
         let pathData = parsePathDataNormalized(d, { quadraticToCubic, arcToCubic });
 
@@ -10104,7 +11651,7 @@ function svgPathSimplify(input = '', {
         // count commands for evaluation
         let comCount = pathData.length;
 
-        if (removeOrphanSubpaths) pathData = removeOrphanedM(pathData);
+        if (!isPoly && removeOrphanSubpaths) pathData = removeOrphanedM(pathData);
 
         /**
          * get sub paths
@@ -10117,24 +11664,26 @@ function svgPathSimplify(input = '', {
 
             let pathDataSub = subPathArr[i];
             let poly = [];
-
             let coms = Array.from(new Set(pathDataSub.map(com => com.type))).join('');
-            let isPoly = !(/[acqts]/gi).test(coms);
-            let closed = (/[z]/gi).test(coms);
+            isPoly = !(/[acqts]/gi).test(coms);
+            let closed = isPoly ? true : false;
 
-            if (isPoly) {
+            if (isPoly && !mode) {
 
                 poly = getPathDataVertices(pathDataSub);
+                let bb = getPolyBBox(reducePoints(poly, 64));
 
                 // simplify polygon
                 if (simplifyRD > 0) {
-                    poly = simplifyPolyRD(poly, { quality: simplifyRD + 'px' });
+                    poly = simplifyPolyRD(poly, { quality: simplifyRD, width: bb.width, height: bb.height });
                 }
 
                 if (simplifyRDP > 0) {
-                    poly = simplifyPolyRDP(poly, { quality: simplifyRDP + 'px' });
+                    poly = simplifyPolyRDP(poly, { quality: simplifyRDP, width: bb.width, height: bb.height });
+
                 }
 
+                toPolygon = false;
                 pathDataSub = pathDataFromPoly(poly, closed);
 
             }
@@ -10148,21 +11697,18 @@ function svgPathSimplify(input = '', {
                 smoothPoly = false;
                 harmonizeCpts = false;
 
-                let pathDataSubPlus = analyzePathData(pathDataSub);
-                let { bb, pathData } = pathDataSubPlus;
-                pathDataSub = pathData;
+                pathDataSub = getPathDataVerbose(pathDataSub);
 
-                let polyData = pathDataToPolygon(pathDataSub, {
+                let polyData = pathDataToPolygonOpt(pathDataSub, {
                     precisionPoly,
                     autoAccuracy,
-                    polyFormat,
-                    decimals,
+
                     simplifyRD,
                     simplifyRDP
                 });
 
-                polys.push(polyData.poly);
                 pathDataSub = polyData.pathData;
+                isPoly = true;
 
             }
 
@@ -10192,7 +11738,10 @@ function svgPathSimplify(input = '', {
                         simplifyRD,
                         simplifyRDP,
                     };
+
                     pathDataSub = simplifyPolygonToPathData(poly, optionsPoly);
+                    // flag as non poly as we're smoothing to curves
+
                 }
             }
 
@@ -10209,27 +11758,43 @@ function svgPathSimplify(input = '', {
             if (removeColinear) pathDataSub = pathDataRemoveColinear(pathDataSub, { tolerance, flatBezierToLinetos: false });
 
             let tMin = 0, tMax = 1;
-            if (addExtremes || addSemiExtremes) pathDataSub = addExtremePoints(pathDataSub,
-                { tMin, tMax, addExtremes, addSemiExtremes, angles: [30] });
+            if (addExtremes) pathDataSub = addExtremePoints(pathDataSub,
+                { tMin, tMax, addExtremes, angles: [30] });
 
             // reverse
             if (reversePath) {
                 pathDataSub = reversePathData(pathDataSub);
             }
 
-            // analyze pathdata to add info about signicant properties such as extremes, corners
-            let pathDataPlus = analyzePathData(pathDataSub, {
-                detectSemiExtremes: addSemiExtremes,
-            });
+            // analyze pathdata to add info about significant properties such as extremes, corners
+            let pathDataPlus = { bb: {}, dimA: 0, pathData: [] };
+
+            if (!isPoly) {
+                pathDataPlus = analyzePathData(pathDataSub);
+            }
+            // we skip detailed analysis for native polygons
+            else {
+                if (!poly.length) {
+                    let pathDataCubic = convertPathData(JSON.parse(JSON.stringify(pathDataSub)), { toLonghands: true, toAbsolute: true, arcToCubic: true, testTypes: true });
+                    pathDataPlus.bb = getPolyBBox(getPathDataVertices(pathDataCubic));
+                }
+                pathDataPlus.dimA = pathDataPlus.bb.width + pathDataPlus.bb.height;
+                pathDataPlus.pathData = getPathDataVerbose(pathDataSub, {
+                    addSquareLength: false,
+                    addArea: false,
+                    addAverageDim: false
+                });
+            }
 
             // simplify beziers
             let { pathData, bb, dimA } = pathDataPlus;
+
             xArr.push(bb.x, bb.x + bb.width);
             yArr.push(bb.y, bb.y + bb.height);
 
             if (refineClosing) pathData = refineClosingCommand(pathData, { threshold: dimA * 0.001 });
 
-            pathData = simplifyBezier ? simplifyPathDataCubic(pathData, { simplifyBezier, keepInflections, keepExtremes, keepCorners, extrapolateDominant, revertToQuadratics, tolerance }) : pathData;
+            pathData = simplifyBezier ? simplifyPathDataCubic(pathData, { simplifyBezier, keepInflections, keepExtremes, keepCorners, revertToQuadratics, tolerance }) : pathData;
 
             // refine extremes
             if (refineExtremes) {
@@ -10269,8 +11834,6 @@ function svgPathSimplify(input = '', {
                 let decimalsSub = detectAccuracy(pathData);
                 accuracyArr.push(decimalsSub);
 
-                // pre round sub path
-
             }
 
             // update
@@ -10287,16 +11850,16 @@ function svgPathSimplify(input = '', {
         bb_global = { x: xMin, y: yMin, width: xMax - xMin, height: yMax - yMin };
         let isPortrait = bb_global.height > bb_global.width;
 
+        // fix path directions - before reordering
+        if (fixDirections) {
+            pathDataPlusArr = fixPathDataDirections(pathDataPlusArr);
+        }
+
         // prefer top to bottom priority for portrait aspect ratios 
         if (optimizeOrder) {
             pathDataPlusArr = isPortrait ? pathDataPlusArr.sort((a, b) => a.bb.y - b.bb.y || a.bb.x - b.bb.x) : pathDataPlusArr.sort((a, b) => a.bb.x - b.bb.x || a.bb.y - b.bb.y);
         }
 
-        // fix path directions
-        if (fixDirections) {
-            pathDataPlusArr = fixPathDataDirections(pathDataPlusArr);
-        }
-
         // flatten compound paths 
         pathData = [];
 
@@ -10315,57 +11878,69 @@ function svgPathSimplify(input = '', {
             pathOptions.decimals = decimals;
         }
 
-        // collect for merged svg paths 
-        mergePaths = false;
-        if (el && mergePaths) {
-            pathData_merged.push(...pathData);
+        // add simplified poly - if not populated by toPoly conversion
+        if (isPoly) {
+
+            pathDataPlusArr.forEach(sub => {
+                let poly = getPathDataVertices(sub.pathData, false, decimals);
+                if (polyFormat === 'array') {
+                    poly = polyPtsToArray(poly);
+                }
+                polys.push(poly);
+            });
+
         }
-        // single output
-        else {
 
-            // clone pathdata 
+        // split into sub paths - returns svg with multiple paths
+        if (splitCompound && !mode && pathDataPlusArr.length > 1) {
+            let pathDataSplit = splitCompundGroups(pathDataPlusArr, { toRelative, toShorthands, decimals, addDimensions });
+            svg = new DOMParser().parseFromString(pathDataSplit.svg, 'image/svg+xml').querySelector('svg');
+            // switch output type
+            mode = 1;
+            inputType = 'splitPath';
+        }
 
-            pathData = JSON.parse(JSON.stringify(pathData));
+        // clone pathdata 
+        pathData = JSON.parse(JSON.stringify(pathData));
 
-            // optimize path data
-            pathData = convertPathData(pathData, pathOptions);
+        // optimize path data
+        pathData = convertPathData(pathData, pathOptions);
 
-            // remove zero-length segments introduced by rounding
-            if (removeZeroLength) pathData = removeZeroLengthLinetos(pathData);
+        // remove zero-length segments introduced by rounding
+        if (removeZeroLength) pathData = removeZeroLengthLinetos(pathData);
 
-            // realign path to zero origin
-            if (alignToOrigin) {
+        // realign path to zero origin
+        if (alignToOrigin) {
 
-                pathData[0].values[0] = (pathData[0].values[0] - bb_global.x).toFixed(decimals);
-                pathData[0].values[1] = (pathData[0].values[1] - bb_global.y).toFixed(decimals);
+            pathData[0].values[0] = roundTo((pathData[0].values[0] - bb_global.x), decimals);
+            pathData[0].values[1] = roundTo((pathData[0].values[1] - bb_global.y), decimals);
 
-                bb_global.x = 0;
-                bb_global.y = 0;
-            }
+            bb_global.x = 0;
+            bb_global.y = 0;
+        }
 
-            // compare command count
-            let comCountS = pathData.length;
+        // compare command count
+        let comCountS = pathData.length;
 
-            let dOpt = pathDataToD(pathData, minifyD);
+        let dOpt = pathDataToD(pathData, minifyD);
 
-            svgSizeOpt = dOpt.length;
+        svgSizeOpt = dOpt.length;
 
-            compression = +(100 / svgSize * (svgSizeOpt)).toFixed(2);
+        compression = +(100 / svgSize * (svgSizeOpt)).toFixed(2);
 
-            path.d = dOpt;
-            path.report = {
-                original: comCount,
-                new: comCountS,
-                saved: comCount - comCountS,
-                compression,
-                decimals,
+        path.d = dOpt;
+        path.report = {
+            original: comCount,
+            new: comCountS,
+            saved: comCount - comCountS,
+            compression,
+            decimals,
 
-            };
+        };
 
-            // apply new path for svgs
-            if (el) {
-                el.setAttribute('d', dOpt);
-            }
+        // apply new path for svgs
+        if (el) {
+            el.setAttribute('d', dOpt);
         }
 
     } // end path array
@@ -10373,36 +11948,11 @@ function svgPathSimplify(input = '', {
     /**
      *  stringify new SVG
      */
-    if (mode) {
-
-        if (pathData_merged.length) {
-
-            // optimize path data
-            let pathData = convertPathData(pathData_merged, pathOptions);
-
-            // remove zero-length segments introduced by rounding
-            pathData = removeZeroLengthLinetos(pathData);
-
-            let dOpt = pathDataToD(pathData, minifyD);
-
-            // apply new path for svgs
-            paths[0].el.setAttribute('d', dOpt);
-
-            // remove other paths
-            for (let i = 1; i < paths.length; i++) {
-                let pathEl = paths[i].el;
-                if (pathEl) pathEl.remove();
-            }
-
-            // remove empty groups e.g groups
-            removeEmptySVGEls(svg);
-        }
+    if (mode || inputType === 'symbol') {
 
         // adjust viewBox and width for scale
         if (scale) {
-
             let { x, y, width, height, w, h, hasViewBox, hasWidth, hasHeight, widthUnit, heightUnit } = viewBox;
-
             if (crop) {
                 x = bb_global.x;
                 y = bb_global.y;
@@ -10413,14 +11963,14 @@ function svgPathSimplify(input = '', {
             }
 
             if (hasViewBox) {
-                svg.setAttribute('viewBox', [x, y, width, height].map(val => +(val * scale).toFixed(decimals)).join(' '));
+                svg.setAttribute('viewBox', [x, y, width, height].map(val => roundTo(val * scale, decimals)).join(' '));
             }
             if (hasWidth) {
-                svg.setAttribute('width', +(w * scale).toFixed(decimals) + widthUnit);
+                svg.setAttribute('width', roundTo(w * scale, decimals) + widthUnit);
             }
 
             if (hasHeight) {
-                svg.setAttribute('height', +(h * scale).toFixed(decimals) + heightUnit);
+                svg.setAttribute('height', roundTo(h * scale, decimals) + heightUnit);
             }
         }
 
@@ -10433,7 +11983,9 @@ function svgPathSimplify(input = '', {
             });
         }
 
-        svg = stringifySVG(svg, { omitNamespace, removeComments });
+        if (removeSVGAttributes.includes('xmlns')) omitNamespace = true;
+
+        svg = stringifySVG(svg, { omitNamespace, removeComments, format: minifyD });
 
         svgSizeOpt = svg.length;
 
@@ -10446,9 +11998,15 @@ function svgPathSimplify(input = '', {
             svgSize,
             svgSizeOpt,
             compression,
-            decimals
+            decimals,
         };
 
+        if (keepSmaller && svgSize < svgSizeOpt && !splitCompound) {
+
+            svg = input;
+            report.node = 'Original is smaller!';
+        }
+
     } else {
         ({ d, report } = paths[0]);
     }
@@ -10457,7 +12015,11 @@ function svgPathSimplify(input = '', {
         polys = polys[0];
     }
 
-    return !getObject ? (d ? d : svg) : { svg, d, polys, report, pathDataPlusArr: pathDataPlusArr_global, inputType };
+    if (polyFormat === 'string' && polys.length) {
+        polys = polys.flat().map(pt => `${pt.x},${pt.y}`).join(' ');
+    }
+
+    return !getObject ? (d ? d : svg) : { svg, d, polys, report, pathDataPlusArr: pathDataPlusArr_global, inputType, dOriginal };
 
 }