svg-path-simplify 0.3.6 → 0.4.1

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

@@ -120,9 +120,16 @@ const {
 } = Math;
 
 const rad2Deg = 180/Math.PI;  
+const deg2rad = Math.PI/180;
 const root2 = 1.4142135623730951;
 const svgNs = 'http://www.w3.org/2000/svg';
 
+// 1/2.54
+const inch2cm =  0.39370078;
+
+// 1/72
+const inch2pt =  0.01388889;
+
 /*
 import {abs, acos, asin, atan, atan2, ceil, cos, exp, floor,
     log, max, min, pow, random, round, sin, sqrt, tan, PI} from '/.constants.js';
@@ -1469,6 +1476,118 @@ function splitCommandAtTValues(p0, values, tArr, returnCommand = true) {
     return segmentPoints;
 }
 
+function parseColor(str) {
+    let type = str.startsWith('#') ? 'rgbHex' : (str.includes('(') ? 'fn' : typeof str);
+    let col = {};
+    let mode = null;
+    let colObj = { mode: null, values: [] };
+    if (type === 'rgbHex') {
+        col = hex2Rgb(str);
+        mode = 'rgba';
+    }
+    else if (type === 'fn') {
+        let colVals = str.split(/\(|\)/).filter(Boolean);
+        if (colVals.length < 2) return str;
+
+        mode = colVals[0];
+        let colorComponents = colVals[1].split(/,| /).filter(Boolean).map(Number);
+
+        let keys = mode.split('');
+        keys.forEach((k, i) => {
+            let val = colorComponents[i];
+            if (mode === 'rgba' && k === 'a') {
+                val = Math.floor(val * 255);
+            }
+            col[k] = val;
+        });
+    }
+    else if (type === 'string') {
+        colObj.mode = 'keyword';
+        colObj.values = [str];
+        return colObj
+    }
+
+    if (mode === 'rgba' || mode === 'rgb') {
+        col.a = !col.a ? 255 : col.a;
+    }
+
+    colObj.mode = mode;
+    colObj.values = Object.values(col);
+
+    return colObj;
+}
+
+function hex2Rgb(hex = '') {
+    // Remove # if present
+    if (hex.startsWith('#')) hex = hex.substring(1);
+
+    // normalize short notation (e.g., 'fff' or 'ffff')
+    if (hex.length === 3) {
+        hex = hex.split('').map(char => char + char).join('');
+    } else if (hex.length === 4) {
+        // Handle short notation with alpha (e.g., 'ffff')
+        hex = hex.split('').map(char => char + char).join('');
+    }
+
+    let r = 0, g = 0, b = 0, a = 0;
+
+    // invalid
+    if (hex.length < 6 || hex.length > 8) {
+        console.warn('Invalid hex format');
+        return { r, g, b, a };
+    }
+
+    let isRgba = hex.length === 8;
+
+    let numericValue = parseInt(hex, 16);
+    r = isRgba ? parseInt(hex.substring(0, 2), 16) : numericValue >> 16 & 0xFF;
+    g = isRgba ? parseInt(hex.substring(2, 4), 16) : numericValue >> 8 & 0xFF;
+    b = isRgba ? parseInt(hex.substring(4, 6), 16) : numericValue & 0xFF;
+    a = isRgba ? parseInt(hex.substring(6, 8), 16) : 255;
+
+    return { r, g, b, a };
+
+}
+
+function rgba2Hex({ r = 0, g = 0, b = 0, a = 255, values = [] }) {
+    // Helper function to convert number to 2-digit hex
+    const toHex = (num) => {
+        const hex = Math.min(255, Math.max(0, Math.round(num))).toString(16);
+        return hex.length === 1 ? '0' + hex : hex;
+    };
+
+    // convert from number array input
+    if (!r && !g && !b && values.length) {
+        [r, g, b, a = 255] = values;
+    }
+
+    // Get hex values
+    let rHex = toHex(r);
+    let gHex = toHex(g);
+    let bHex = toHex(b);
+    let aHex = a < 255 ? toHex(a) : 0;
+
+    let allowsShort = rHex[0] === rHex[1] && gHex[0] === gHex[1] && bHex[0] === bHex[1];
+
+    // Check for 3-character RGB short notation (e.g., #fff)
+    if (!aHex && allowsShort) {
+        return `#${rHex[0]}${gHex[0]}${bHex[0]}`;
+    }
+
+    // Check for 4-character RGBA short notation (e.g., #ffff)
+    if (aHex && allowsShort) {
+        return `#${rHex[0]}${gHex[0]}${bHex[0]}${aHex[0]}`;
+    }
+
+    // Return 6-character RGB if no alpha
+    if (!aHex) {
+        return `#${rHex}${gHex}${bHex}`;
+    }
+
+    // Return 8-character RGBA
+    return `#${rHex}${gHex}${bHex}${aHex}`;
+}
+
 function detectAccuracyPoly(pts) {
     let dims = [];
 
@@ -1603,12 +1722,23 @@ const shapeEls = [
 
 const horizontalProps = ['x', 'cx', 'rx', 'dx', 'width', 'translateX'];
 const verticalProps = ['y', 'cy', 'ry', 'dy', 'height', 'translateY'];
+const transHorizontal = ['scaleX', 'translateX', 'skewX'];
+const transVertical = ['scaleY', 'translateY', 'skewY'];
+
+const colorProps = ['fill', 'stroke', 'stop-color'];
 
 const geometryEls = [
     "path",
     ...shapeEls
 ];
 
+const renderedEls = [
+    "text",
+    "textPath",
+    "tspan",
+    ...geometryEls
+];
+
 const textEls = [
     "textPath",
     "text",
@@ -1874,7 +2004,7 @@ const attLookup = {
 
     defaults: {
 
-        transform: ["none", "matrix(1, 0, 0, 1, 0, 0)"],
+        transform: ["none", "matrix(1, 0, 0, 1, 0, 0)", "matrix(1 0 0 1 0 0)"],
         "transform-origin": ["0px, 0px", "0 0"],
         rx: ["0", "0px"],
         ry: ["0", "0px"],
@@ -1885,9 +2015,9 @@ const attLookup = {
         "color": ["black", "rgb(0, 0, 0)", "rgba(0, 0, 0, 0)", "#000", "#000000"],
 
         stroke: ["none"],
-        "stroke-width": ["1", "1px"],
         opacity: ["1"],
         "fill-opacity": ["1"],
+        "stroke-width": ["1", "1px"],
         "stroke-opacity": ["1"],
         "stroke-linecap": ["butt"],
         "stroke-miterlimit": ["4"],
@@ -1975,20 +2105,21 @@ function normalizeUnits(value = null, {
     // only required for circle r normalization when height!=width
     normalizedDiagonal = width === height ? false : normalizedDiagonal;
 
+    let type = typeof value;
     if (!value) return value;
 
     // check if value is string
-    let isArray = value.split(/,| /).length>1;
-    let isFunction = value.includes('(');
+    let isNum = type === 'number' ? true : isNumericValue(value);
+    let isArray = type === 'string' ? value.split(/,| /).length > 1 : false;
+    let isFunction = type === 'string' ? value.includes('(') : false;
 
-    let isNum = isNumericValue(value);
     if (!isNum || isArray || isFunction) return value
 
     // check unit if not specified
     unit = !unit ? getUnit(value) : unit;
 
     let val = parseFloat(value);
-    let scale=1;
+    let scale = 1;
     let scaleRoot = Math.sqrt(width * width + height * height) / root2;
 
     // no unit - already pixes/user unit
@@ -2019,15 +2150,31 @@ function normalizeUnits(value = null, {
         case "in":
             scale = dpi;
             break;
+
         case "pt":
-            scale = (1 / 72) * dpi;
+            // 1/72
+            scale = dpi * inch2pt;
+            break;
+
+        case "pc":
+            // 1/6
+            scale = dpi * 0.16666667;
             break;
+
         case "cm":
-            scale = (1 / 2.54) * dpi;
+            // 1/2.54
+            scale = inch2cm * dpi;
             break;
         case "mm":
-            scale = ((1 / 2.54) * dpi) / 10;
+
+            scale = inch2cm * dpi * 0.1;
+            break;
+
+        // has anyone ever used it?
+        case "Q":
+            scale = inch2cm * dpi * 0.025;
             break;
+
         // just a default approximation
         case "em":
         case "rem":
@@ -3077,6 +3224,10 @@ function analyzePathData(pathData = [], {
     let pathDataProps = [pathData[0]];
     let len = pathData.length;
 
+    // threshold for corner angles: 10 deg
+
+    // define angle threshold for semi extremes
+
     for (let c = 2; len && c <= len; c++) {
 
         let com = pathData[c - 1];
@@ -3096,7 +3247,7 @@ function analyzePathData(pathData = [], {
             (type === 'C' ? [p0, cp1, cp2, p] : [p0, cp1, p]) :
             ([p0, p]);
         let thresholdLength = dimA * 0.1;
-        let threshold = thresholdLength*0.01;
+        let threshold = thresholdLength * 0.01;
 
         // bezier types
         let isBezier = type === 'Q' || type === 'C';
@@ -3113,14 +3264,22 @@ function analyzePathData(pathData = [], {
             let dx = type === 'C' ? Math.abs(com.cp2.x - com.p.x) : Math.abs(com.cp1.x - com.p.x);
             let dy = type === 'C' ? Math.abs(com.cp2.y - com.p.y) : Math.abs(com.cp1.y - com.p.y);
 
-            let horizontal = (dy === 0 || dy<threshold ) && dx > 0;
-            let vertical = (dx === 0 || dx<threshold ) && dy > 0;
+            let horizontal = (dy === 0 || dy <= threshold) && dx > 0;
+            let vertical = (dx === 0 || dx <= threshold) && dy > 0;
 
             if (horizontal || vertical) {
                 hasExtremes = true;
             }
 
             // is extreme relative to bounding box 
+
+            // (cp1.x===p0.x && cp1.y!==p0.y  ) ||
+            if ((cp1.x === p0.x && cp1.y !== p0.y) || (cp1.y === p0.y && cp1.x !== p0.x)) {
+
+                pathDataProps[pathDataProps.length - 1].extreme = true;
+
+            }
+
             if ((p.x === left || p.y === top || p.x === right || p.y === bottom)) {
                 hasExtremes = true;
             }
@@ -3130,6 +3289,7 @@ function analyzePathData(pathData = [], {
                 let couldHaveExtremes = bezierhasExtreme(null, commandPts);
                 if (couldHaveExtremes) {
                     let tArr = getTatAngles(commandPts);
+
                     if (tArr.length && (tArr[0] > 0.2)) {
                         hasExtremes = true;
                     }
@@ -3184,21 +3344,23 @@ function analyzePathData(pathData = [], {
 
                 let signChange2 = (areaCpt < 0 && com.cptArea > 0) || (areaCpt > 0 && com.cptArea < 0) ? true : false;
 
-                let isCorner=!isFlat && signChange2;
+                let isCorner = !isFlat && signChange2;
                 if (isCorner) com.corner = true;
             }
         }
 
-        if (debug) {
+        pathDataProps.push(com);
+
+    }
+
+    
+    if (debug) {
+        pathDataProps.forEach(com=>{
 
             if (com.directionChange) renderPoint(markers, com.p, 'orange', '1.5%', '0.5');
             if (com.corner) renderPoint(markers, com.p, 'magenta', '1.5%', '0.5');
             if (com.extreme) renderPoint(markers, com.p, 'cyan', '1%', '0.5');
-
-        }
-
-        pathDataProps.push(com);
-
+        });
     }
 
     let dimA = (width + height) / 2;
@@ -3749,6 +3911,7 @@ function convertPathData(pathData, {
     hasShorthands = true,
     hasQuadratics = true,
     hasArcs = true,
+    optimizeArcs = true,
     testTypes = false
 
 } = {}) {
@@ -3768,23 +3931,68 @@ function convertPathData(pathData, {
     toRelative = toAbsolute ? false : toRelative;
     toShorthands = toLonghands ? false : toShorthands;
 
-    if (hasQuadratics && quadraticToCubic) pathData = pathDataQuadraticToCubic(pathData);
-
-    if (toShorthands) pathData = pathDataToShorthands(pathData);
+    if (toAbsolute) pathData = pathDataToAbsolute(pathData);
     if (hasShorthands && toLonghands) pathData = pathDataToLonghands(pathData);
 
-    if (toAbsolute) pathData = pathDataToAbsolute(pathData);
+    // minify semicircle radii
+    if (optimizeArcs) pathData = optimizeArcPathData(pathData);
+
+    if (toShorthands) pathData = pathDataToShorthands(pathData);
 
     if (hasArcs && arcToCubic) pathData = pathDataArcsToCubics(pathData);
 
+    if (hasQuadratics && quadraticToCubic) pathData = pathDataQuadraticToCubic(pathData);
+
     // pre round - before relative conversion to minimize distortions
     if (decimals > -1 && toRelative) pathData = roundPathData(pathData, decimals);
+
     if (toRelative) pathData = pathDataToRelative(pathData);
     if (decimals > -1) pathData = roundPathData(pathData, decimals);
 
     return pathData
 }
 
+/**
+ * 
+ * @param {*} pathData 
+ * @returns 
+ */
+
+function optimizeArcPathData(pathData = []) {
+    pathData.forEach((com, i) => {
+        let { type, values } = com;
+        if (type === 'A') {
+            let [rx, ry, largeArc, x, y] = [values[0], values[1], values[3], values[5], values[6]];
+            let comPrev = pathData[i - 1];
+            let [x0, y0] = [comPrev.values[comPrev.values.length - 2], comPrev.values[comPrev.values.length - 1]];
+            let M = { x: x0, y: y0 };
+            let p = { x, y };
+
+            // rx and ry are large enough
+            if (rx >= 1 && (x === x0 || y === y0)) {
+                let diff = Math.abs(rx - ry) / rx;
+
+                // rx~==ry 
+                if (diff < 0.01) {
+
+                    // test radius against mid point
+                    let pMid = interpolate(M, p, 0.5);                    
+                    let distM = getDistance(pMid, M);
+                    let rDiff = Math.abs(distM - rx) / rx;
+
+                    // half distance between mid and start point should be ~ equal
+                    if(rDiff<0.01){
+                        pathData[i].values[0] = 1;
+                        pathData[i].values[1] = 1;
+                        pathData[i].values[2] = 0;
+                    }
+                }
+            }
+        }
+    });
+    return pathData;
+}
+
 /**
  * parse normalized
  */
@@ -4221,7 +4429,7 @@ function pathDataToShorthands(pathData, decimals = -1, test = false) {
             let dx1 = (p0.x - cpPrev.x);
             let dy1 = (p0.y - cpPrev.y);
 
-            maxDist = getDistManhattan(cpPrev, cpFirst) * 0.025;
+            maxDist = getDistManhattan(cpPrev, cpFirst) * 0.01;
 
             // reflected cp
             let cpR = { x: cpPrev.x + dx1 * 2, y: cpPrev.y + dy1 * 2 };
@@ -5089,6 +5297,324 @@ function getRootSvg(el) {
   return svg;
 }
 
+/**
+ * scale pathData
+ */
+function transformPathData(pathData, matrix) {
+
+    // new pathdata
+    let pathDataTrans = [];
+
+    // transform point by 2d matrix
+    const transformPoint = (pt, matrix) => {
+        let { a, b, c, d, e, f } = matrix;
+        let { x, y } = pt;
+        return { x: a * x + c * y + e, y: b * x + d * y + f };
+    };
+
+    const normalizeMatrix = (matrix) => {
+        matrix =
+            typeof matrix === "string"
+                ? (matrix = matrix
+                    .replace(/^matrix\(|\)$/g, "")
+                    .split(",")
+                    .map(Number))
+                : matrix;
+        matrix = !Array.isArray(matrix)
+            ? {
+                a: matrix.a,
+                b: matrix.b,
+                c: matrix.c,
+                d: matrix.d,
+                e: matrix.e,
+                f: matrix.f
+            }
+            : {
+                a: matrix[0],
+                b: matrix[1],
+                c: matrix[2],
+                d: matrix[3],
+                e: matrix[4],
+                f: matrix[5]
+            };
+        return matrix;
+    };
+
+    const transformArc = (p0, values, matrix) => {
+        let [rx, ry, angle, largeArc, sweep, x, y] = values;
+
+        /**
+        * parametrize arc command 
+        * to get the actual arc params
+        */
+        let arcData = svgArcToCenterParam(
+            p0.x,
+            p0.y,
+            values[0],
+            values[1],
+            angle,
+            largeArc,
+            sweep,
+            x,
+            y
+        );
+        ({ rx, ry } = arcData);
+        let { a, b, c, d, e, f } = matrix;
+
+        let ellipsetr = transformEllipse(rx, ry, angle, matrix);
+        let p = transformPoint({ x: x, y: y }, matrix);
+
+        // adjust sweep if flipped
+        let denom = a * a + b * b;
+        let scaleX = Math.sqrt(denom);
+        let scaleY = (a * d - c * b) / scaleX;
+
+        let flipX = scaleX < 0 ? true : false;
+        let flipY = scaleY < 0 ? true : false;
+
+        // adjust sweep
+        if (flipX || flipY) {
+            sweep = sweep === 0 ? 1 : 0;
+        }
+
+        return {
+            type: 'A',
+            values: [
+                ellipsetr.rx,
+                ellipsetr.ry,
+                ellipsetr.ax,
+                largeArc,
+                sweep,
+                p.x,
+                p.y]
+        };
+    };
+
+    // normalize matrix input
+    matrix = normalizeMatrix(matrix);
+
+    let matrixStr = [matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f]
+        .map((val) => {
+            return +val.toFixed(1);
+        })
+        .join("");
+
+    // no transform: quit
+    if (matrixStr === "100100") {
+
+        return pathData;
+    }
+
+    pathData.forEach((com, i) => {
+        let { type, values } = com;
+        let typeRel = type.toLowerCase();
+        let comPrev = i > 0 ? pathData[i - 1] : pathData[i];
+        let comPrevValues = comPrev.values;
+        let comPrevValuesL = comPrevValues.length;
+        let p0 = {
+            x: comPrevValues[comPrevValuesL - 2],
+            y: comPrevValues[comPrevValuesL - 1]
+        };
+        ({ x: values[values.length - 2], y: values[values.length - 1] });
+        let comT = { type: type, values: [] };
+
+        switch (typeRel) {
+            case "a":
+                comT = transformArc(p0, values, matrix);
+                break;
+
+            default:
+                // all other point based commands
+                if (values.length) {
+                    for (let i = 0; i < values.length; i += 2) {
+                        let ptTrans = transformPoint(
+                            { x: com.values[i], y: com.values[i + 1] },
+                            matrix
+                        );
+
+                        comT.values[i] = ptTrans.x;
+                        comT.values[i + 1] = ptTrans.y;
+                    }
+                }
+        }
+
+        pathDataTrans.push(comT);
+    });
+
+    return pathDataTrans;
+}
+
+/**
+ * Based on: https://github.com/fontello/svgpath/blob/master/lib/ellipse.js
+ * and fork: https://github.com/kpym/SVGPathy/blob/master/lib/ellipse.js
+ */
+
+function transformEllipse(rx, ry, ax, matrix) {
+    const torad = Math.PI / 180;
+    const epsilon = 1e-7;
+
+    matrix = !Array.isArray(matrix)
+        ? matrix
+        : {
+            a: matrix[0],
+            b: matrix[1],
+            c: matrix[2],
+            d: matrix[3],
+            e: matrix[4],
+            f: matrix[5]
+        };
+
+    // We consider the current ellipse as image of the unit circle
+    // by first scale(rx,ry) and then rotate(ax) ...
+    // So we apply ma =  m x rotate(ax) x scale(rx,ry) to the unit circle.
+    let  c = Math.cos(ax * torad),
+        s = Math.sin(ax * torad);
+    let  ma = [
+        rx * (matrix.a * c + matrix.c * s),
+        rx * (matrix.b * c + matrix.d * s),
+        ry * (-matrix.a * s + matrix.c * c),
+        ry * (-matrix.b * s + matrix.d * c)
+    ];
+
+    // ma * transpose(ma) = [ J L ]
+    //                      [ L K ]
+    // L is calculated later (if the image is not a circle)
+    let  J = ma[0] * ma[0] + ma[2] * ma[2],
+        K = ma[1] * ma[1] + ma[3] * ma[3];
+
+    // the sqrt of the discriminant of the characteristic polynomial of ma * transpose(ma)
+    // this is also the geometric mean of the eigenvalues
+    let  D = Math.sqrt(
+        ((ma[0] - ma[3]) * (ma[0] - ma[3]) + (ma[2] + ma[1]) * (ma[2] + ma[1])) *
+        ((ma[0] + ma[3]) * (ma[0] + ma[3]) + (ma[2] - ma[1]) * (ma[2] - ma[1]))
+    );
+
+    // the arithmetic mean of the eigenvalues
+    let  JK = (J + K) / 2;
+
+    // check if the image is (almost) a circle
+    if (D <= epsilon) {
+        rx = ry = Math.sqrt(JK);
+        ax = 0;
+        return { rx: rx, ry: ry, ax: ax };
+    }
+
+    // check if ma * transpose(ma) is (almost) diagonal
+    if (Math.abs(D - Math.abs(J - K)) <= epsilon) {
+        rx = Math.sqrt(J);
+        ry = Math.sqrt(K);
+        ax = 0;
+        return { rx: rx, ry: ry, ax: ax };
+    }
+
+    // if it is not a circle, nor diagonal
+    let  L = ma[0] * ma[1] + ma[2] * ma[3];
+
+    // {l1,l2} = the two eigen values of ma * transpose(ma)
+    let  l1 = JK + D / 2,
+        l2 = JK - D / 2;
+
+    // the x - axis - rotation angle is the argument of the l1 - eigenvector
+    if (Math.abs(L) <= epsilon && Math.abs(l1 - K) <= epsilon) {
+        // if (ax == 90) => ax = 0 and exchange axes
+        ax = 0;
+        rx = Math.sqrt(l2);
+        ry = Math.sqrt(l1);
+        return { rx: rx, ry: ry, ax: ax };
+    }
+
+    ax =
+        Math.atan(Math.abs(L) > Math.abs(l1 - K) ? (l1 - J) / L : L / (l1 - K)) /
+        torad; // the angle in degree
+
+    // if ax > 0 => rx = sqrt(l1), ry = sqrt(l2), else exchange axes and ax += 90
+    if (ax >= 0) {
+        // if ax in [0,90]
+        rx = Math.sqrt(l1);
+        ry = Math.sqrt(l2);
+    } else {
+        // if ax in ]-90,0[ => exchange axes
+        ax += 90;
+        rx = Math.sqrt(l2);
+        ry = Math.sqrt(l1);
+    }
+
+    return { rx: rx, ry: ry, ax: ax };
+}
+
+/**
+ *  Decompose matrix to readable transform properties 
+ *  translate() rotate() scale() etc.
+ *  based on @AndreaBogazzi's answer
+ *  https://stackoverflow.com/questions/5107134/find-the-rotation-and-skew-of-a-matrix-transformation#32125700
+ *  return object with seperate transform properties 
+ *  and ready to use css or svg attribute strings
+ */
+function qrDecomposeMatrix(matrix, precision = 4) {
+    let { a, b, c, d, e, f } = matrix;
+    // matrix is array
+    if (Array.isArray(matrix)) {
+        [a, b, c, d, e, f] = matrix;
+    }
+    let angle = Math.atan2(b, a),
+        denom = Math.pow(a, 2) + Math.pow(b, 2),
+        scaleX = Math.sqrt(denom),
+        scaleY = (a * d - c * b) / scaleX,
+        skewX = Math.atan2(a * c + b * d, denom) / (Math.PI / 180),
+        translateX = e ? e : 0,
+        translateY = f ? f : 0,
+        rotate = angle ? angle / (Math.PI / 180) : 0;
+    let transObj = {
+        translateX: translateX,
+        translateY: translateY,
+        rotate: rotate,
+        scaleX: scaleX,
+        scaleY: scaleY,
+        skewX: skewX,
+        skewY: 0
+    };
+    let cssTransforms = [];
+    let svgTransforms = [];
+    for (let prop in transObj) {
+        transObj[prop] = +parseFloat(transObj[prop]).toFixed(precision);
+        let val = transObj[prop];
+        let unit = "";
+        if (prop == "rotate" || prop == "skewX") {
+            unit = "deg";
+        }
+        if (prop.indexOf("translate") != -1) {
+            unit = "px";
+        }
+        // combine these properties
+        let convert = ["scaleX", "scaleY", "translateX", "translateY"];
+        if (val !== 0) {
+            cssTransforms.push(`${prop}(${val}${unit})`);
+        }
+        if (convert.indexOf(prop) == -1 && val !== 0) {
+            svgTransforms.push(`${prop}(${val})`);
+        } else if (prop == "scaleX") {
+            svgTransforms.push(
+                `scale(${+scaleX.toFixed(precision)} ${+scaleY.toFixed(precision)})`
+            );
+        } else if (prop == "translateX") {
+            svgTransforms.push(
+                `translate(${transObj.translateX} ${transObj.translateY})`
+            );
+        }
+
+    }
+    // append css style string to object
+    transObj.cssTransform = cssTransforms.join(" ");
+    transObj.svgTransform = svgTransforms.join(" ");
+
+    transObj.matrix = [a, b, c, d, e, f ].map(val=>roundTo(val, precision));
+    transObj.matrixAtt = `matrix(${transObj.matrix.join(' ')})`;
+
+ 
+
+    return transObj;
+}
+
 function pathElToShape(el, {
     convert_rects = false,
     convert_ellipses = false,
@@ -5221,14 +5747,16 @@ function shapeElToPath(el, { width = 0,
     convert_rects = false,
     convert_ellipses = false,
     convert_poly = false,
-    convert_lines = false
+    convert_lines = false,
+
+    matrix=null
 
 } = {}) {
 
     let nodeName = el.nodeName.toLowerCase();
 
     if (
-        nodeName === 'path' ||
+        nodeName === 'path' && !matrix ||
         nodeName === 'rect' && !convert_rects ||
         (nodeName === 'circle' || nodeName === 'ellipse') && !convert_ellipses ||
         (nodeName === 'polygon' || nodeName === 'polyline') && !convert_poly ||
@@ -5236,17 +5764,25 @@ function shapeElToPath(el, { width = 0,
     ) return el;
 
     let pathData = getPathDataFromEl(el, { width, height });
+
+    // shape attributes – obsolete for path els
+    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'){
+        pathData = transformPathData(pathData, matrix);
+        exclude.push('transform', 'transform-origin');
+    }
+
     let d = pathData.map(com => { return `${com.type} ${com.values} ` }).join(' ');
     let attributes = [...el.attributes].map(att => att.name);
 
     let pathN = document.createElementNS(svgNs, 'path');
     pathN.setAttribute('d', d);
 
-    let exclude = ['x', 'y', 'x1', 'y1', 'x2', 'y2', 'cx', 'cy', 'dx', 'dy', 'r', 'rx', 'ry', 'width', 'height', 'points'];
-
+    // copy attributes
     attributes.forEach(att => {
         if (!exclude.includes(att)) {
-
             let val = el.getAttribute(att);
             pathN.setAttribute(att, val);
         }
@@ -6031,117 +6567,28 @@ function refineAdjacentExtremes(pathData, {
  * transform property object
  */
 
-function parseCSSTransform(transformString, transformOrigin = { x: 0, y: 0 }) {
-
-    if (!transformString) return false;
-
-    let transformOptions = {
-        transforms: [],
-        transformOrigin,
-    };
-
-    let regex = /(\w+)\(([^)]+)\)/g;
-    let match;
-
-    function convertToDegrees(value) {
-        if (typeof value === 'string') {
-            if (value.includes('rad')) {
-                return parseFloat(value) * (180 / Math.PI);
-            } else if (value.includes('turn')) {
-                return parseFloat(value) * 360;
-            }
-        }
-        return parseFloat(value);
-    }
-
-    while ((match = regex.exec(transformString)) !== null) {
-        let name = match[1];
-        let values = match[2].split(/,\s*/).map(v => convertToDegrees(v));
-
-        switch (name) {
-
-            case 'translate':
-                transformOptions.transforms.push({ translate: [values[0] || 0, values[1] || 0] });
-                break;
-            case 'translateX':
-                transformOptions.transforms.push({ translate: [values[0] || 0, 0, 0] });
-                break;
-
-            case 'translateY':
-                transformOptions.transforms.push({ translate: [0, values[0] || 0, 0] });
-                break;
-            case 'scale':
-                transformOptions.transforms.push({ scale: [values[0] || 0, values[1] || 0] });
-                break;
-            case 'skew':
-                transformOptions.transforms.push({ skew: [values[0] || 0, values[1] || 0] });
-                break;
-
-            case 'skewX':
-                transformOptions.transforms.push({ skew: [values[0] || 0, 0] });
-                break;
-
-            case 'skewY':
-                transformOptions.transforms.push({ skew: [0, values[0] || 0] });
-                break;
-
-            case 'rotate':
-
-                console.log('rotate', values);
-
-                transformOptions.transforms.push({ rotate: [0, 0, values[0] || 0] });
-                break;
-            case 'matrix':
-                transformOptions.transforms.push({ matrix: values });
-                break;
-        }
-    }
-
-    // Extract transform-origin, perspective-origin, and perspective if included as separate properties
-    let styleProperties = transformString.split(/;\s*/);
-    styleProperties.forEach(prop => {
-        let [key, value] = prop.split(':').map(s => s.trim());
-        if (key === 'transform-origin' || key === 'perspective-origin') {
-            let [x, y] = value.split(/\s+/).map(parseFloat);
-            if (key === 'transform-origin') {
-                transformOptions.transformOrigin = { x: x || 0, y: y || 0 };
-            }
-        }
-    });
-
-    return transformOptions;
-}
-
-/**
- * wrapper function to switch between
- * 2D or 3D matrix
- */
-function getMatrix({
-    transforms = [],
-    transformOrigin = { x: 0, y: 0 },
-} = {}) {
-
-    let matrix = getMatrix2D(transforms, transformOrigin);
+function getMatrixFromTransform(transformations = []) {
 
-    return matrix
-}
+    // Helper function to multiply two 2D matrices
 
-function getMatrix2D(transformations = [], origin = { x: 0, y: 0 }) {
+    const multiply = (m1, m2) => {
+        let mtxN = {
+            a: m1.a * m2.a + m1.c * m2.b,
+            b: m1.b * m2.a + m1.d * m2.b,
+            c: m1.a * m2.c + m1.c * m2.d,
+            d: m1.b * m2.c + m1.d * m2.d,
+            e: m1.a * m2.e + m1.c * m2.f + m1.e,
+            f: m1.b * m2.e + m1.d * m2.f + m1.f
+        };
 
-    // Helper function to multiply two 2D matrices
-    const multiply = (m1, m2) => ({
-        a: m1.a * m2.a + m1.c * m2.b,
-        b: m1.b * m2.a + m1.d * m2.b,
-        c: m1.a * m2.c + m1.c * m2.d,
-        d: m1.b * m2.c + m1.d * m2.d,
-        e: m1.a * m2.e + m1.c * m2.f + m1.e,
-        f: m1.b * m2.e + m1.d * m2.f + m1.f
-    });
+        return mtxN;
+    };
 
     // Helper function to create a translation matrix
-    const translationMatrix = (x, y) => ({
-        a: 1, b: 0, c: 0, d: 1, e: x, f: y
-    });
+    const translationMatrix = (x, y) => {
+        let mtx ={a: 1, b: 0, c: 0, d: 1, e: x, f: y};
+        return mtx
+    };
 
     // Helper function to create a scaling matrix
     const scalingMatrix = (x, y) => ({
@@ -6150,13 +6597,13 @@ function getMatrix2D(transformations = [], origin = { x: 0, y: 0 }) {
 
     // get skew or rotation axis matrix
     const angleMatrix = (angles, type) => {
-        const toRad = (angle) => angle * Math.PI / 180;
-        let [angleX, angleY] = angles.map(ang => { return toRad(ang) });
+
+        let [angleX, angleY=0] = angles.map(ang => ang*deg2rad);
         let m = {};
 
         if (type === 'rot') {
-            let cos = Math.cos(angleX), sin = Math.sin(angleX);
-            m = { a: cos, b: sin, c: -sin, d: cos, e: 0, f: 0 };
+            let cosX = Math.cos(angleX), sinX = Math.sin(angleX);
+            m = { a: cosX, b: sinX, c: -sinX, d: cosX, e: 0, f: 0 };
         } else if (type === 'skew') {
             let tanX = Math.tan(angleX), tanY = Math.tan(angleY);
             m = {
@@ -6169,201 +6616,48 @@ function getMatrix2D(transformations = [], origin = { x: 0, y: 0 }) {
     // Start with an identity matrix
     let matrix = { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 };
 
-    // Apply transform origin: translate to origin, apply transformations, translate back
-    if (origin.x !== 0 || origin.y !== 0) {
-        matrix = multiply(matrix, translationMatrix(origin.x, origin.y));
-    }
+    // Process transformations in the provided order (right-to-left)
+    for (let i = 0; i < transformations.length; i++) {
 
-    // Default values for transformations
-    const defaults = {
-        translate: [0, 0],
-        scale: [1, 1],
-        skew: [0, 0],
-        rotate: [0],
-        matrix: [1, 0, 0, 1, 0, 0]
-    };
+        let transform = transformations[i];
 
-    // Process transformations in the provided order (right-to-left)
-    for (let transform of transformations) {
-        let type = Object.keys(transform)[0]; // Get the transformation type (e.g., "translate")
-        let values = transform[type] || defaults[type]; // Use default values if none provided
+        // Get the transformation type (e.g., "translate")
+        let type = Object.keys(transform)[0];
 
-        // Destructure values with fallbacks
-        let [x, y = defaults[type][1]] = values;
+        let values = transform[type];
 
-        // Z-rotate as  2d rotation
-        if (type === 'rotate' && values.length === 3) {
-            x = values[2];
-        }
+        let [x, y] = values;
 
         switch (type) {
             case "matrix":
                 let keys = ['a', 'b', 'c', 'd', 'e', 'f'];
                 let obj = Object.fromEntries(keys.map((key, i) => [key, values[i]]));
+
                 matrix = multiply(matrix, obj);
                 break;
             case "translate":
-                if (x || y) matrix = multiply(matrix, translationMatrix(x, y));
+                matrix = multiply(matrix, translationMatrix(x, y));
                 break;
             case "skew":
-                if (x || y) matrix = multiply(matrix, angleMatrix([x, y], 'skew'));
+                matrix = multiply(matrix, angleMatrix([x, y], 'skew'));
                 break;
             case "rotate":
-                if (x) matrix = multiply(matrix, angleMatrix([x], 'rot'));
+                matrix = multiply(matrix, angleMatrix([x], 'rot'));
+
                 break;
             case "scale":
-                if (x !== 1 || y !== 1) matrix = multiply(matrix, scalingMatrix(x, y));
+                matrix = multiply(matrix, scalingMatrix(x, y));
                 break;
 
             default:
                 throw new Error(`Unknown transformation type: ${type}`);
         }
-    }
 
-    // Revert transform origin
-    if (origin.x !== 0 || origin.y !== 0) {
-        matrix = multiply(matrix, translationMatrix(-origin.x, -origin.y));
     }
 
     return matrix;
 }
 
-function svgStylesToAttributes(el, {
-    removeNameSpaced = true,
-    decimals = -1
-} = {}) {
-
-    let nodeName = el.nodeName.toLowerCase();
-    let attProps = getElAttributes(el);
-    let cssProps = getElStyleProps(el);
-
-    // normalize transform attributes
-    /*
-    if (attProps['transform']) {
-        console.log(`attProps['transform']`, attProps['transform']);
-    }
-    */
-
-    // merge properties
-    let props = {
-        ...attProps,
-        ...cssProps
-    };
-
-    // filter out obsolete properties
-    let propsFiltered = {};
-
-    // parse CSS transforms
-    let cssTrans = cssProps['transform'];
-
-    if (cssTrans) {
-        let transStr = `${cssTrans}`;
-        let transformObj = parseCSSTransform(transStr);
-        let matrix = getMatrix(transformObj);
-
-        // apply as SVG matrix transform
-        props['transform'] = `matrix(${Object.values(matrix).join(',')})`;
-    }
-
-    // can't be replaced with attributes
-    let cssOnlyProps = ['inline-size'];
-    let styleProps = [];
-
-    for (let prop in props) {
-
-        let value = props[prop];
-
-        // CSS variable
-        if (value && prop.startsWith('--') || cssOnlyProps.includes(prop) ||
-            (!removeNameSpaced && prop.startsWith('-'))) {
-            styleProps.push(`${prop}:${value}`);
-            continue
-        }
-
-        // check if property is valid
-        if (value && attLookup.atts[prop] &&
-            (attLookup.atts[prop] === '*' ||
-                attLookup.atts[prop].includes(nodeName) ||
-                !removeNameSpaced && (prop.includes(':'))
-            )
-        ) {
-            propsFiltered[prop] = value;
-        }
-
-        // remove property
-        el.removeAttribute(prop);
-
-    }
-
-    // apply filtered attributes
-    for (let prop in propsFiltered) {
-        let value = propsFiltered[prop];
-        el.setAttribute(prop, value);
-    }
-
-    if (styleProps.length) {
-        el.setAttribute('style', styleProps.join(';'));
-    }
-
-    return propsFiltered;
-
-}
-
-function parseInlineStyle(styleAtt = '') {
-
-    let props = {};
-    if (!styleAtt) return props;
-
-    let styleArr = styleAtt.split(';').filter(Boolean).map(prop => prop.trim());
-    let l = styleArr.length;
-    if (!l) return props;
-
-    for (let i = 0; l && i < l; i++) {
-        let style = styleArr[i];
-        let [prop, value] = style.split(':').filter(Boolean);
-        props[prop] = value;
-
-    }
-
-    return props
-}
-
-function getElStyleProps(el) {
-    let styleAtt = el.getAttribute('style');
-    let props = styleAtt ? parseInlineStyle(styleAtt) : {};
-    return props
-}
-
-function getElAttributes(el) {
-    let props = {};
-    let atts = [...el.attributes].map((att) => att.name);
-    let l = atts.length;
-    if (!l) return props;
-
-    for (let i = 0; i < l; i++) {
-        let att = atts[i];
-        let value = el.getAttribute(att);
-        props[att] = value;
-    }
-
-    return props;
-}
-
-/*
-function roundValue(value = '', decimals = -1) {
-    if (decimals < 0) return value;
-    value = value.replace(/["]/g, '').trim()
-    let valueNum = parseFloat(value);
-    let valueHasNumber = !isNaN(valueNum);
-    if (!valueHasNumber) return value;
-
-    let unit = valueHasNumber ? getUnit(value) : '';
-    if (valueHasNumber) value = `${valueNum.toFixed(decimals)}${unit}`;
-
-    return value;
-}
-*/
-
 function normalizePoly(pts, {
     toObject = true,
     toArray = false,
@@ -6474,6 +6768,522 @@ function getElBBox(el){
     return bb;
 }
 
+/**
+ * parse svg presentational attributes
+ * or CSS styles
+ */
+
+function parseStylesProperties(el, {
+    fontSize = 16,
+    removeNameSpaced = true,
+    autoRoundValues = false,
+    minifyRgbColors = false,
+    removeInvalid = true,
+    removeDefaults = true,
+    cleanUpStrokes = true,
+    normalizeTransforms = true,
+    exclude = [],
+    width = 0,
+    height = 0,
+} = {}) {
+
+    let nodeName = el.nodeName.toLowerCase();
+    let attProps = getSvgPresentationAtts(el);
+    let cssProps = getSvgCssProps(el);
+
+    /**
+     * merge props
+     * CSS has higher specificity
+     */
+    let props = {
+        ...attProps,
+        ...cssProps,
+    };
+
+    delete props['style'];
+    exclude.push('style');
+
+    let remove = ['style'];
+    let transformsStandalone = ['scale', 'translate', 'rotate'];
+
+    /**
+     * remove invalid properties 
+     * e.g font-family for <path>
+     */
+
+    if (removeInvalid || removeDefaults || removeNameSpaced) {
+        let propsFilteredObj = filterSvgElProps(nodeName, props, { removeDefaults, removeNameSpaced, exclude, cleanUpStrokes, include: transformsStandalone, cleanUpStrokes: false });
+        props = propsFilteredObj.propsFiltered;
+        remove.push(...propsFilteredObj.remove);
+    }
+
+    // sanitized prop array
+    let propArr = [];
+
+    for (let prop in props) {
+
+        let valueStr = props[prop];
+
+        // we parse the path data separately
+        if (prop === 'd' || prop.startsWith('data-')) {
+            continue;
+        }
+
+        let item = { prop, values: [] };
+
+        // 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') {
+            let transArr = [];
+
+            let transFormFunctions = valueStr.split(/(\w+)\(([^)]+)\)/).map(val => val.trim()).filter(Boolean);
+
+            for (let i = 1; i < transFormFunctions.length; i += 2) {
+                let fn = transFormFunctions[i - 1];
+                let isHorizontal = transHorizontal.includes(fn);
+                let isVertical = transVertical.includes(fn);
+                if (isHorizontal) fn = fn.replace('X', '');
+                if (isVertical) fn = fn.replace('Y', '');
+                let values = transFormFunctions[i].split(/,| /).filter(Boolean);
+                let transItem = { fn, values: [] };
+
+                for (let v = 0; v < values.length; v++) {
+                    let transValues = parseValue(values[v]);
+                    transItem.values.push(...transValues);
+                }
+
+                let defaultX = fn.startsWith('scale') ? 1 : 0;
+                let defaultY = fn.startsWith('scale') ? 1 : 0;
+
+                if (isHorizontal) transItem.values = [transItem.values[0], { value: defaultX, unit: '', numeric: true }];
+                if (isVertical) transItem.values = [{ value: defaultY, unit: '', numeric: true }, transItem.values[0]];
+
+                transArr.push(transItem);
+            }
+
+            if (transArr.length) {
+                propArr.push({ prop: 'transforms', values: transArr });
+            }
+        }
+
+        // other props
+        else {
+
+            item.values = parseValue(valueStr);
+
+        }
+
+        if (item.values.length) {
+            propArr.push(item);
+        }
+
+    }
+
+    /**
+     * normalize values to 
+     * user units
+     */
+
+    let propsNorm = { transformArr: [], matrix: null, transComponents: null };
+    let transFormOrigin = [];
+    let normalizedDiagonal = false;
+
+    for (let i = 0; i < propArr.length; i++) {
+        let item = propArr[i];
+        let { prop, values } = item;
+        let valsNew = [], valX = 0, valY = 0, unitX = '', unitY = '';
+
+        if (prop !== 'transforms') {
+
+            if (cleanUpStrokes && (prop === 'stroke-dasharray' || prop === 'stroke-dashoffset')) {
+                normalizedDiagonal = true;
+                for (let i = 0; i < values.length; i++) {
+                    let val = normalizeUnits(values[i].value, { unit: values[i].unit, width, height, normalizedDiagonal, fontSize });
+                    valsNew.push(val);
+                }
+            }
+
+            else if (prop === 'transform-origin') {
+
+                values.forEach((item, i) => {
+                    let val = item.value;
+                    if (val === 'left') values[i].value = 0;
+                    else if (val === 'right') values[i].value = width;
+                    else if (val === 'top') values[i].value = 0;
+                    else if (val === 'bottom') values[i].value = height;
+                    else if (val === 'center') values[i].value = '50%';
+                });
+
+                valX = values[0].value;
+                valY = values[1] ? values[1].value : valX;
+                unitX = values[0].unit;
+                unitY = values[1] ? values[1].unit : unitX;
+
+                // normalize units for matrix calculation
+                valX = normalizeUnits(valX, { unit: unitX, width, height, isHorizontal: true, fontSize });
+                valY = normalizeUnits(valY, { unit: unitY, width, height, isVertical: true, fontSize });
+                transFormOrigin.push(valX, valY);
+
+            } else {
+
+                for (let v = 0; v < values.length; v++) {
+                    let val = values[v];
+
+                    let unit = val.unit;
+                    let valAbs = val.value;
+                    let isNumeric = val.numeric;
+
+                    let isHorizontal = horizontalProps.includes(prop);
+                    let isVertical = verticalProps.includes(prop);
+
+                    if (unit) {
+                        if (prop === 'scale' && unit === '%') {
+                            valAbs = valAbs * 0.01;
+                        } else {
+                            if (prop === 'r') normalizedDiagonal = true;
+                            valAbs = normalizeUnits(val.value, { unit, width, height, isHorizontal, isVertical, normalizedDiagonal, fontSize });
+
+                            if (autoRoundValues && isNumeric) {
+                                valAbs = autoRound(valAbs);
+                            }
+
+                        }
+                    }
+                    valsNew.push(valAbs);
+                }
+            }
+
+            if (valsNew.length) propsNorm[prop] = valsNew;
+
+        }
+
+        // is transform properties and functions
+        else {
+
+            let transforms = values || [];
+
+            let len = transforms.length;
+            let transFormAllObj = [];
+
+            for (let t = 0; len && t < len; t++) {
+                let { fn, values } = transforms[t];
+                let valsN = [], unitX = '', unitY = '', transformFunctionArr = [];
+
+                // defaults
+                let valX = 0;
+                let valY = 0;
+                let transObj = {};
+
+                // console.log('!!!values', values);
+                if (fn === 'scale' || fn === 'translate') {
+                    valX = values[0].value;
+                    valY = values[1] ? values[1].value : valX;
+                    unitX = values[0].unit;
+                    unitY = values[1] ? values[1].unit : unitX;
+
+                    if (fn === 'scale') {
+                        valX = unitX === '%' ? valX * 0.01 : valX;
+                        valY = unitY === '%' ? valY * 0.01 : valY;
+                    } else {
+                        valX = normalizeUnits(valX, { unit: unitX, width, height, isHorizontal: true, fontSize });
+                        valY = normalizeUnits(valY, { unit: unitY, width, height, isVertical: true, fontSize });
+
+                    }
+                    valsN.push(valX, valY);
+
+                    transObj[fn] = valsN;
+                    transformFunctionArr.push(transObj);
+
+                }
+
+                if (fn === 'matrix') {
+                    valsN = values.map(val => val.value);
+                    transObj[fn] = valsN;
+                    transformFunctionArr.push(transObj);
+                }
+
+                if (fn === 'skew') {
+
+                    valX = values[0].value;
+                    unitX = values[0].unit;
+                    valY = values[1].value;
+                    unitY = values[1].unit;
+
+                    valX = normalizeUnits(valX, { unit: unitX, isHorizontal: true, fontSize });
+                    valY = normalizeUnits(valY, { unit: unitY, isVertical: true, fontSize });
+
+                    // normalize large angles
+                    valX = valX > 360 ? (valX % 360) : valX;
+                    valY = valY > 360 ? (valY % 360) : valY;
+
+                    valsN = [valX, valY];
+                    transObj[fn] = valsN;
+                    transformFunctionArr.push(transObj);
+
+                }
+
+                // SVG rotations may contain a transform origin
+                if (fn === 'rotate') {
+
+                    let angle = values[0].value;
+                    let unit = values[0].unit;
+                    angle = normalizeUnits(angle, { unit });
+
+                    let hasPivot = values.length === 3;
+                    let transOrigin = [];
+
+                    if (hasPivot) {
+
+                        let cx = values[1].value;
+                        let cy = values[2].value;
+                        transOrigin.push({ translate: [cx, cy] }, { translate: [-cx, -cy] });
+
+                    }
+
+                    transObj[fn] = [angle];
+
+                    if (transOrigin.length) {
+                        transformFunctionArr.push(transOrigin[0], transObj, transOrigin[1]);
+                    } else {
+                        transformFunctionArr.push(transObj);
+                    }
+                }
+
+                transFormAllObj.push(...transformFunctionArr);
+
+            }
+
+            propsNorm['transformArr'] = transFormAllObj;
+
+        }
+
+    }
+
+    // prepend standalone transforms before standards
+    let translate = propsNorm['translate'] !== undefined ? { translate: propsNorm['translate'] } : null;
+    let scale = propsNorm['scale'] !== undefined ? { scale: propsNorm['scale'] } : null;
+    let rotate = propsNorm['rotate'] !== undefined ? { rotate: propsNorm['rotate'] } : null;
+    let standaloneTransforms = [translate, rotate, scale].filter(Boolean);
+
+    if (standaloneTransforms.length) {
+        if (normalizeTransforms) remove.push('translate', 'scale', 'rotate');
+        propsNorm['transformArr'] = [...standaloneTransforms, ...propsNorm['transformArr']];
+    }
+
+    // replace transform-origin with translates
+
+    if (transFormOrigin.length && propsNorm['transformArr'] !== undefined) {
+        propsNorm['transformArr'] = [
+            { translate: [transFormOrigin[0], transFormOrigin[1]] },
+            ...propsNorm['transformArr'],
+            { translate: [-transFormOrigin[0], -transFormOrigin[1]] },
+        ];
+        if (normalizeTransforms) remove.push('transform-origin');
+    }
+
+    /**
+     * test run 
+     * apply parsed transforms
+     */
+    let { transformArr = [] } = propsNorm;
+
+    let transAtt = [];
+    let l = transformArr.length;
+    if (l) {
+        for (let i = 0; l && i < l; i++) {
+            let prop = transformArr[i];
+            let values = Object.values(prop).flat();
+            let name = Object.keys(prop)[0];
+            if (name === 'skew') {
+                if (values[0]) transAtt.push(`skewX(${values[0]})`);
+                if (values[1]) transAtt.push(`skewY(${values[1]})`);
+            } else {
+                transAtt.push(`${name}(${values.join(' ')})`);
+            }
+        }
+        // consolidate transforms to matrix
+
+    }
+
+    propsNorm.remove = remove;
+    propsNorm.type = nodeName;
+
+    return propsNorm
+
+}
+
+/**
+* consolidate transforms to matrix
+*/
+function addTransFormProps(propsObj = {}, transformArr = []) {
+    if (propsObj.transformArr === undefined || !transformArr.length) return;
+
+    // take existing array or custom
+    transformArr = transformArr.length ? transformArr : propsObj.transformArr;
+    let matrix = getMatrixFromTransform(transformArr);
+    propsObj['matrix'] = matrix;
+
+    let transComponents = qrDecomposeMatrix(matrix, 3);
+    propsObj.transComponents = transComponents;
+
+    return propsObj
+}
+
+/**
+ * filter out nonsense 
+ * presentation attributes or
+ * style properties not valid
+ * for element type
+ */
+function filterSvgElProps(elNodename = '', props = {}, {
+    removeInvalid = true,
+    removeDefaults = true,
+    allowDataAtts = true,
+    cleanUpStrokes = true,
+    include = ['id', 'class'],
+    exclude = [],
+} = {}) {
+    let propsFiltered = {};
+    let remove = [];
+
+    // allow defaults for nested
+
+    let noStrokeColor = cleanUpStrokes ? (props['stroke'] === undefined) : false;
+
+    for (let prop in props) {
+        let values = props[prop];
+        let value = Array.isArray(values) ? values[0] : values;
+
+        // filter out useless
+        let isValid = removeInvalid ?
+            (attLookup.atts[prop] ? attLookup.atts[prop].includes(elNodename) : false) :
+            false;
+
+        // remove null transforms
+        if(prop==='transform' && value==='matrix(1 0 0 1 0 0)') isValid = false;
+
+        // allow data attributes
+        let isDataAtt = allowDataAtts ? prop.startsWith('data-') : false;
+
+        // 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;
+
+        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(/,| /);
+
+    for (let i = 0; i < valArr.length; i++) {
+
+        let valStr = valArr[i];
+        let val = { value: null, unit: '', numeric: false };
+        let isNumeric = isNumericValue(valStr);
+        if (!isNumeric) {
+            val.value = valStr;
+        }
+        else if (isNumeric) {
+            let unit = getUnit(valStr);
+            let valNum = parseFloat(valStr);
+            val.value = valNum;
+            val.unit = unit;
+            val.numeric = true;
+        }
+        valArr[i] = val;
+    }
+
+    return valArr;
+}
+
+function getSvgCssProps(el) {
+    let styleAtt = el.getAttribute('style');
+    let props = styleAtt ? parseInlineCss(styleAtt) : {};
+    return props
+}
+
+function getSvgPresentationAtts(el) {
+    let props = {};
+    let atts = [...el.attributes].map((att) => att.name);
+    let l = atts.length;
+    if (!l) return props;
+
+    for (let i = 0; i < l; i++) {
+        let att = atts[i];
+        let value = el.getAttribute(att);
+
+        // test invalid transform functions
+        if (att === 'transform') {
+            let transformSan = [];
+            let transFormFunctions = value.split(/(\w+)\(([^)]+)\)/).map(val => val.trim()).filter(Boolean);
+
+            for (let i = 1; i < transFormFunctions.length; i += 2) {
+                let prop = transFormFunctions[i - 1];
+                let val = transFormFunctions[i];
+                let units = val.split(/,| /).map(val => getUnit(val.trim())).filter(Boolean);
+
+                // remove invalid transform function
+                if (!units.length) {
+                    transformSan.push(`${prop}(${val})`);
+                }
+            }
+            value = transformSan.join(' ');
+        }
+
+        props[att] = value.trim();
+    }
+
+    return props;
+}
+
+function parseInlineCss(styleAtt = '') {
+
+    let props = {};
+    if (!styleAtt) return props;
+
+    let styleArr = styleAtt.split(';').filter(Boolean).map(prop => prop.trim());
+    let l = styleArr.length;
+    if (!l) return props;
+
+    for (let i = 0; l && i < l; i++) {
+        let style = styleArr[i];
+        let [prop, value] = style.split(':').filter(Boolean);
+        props[prop] = value;
+    }
+
+    return props
+}
+
 function removeEmptySVGEls(svg) {
   let els = svg.querySelectorAll('g, defs');
   els.forEach(el => {
@@ -6495,6 +7305,12 @@ function cleanUpSVG(svgMarkup, {
   cleanupClip = true,
   addViewBox = false,
   addDimensions = false,
+  minifyRgbColors = false,
+
+  normalizeTransforms = true,
+  autoRoundValues = true,
+
+  unGroup = false,
 
   mergePaths = false,
   removeOffCanvas = true,
@@ -6506,16 +7322,15 @@ function cleanUpSVG(svgMarkup, {
   convert_rects = false,
   convert_ellipses = false,
   convert_poly = false,
-  convert_lines=false,
+  convert_lines = false,
 
   convertTransforms = false,
+  removeDefaults = true,
   cleanUpStrokes = true,
   decimals = -1,
   excludedEls = [],
 } = {}) {
 
-  attributesToGroup = cleanupSVGAtts ? true : false;
-
   // replace namespaced refs 
   if (fixHref) svgMarkup = svgMarkup.replaceAll("xlink:href=", "href=");
 
@@ -6526,16 +7341,57 @@ function cleanUpSVG(svgMarkup, {
   let viewBox = getViewBox(svg);
   let { x, y, width, height } = viewBox;
 
+  // get svg styles
+  let propOptions = {
+    width: width,
+    height: height,
+    normalizeTransforms,
+    removeDefaults: false,
+    cleanUpStrokes: false,
+    autoRoundValues,
+    minifyRgbColors,
+  };
+  let stylePropsSVG = parseStylesProperties(svg, propOptions);
+
+  // 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');
+  let groupProps = [];
+
+  groups.forEach(g => {
+    let stylePropsG = parseStylesProperties(g, propOptions);
+    groupProps.push(stylePropsG);
+    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);
+    });
+  });
+
   if (cleanupSVGAtts) {
 
-    let allowed = ['viewBox', 'xmlns', 'width', 'height', 'id', 'class', 'fill', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin'];
+    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);
   }
 
   // add viewBox
   if (addViewBox) addSvgViewBox(svg, { x, y, width, height });
   if (addDimensions) {
-    svg.setAttribute('width', width); 
+    svg.setAttribute('width', width);
     svg.setAttribute('height', height);
   }
 
@@ -6548,40 +7404,18 @@ function cleanUpSVG(svgMarkup, {
   // always remove scripts
   let removeEls = ['metadata', 'script', ...excludedEls];
 
-  let els = svg.querySelectorAll('*');
+  removeSVGEls(svg, { removeEls, removeNameSpaced });
 
   // an array of all elements' properties
   let svgElProps = [];
-
-  let geometryElements = ['polygon', 'polyline', 'line', 'rect', 'circle', 'ellipse'];
-
-  /** convert paths to shapes */
-  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;
-
-    });
-
-  }
+  let els = svg.querySelectorAll(`${renderedEls.join(', ')}`);
 
   for (let i = 0; i < els.length; i++) {
     let el = els[i];
 
     let name = el.nodeName.toLowerCase();
 
-    // convert shapes
-    if (shapeConvert === 'toPaths' && name !== 'path' && geometryElements.includes(name)) {
-      let path = shapeElToPath(el, { width, height, convert_rects, convert_ellipses, convert_poly, convert_lines });
-      el.replaceWith(path);
-      name = 'path';
-      el = path;
-
-    }
-
-    // remove hidden elements
+    // 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;
@@ -6595,85 +7429,214 @@ function cleanUpSVG(svgMarkup, {
      * convert relative or physical units
      * to user units
      */
+    let styleProps = parseStylesProperties(el, propOptions);
 
-    /*
-    let styleProps = parseStylesProperties(el, {
-      width:viewBox.width,
-      height:viewBox.height
-    })
-      */
+    // get parent styles
+    let { parentStyleProps = [] } = el;
+    let inheritedProps = {};
+    let transFormInherited = [];
 
-    /*
-    let propTest = normalizeUnits('50%',{width:200, height:100, isHorizontal:true})
-    console.log('propTest', propTest);
-    */
+    /** inherit transforms 
+     * and styles from group 
+     */
+    parentStyleProps.forEach(props => {
+      // transforms from groups are applied cumulatively
+      let { transformArr = [] } = props;
+      transFormInherited.push(...transformArr);
+
+      // merge
+      inheritedProps = {
+        ...inheritedProps,
+        ...props
+      };
+    });
+
+    transFormInherited = [...transFormInherited, ...styleProps.transformArr];
+    styleProps.transformArr = transFormInherited;
+
+    // merge with svg props
+    styleProps = {
+      ...stylePropsSVG,
+      ...inheritedProps,
+      ...styleProps
+    };
 
-    // styles to attributes
-    if (stylesToAttributes || attributesToGroup || mergePaths || cleanUpStrokes) {
-      let propsFiltered = svgStylesToAttributes(el, { removeNameSpaced, decimals });
+    // add combined transforms
+    addTransFormProps(styleProps, transFormInherited);
 
-      svgElProps.push({ el, name, idx: i, propsFiltered });
+    let { remove, matrix, transComponents } = styleProps;
+
+    // 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');
     }
 
-  }
+    // styles to atts
+    if (unGroup || convertTransforms || minifyRgbColors ) stylesToAttributes = true;
 
-  // remove stroke properties if no stroke color applied - common inkscape issue
-  if (cleanUpStrokes) {
+    if (stylesToAttributes) {
 
-    for (let item of svgElProps) {
+      /**
+       * normalize transforms
+       */
+      if (normalizeTransforms && matrix) {
+        let { rotate, scaleX, scaleY, skewX, translateX, translateY } = transComponents;
 
-      let { el, propsFiltered } = item;
-      let strokeProps = Object.keys(propsFiltered);
+        // 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;
 
-      if (!strokeProps.includes('stroke')) {
-        strokeAtts.forEach(att => {
-          el.removeAttribute(att);
+        if (!needsTrans && scalableByAtt.includes(name)) {
 
-          // delete in property object
-          if (item['propsFiltered'][att] !== undefined) delete item['propsFiltered'][att];
+          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.push('transform');
+
+          // scale props like stroke width or dash-array
+          styleProps = scaleProps(styleProps, { props: ['stroke-width', 'stroke-dasharray'], scale: scaleX });
+
+        } else {
+          el.setAttribute('transform', transComponents.matrixAtt);
+
+        }
+      }
+
+      /**
+       * apply consolidated 
+       * element attributes
+       */
+
+      let stylePropsFiltered = filterSvgElProps(name, styleProps,
+        { removeDefaults: true, cleanUpStrokes });
+
+      remove = [...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];
+        if (!stylesToAttributes && att === 'style') continue
+
+        el.removeAttribute(att);
+      }
+
+      /**
+       * remove group styles
+       * copied to children
+       * or remove nesting
+       */
+
+      if (unGroup) {
+        groups.forEach((g, i) => {
+          let children = [...g.children];
+
+          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);
+          });
         });
+
       }
+
+    } // endof style processing
+
+    /**
+     * 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;
     }
-  }
 
-  // group styles
-  if (attributesToGroup || mergePaths) {
-    moveAttributesToGroup(svgElProps, mergePaths);
-  }
+    // convert shapes to paths
+    if (shapeConvert === 'toPaths') {
 
-  if (removeDimensions) {
-    svg.removeAttribute('width');
-    svg.removeAttribute('height');
-  }
+      let { matrix = null, transComponents = null } = styleProps;
 
-  if (removeClassNames || removeIds) {
-    let att = removeClassNames ? 'class' : 'id';
-    let selector = `[${att}]`;
-    let els = svg.querySelectorAll(selector);
-    svg.removeAttribute(att);
-    els.forEach(el => {
-      el.removeAttribute(att);
-    });
-  }
+      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(' '));
+        });
+      }
 
-  /**
-   * refine properties 
-   * such as transforms or properties including units
-   */
+      // convert paths only if a matrix transform is required
+      if (matrix ? geometryEls.includes(name) : shapeEls.includes(name)) {
+
+        let path = shapeElToPath(el, { width, height, convert_rects, convert_ellipses, convert_poly, convert_lines, matrix });
+        el.replaceWith(path);
 
-  /*
-  for(let i=0; i<svgElProps.length; i++){
-    let item = svgElProps[i];
-    let {propsFiltered} = item;
+        name = 'path';
+        el = path;
 
-    for(let prop in propsFiltered){
+      }
+
+    }
 
-      let propOb = parseStyleProperty(prop, propsFiltered[prop])
+    // 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;
+      });
 
     }
 
-  }
-  */
+  }//endof element loop
 
   // remove futile clip-paths
   if (cleanupClip) removeFutileClipPaths(svg, { x, y, width, height });
@@ -6803,139 +7766,32 @@ function removeFutileClipPaths(svg, { x = 0, y = 0, width = 0, height = 0 } = {}
 
 }
 
-function moveAttributesToGroup(svgElProps = [], mergePaths = true) {
-
-  let combine = [[svgElProps[0]]];
-  let idx = 0;
-  let lastProps = '';
-  let l = svgElProps.length;
-  let itemsWithProps = svgElProps.filter(item => item.propstr);
-  let path0;
-
-  // merge paths without properties
-  let dCombined = '';
-  if (!itemsWithProps.length && mergePaths) {
-    let path0 = null;
-
-    for (let i = 0; i < l; i++) {
-      let item = svgElProps[i];
-      if (item.name !== 'path') continue;
-      let remove = true;
-
-      let path = item.el;
-
-      // set 1st path
-      if (!path0) {
-        path0 = path;
-        remove = false;
-      }
+function scaleProps(styleProps = {}, { props = [], scale = 1 } = {}) {
+  if (scale === 1 || !props.length) return props;
 
-      let d = item.propsFiltered.d;
-      let isAbs = d.startsWith('M');
-      let dAbs = isAbs ? d : parsePathDataString(d).pathData.map(com => `${com.type} ${com.values.join(' ')}`).join(' ');
+  for (let i = 0; i < props.length; i++) {
+    let prop = props[i];
 
-      dCombined += dAbs;
-
-      // delete path el
-      if (remove) path.remove();
-    }
-
-    if (path0) path0.setAttribute('d', dCombined);
-    return
-  }
-
-  // add to combine chunks
-  for (let i = 0; i < l; i++) {
-    let item = svgElProps[i];
-    let props = item.propsFiltered;
-    let propstr = [];
-    for (let prop in props) {
-      if (prop !== 'd' && prop !== 'id') {
-        propstr.push(`${prop}:${props[prop]}`);
-      }
-    }
-    propstr = propstr.join('_');
-    item.propstr = propstr;
-
-    if (l > 1 && propstr === lastProps) {
-      combine[idx].push(item);
-    } else {
-      if (l > 1 && combine[idx].length) {
-        combine.push([]);
-        idx++;
-      }
+    if (styleProps[prop] !== undefined) {
+      styleProps[prop] = styleProps[prop].map(val => val * scale);
     }
-    lastProps = propstr;
   }
+  return styleProps
+}
 
-  // add att groups
-  for (let i = 0; i < combine.length; i++) {
-    let group = combine[i];
-
-    if (group.length > 1) {
-      // 1st el
-      let el0 = group[0].el;
-      let props = group[0].propsFiltered;
-      let g = el0.parentNode.closest('g') ? el0.parentNode.closest('g') : null;
-
-      // wrap in group if not existent
-      if (!g) {
-        g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-        el0.parentNode.insertBefore(g, el0);
-        group.forEach(item => {
-          g.append(item.el);
-        });
-      }
-
-      let children = [...g.children];
-      for (let prop in props) {
-        if (prop !== 'd' && prop !== 'id') {
-          let value = props[prop];
-          // apply to parent group
-          g.setAttribute(prop, value);
-
-          // remove from children
-          children.forEach(el => {
-            if (el.getAttribute(prop) === value) {
-              el.removeAttribute(prop);
-            }
-          });
-        }
-
-        if (mergePaths) {
-          group = group.filter(Boolean);
-          let l = group.length;
-          // nothing to merge
-          if (l === 1) return group[0].el;
-
-          path0 = group[0].el;
-          let dCombined = group[0].propsFiltered.d;
-
-          for (let i = 1; i < l; i++) {
-            let item = group[i];
-            let path = item.el;
-            let d = item.propsFiltered.d;
-            let isAbs = d.startsWith('M');
-
-            let dAbs = isAbs ? d : parsePathDataString(d).pathData.map(com => `${com.type} ${com.values.join(' ')}`).join(' ');
-
-            console.log('dAbs', dAbs);
-
-            // concat pathdata string
-            dCombined += dAbs;
-
-            // delete path el
-            path.remove();
-          }
-
-          path0.setAttribute('d', dCombined);
-
-        }
-
-      }
+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 removeExcludedAttribues(el, allowed = ['viewBox', 'xmlns', 'width', 'height', 'id', 'class']) {
@@ -6947,13 +7803,21 @@ function removeExcludedAttribues(el, allowed = ['viewBox', 'xmlns', 'width', 'he
   });
 }
 
-function stringifySVG(svg, omitNamespace = false) {
+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")
@@ -6962,7 +7826,7 @@ function stringifySVG(svg, omitNamespace = false) {
 
     .replace(/> </g, '><')
     .trim()
-     // sanitize linebreaks within pathdata
+    // sanitize linebreaks within pathdata
     .replaceAll('&#10;', '\n');
 
   return markup
@@ -8811,7 +9675,7 @@ simplifyRDP=1,
         poly = poly.map(pt => { return [pt.x, pt.y] });
     }
     else if(polyFormat==='string'){
-        poly = poly.map(pt => { return [pt.x, pt.y].join(',') }).join(' ');
+        poly = poly.map(pt => { return [pt.x, pt.y].join(',') }).flat().join(' ');
     }
 
     return { pathData, poly }
@@ -9028,6 +9892,8 @@ function svgPathSimplify(input = '', {
     scaleTo = 0,
     crop = false,
     alignToOrigin = false,
+
+    // flatten transforms
     convertTransforms = false,
 
     decimals = 3,
@@ -9039,20 +9905,21 @@ function svgPathSimplify(input = '', {
     tolerance = 1,
     reversePath = false,
 
+    minifyRgbColors = false,
     removePrologue = true,
     removeHidden = true,
     removeUnused = true,
     cleanupDefs = true,
     cleanupClip = true,
     cleanupSVGAtts = true,
-    
+
     stylesToAttributes = false,
     fixHref = false,
     legacyHref = false,
     removeNameSpaced = true,
-    attributesToGroup = false,
-    removeOffCanvas = false,
 
+    removeOffCanvas = false,
+    unGroup = false,
     mergePaths = false,
 
     // shape conversions
@@ -9069,6 +9936,8 @@ function svgPathSimplify(input = '', {
     addViewBox = false,
     addDimensions = false,
 
+    removeComments = true,
+
 } = {}) {
 
     // clamp tolerance and scale
@@ -9147,10 +10016,18 @@ function svgPathSimplify(input = '', {
     // mode:1 – process complete svg DOM
     else {
 
+        // convert all shapes to paths
+        if (shapesToPaths) {
+            shapeConvert = true;
+            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
-
+            shapeConvert, convert_rects, convert_ellipses, convert_poly, convert_lines, minifyRgbColors, unGroup, convertTransforms
         }
         );
         svg = svgPropObject.svg;
@@ -9432,8 +10309,8 @@ function svgPathSimplify(input = '', {
 
         if (autoAccuracy) {
             accuracyArr = accuracyArr.sort().reverse();
-            let decimalsMid = accuracyArr[Math.floor(accuracyArr.length*0.5)];
-            decimals = Math.floor( (accuracyArr[0] + decimalsMid) * 0.5  );
+            let decimalsMid = accuracyArr[Math.floor(accuracyArr.length * 0.5)];
+            decimals = Math.floor((accuracyArr[0] + decimalsMid) * 0.5);
 
             pathOptions.decimals = decimals;
         }
@@ -9556,7 +10433,7 @@ function svgPathSimplify(input = '', {
             });
         }
 
-        svg = stringifySVG(svg, omitNamespace);
+        svg = stringifySVG(svg, { omitNamespace, removeComments });
 
         svgSizeOpt = svg.length;