svg-path-simplify 0.4.1 → 0.4.2

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

@@ -1726,6 +1726,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 +2068,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;
 
@@ -3901,6 +3909,7 @@ function convertPathData(pathData, {
     toShorthands = true,
     toLonghands = false,
     toRelative = true,
+    toMixed = false,
     toAbsolute = false,
     decimals = 3,
     arcToCubic = false,
@@ -3916,6 +3925,8 @@ function convertPathData(pathData, {
 
 } = {}) {
 
+    let pathDataAbs = [];
+
     // pathdata properties - test= true adds a manual test 
     if (testTypes) {
 
@@ -3943,12 +3954,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 +3996,9 @@ function convertPathData(pathData, {
  */
 
 function optimizeArcPathData(pathData = []) {
+
+    let remove =[];
+
     pathData.forEach((com, i) => {
         let { type, values } = com;
         if (type === 'A') {
@@ -3968,6 +4008,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 +4036,8 @@ function optimizeArcPathData(pathData = []) {
             }
         }
     });
+
+    if(remove.length) pathData = pathData.filter(Boolean);
     return pathData;
 }
 
@@ -5615,133 +5663,6 @@ 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;
-
-}
-
 function shapeElToPath(el, { width = 0,
     height = 0,
     convert_rects = false,
@@ -5920,6 +5841,133 @@ function getPathDataFromEl(el, {
 
 }
 
+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;
+
+}
+
 function pathDataRemoveColinear(pathData, {
     tolerance = 1,
 
@@ -6782,6 +6830,10 @@ function parseStylesProperties(el, {
     removeDefaults = true,
     cleanUpStrokes = true,
     normalizeTransforms = true,
+    removeIds=false,
+    removeClassNames=false,
+
+    include=[],
     exclude = [],
     width = 0,
     height = 0,
@@ -6812,7 +6864,7 @@ 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, { removeIds, removeClassNames, removeDefaults, removeNameSpaced, exclude, cleanUpStrokes, include: [...transformsStandalone, ...include], cleanUpStrokes: false });
         props = propsFilteredObj.propsFiltered;
         remove.push(...propsFilteredObj.remove);
     }
@@ -7146,13 +7198,21 @@ 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;
@@ -7167,25 +7227,35 @@ 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 isMeta = allowMeta && prop === 'title';
+        let isAria = allowAriaAtts && prop.startsWith('aria-');
 
         // filter out defaults
         let isDefault = removeDefaults ?
             (attLookup.defaults[prop] ? attLookup.defaults[prop] !== undefined && attLookup.defaults[prop].includes(value) : false) :
             false;
 
+        let isFutileStroke = noStrokeColor && strokeAtts.includes(prop);
+
+        if (isDefault || isDataAtt || isMeta || isAria || isFutileStroke) isValid = false;
+        if (include.includes(prop)) isValid = true;
+
+        /*
         if (isDataAtt || include.includes(prop)) isValid = true;
-        if (isDefault) isValid = false;
+        if (isDefault) isValid = false
         if (exclude.length && exclude.includes(prop)) isValid = false;
-        if (noStrokeColor && strokeAtts.includes(prop)) isValid = false;
+        if (noStrokeColor && strokeAtts.includes(prop)) isValid = false
+        */
 
         if (isValid) {
             propsFiltered[prop] = props[prop];
         }
         else {
+
             remove.push(prop);
         }
     }
@@ -7284,6 +7354,23 @@ function parseInlineCss(styleAtt = '') {
     return props
 }
 
+function toCamelCase(str) {
+  return str
+    .split(/[-| ]/)
+    .map((e,i) => i
+      ? e.charAt(0).toUpperCase() + e.slice(1).toLowerCase()
+      : e.toLowerCase()
+    )
+    .join('')
+}
+
+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
+}
+
 function removeEmptySVGEls(svg) {
   let els = svg.querySelectorAll('g, defs');
   els.forEach(el => {
@@ -7295,6 +7382,8 @@ function cleanUpSVG(svgMarkup, {
   removeHidden = true,
 
   stylesToAttributes = true,
+  attributesToGroup = false,
+
   removePrologue = true,
   removeIds = false,
   removeClassNames = false,
@@ -7314,9 +7403,14 @@ function cleanUpSVG(svgMarkup, {
 
   mergePaths = false,
   removeOffCanvas = true,
+
   cleanupSVGAtts = true,
   removeNameSpaced = true,
-  attributesToGroup = true,
+
+  // meta
+  allowMeta = false,
+  allowDataAtts = true,
+  allowAriaAtts = true,
 
   shapeConvert = false,
   convert_rects = false,
@@ -7331,6 +7425,8 @@ function cleanUpSVG(svgMarkup, {
   excludedEls = [],
 } = {}) {
 
+  if (attributesToGroup) stylesToAttributes = true;
+
   // replace namespaced refs 
   if (fixHref) svgMarkup = svgMarkup.replaceAll("xlink:href=", "href=");
 
@@ -7348,9 +7444,16 @@ function cleanUpSVG(svgMarkup, {
     normalizeTransforms,
     removeDefaults: false,
     cleanUpStrokes: false,
+    allowMeta,
+    allowDataAtts,
+    allowAriaAtts,
     autoRoundValues,
+    removeIds,
+    removeClassNames,
     minifyRgbColors,
   };
+
+  // root svg properties
   let stylePropsSVG = parseStylesProperties(svg, propOptions);
 
   // add svg font size for scaling relative
@@ -7362,11 +7465,9 @@ function cleanUpSVG(svgMarkup, {
    * 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
@@ -7380,12 +7481,29 @@ function cleanUpSVG(svgMarkup, {
 
   if (cleanupSVGAtts) {
 
-    let allowed = ['viewBox', 'xmlns', 'width', 'height', 'id', 'class'];
+    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);
+    removeExcludedAttribues(svg, { allowed, allowMeta, allowAriaAtts, allowDataAtts });
+  }
+
+  // remove meta
+  if (!allowMeta) {
+    let metaEls = svg.querySelectorAll('meta, metadata, desc, title');
+    metaEls.forEach(meta => {
+      meta.remove();
+    });
   }
 
   // add viewBox
@@ -7402,9 +7520,10 @@ function cleanUpSVG(svgMarkup, {
   if (removeOffCanvas) removeOffCanvasEls(svg, { x, y, width, height });
 
   // always remove scripts
-  let removeEls = ['metadata', 'script', ...excludedEls];
 
-  removeSVGEls(svg, { removeEls, removeNameSpaced });
+  let removeEls = ['script', ...excludedEls];
+
+  removeSVGEls(svg, { remove: removeEls, removeNameSpaced });
 
   // an array of all elements' properties
   let svgElProps = [];
@@ -7430,6 +7549,7 @@ function cleanUpSVG(svgMarkup, {
      * to user units
      */
     let styleProps = parseStylesProperties(el, propOptions);
+    let stylePropsFiltered = {};
 
     // get parent styles
     let { parentStyleProps = [] } = el;
@@ -7455,27 +7575,25 @@ function cleanUpSVG(svgMarkup, {
     styleProps.transformArr = transFormInherited;
 
     // merge with svg props
+
     styleProps = {
       ...stylePropsSVG,
       ...inheritedProps,
       ...styleProps
     };
 
+    // dont inherit class
+    if (stylePropsSVG['class'] === styleProps['class']) {
+      delete styleProps['class'];
+    }
+
     // add combined transforms
     addTransFormProps(styleProps, transFormInherited);
 
     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;
+    if (unGroup || convertTransforms || minifyRgbColors) stylesToAttributes = true;
 
     if (stylesToAttributes) {
 
@@ -7498,7 +7616,6 @@ function cleanUpSVG(svgMarkup, {
             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];
 
@@ -7520,6 +7637,12 @@ function cleanUpSVG(svgMarkup, {
             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
           remove.push('transform');
 
           // scale props like stroke width or dash-array
@@ -7535,17 +7658,16 @@ function cleanUpSVG(svgMarkup, {
        * apply consolidated 
        * element attributes
        */
-
-      let stylePropsFiltered = filterSvgElProps(name, styleProps,
-        { removeDefaults: true, cleanUpStrokes });
+      stylePropsFiltered = filterSvgElProps(name, styleProps,
+        { removeDefaults: true, cleanUpStrokes, allowMeta, allowAriaAtts, allowDataAtts, removeIds });
 
       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
@@ -7573,9 +7695,19 @@ function cleanUpSVG(svgMarkup, {
         });
       } else {
         groups.forEach((g, i) => {
-          let atts = [...Object.keys(groupProps[i]), 'style', 'transform'];
+
+          let atts = Object.keys(getElementAtts(g));
+
           atts.forEach(att => {
-            g.removeAttribute(att);
+
+            let isData = !allowDataAtts && att.startsWith('data-');
+            let isAria = !allowAriaAtts && att.startsWith('aria-');
+
+            remove.push('transform', 'style');
+
+            if (remove.includes(att) || isData || isAria) {
+              g.removeAttribute(att);
+            }
           });
         });
 
@@ -7619,7 +7751,7 @@ function cleanUpSVG(svgMarkup, {
         el.replaceWith(path);
 
         name = 'path';
-        el = path;
+        el = path; // required for node
 
       }
 
@@ -7630,14 +7762,217 @@ function cleanUpSVG(svgMarkup, {
       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;
       });
 
     }
 
+    /**
+     * 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];
+
+        let propShort = toShortStr(prop);
+        let valShort = toShortStr(val);
+        let propStr = `${propShort}-${valShort}`;
+
+        // store in node property
+        if (!el.styleSet) el.styleSet = new Set();
+        el.styleSet.add(propStr);
+      }
+
+    }
+
   }//endof element loop
 
+  /** 
+   * merge paths with same styles
+   */
+  if (mergePaths) {
+    let paths = svg.querySelectorAll('path');
+    let len = paths.length;
+
+    if (len) {
+      let path0 = paths[0];
+      let d0 = path0.getAttribute('d');
+      let stylePrev = path0.styleSet !== undefined ? [...path0.styleSet].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');
+
+        if (isSibling && style === stylePrev) {
+          let dAbs = isAbs ? d : parsePathDataString(d).pathData.map(com => `${com.type} ${com.values.join(' ')}`).join(' ');
+
+          d0 += dAbs;
+          path0.setAttribute('d', d0);
+          path.remove();
+
+        } else {
+          path0 = path;
+          d0 = isAbs ? d : parsePathDataString(d).pathData.map(com => `${com.type} ${com.values.join(' ')}`).join(' ');
+        }
+
+        // update style
+        stylePrev = style;
+      }
+    }
+
+    /** 
+    * shared styles to group
+    */
+
+    if (attributesToGroup) {
+      let els = svg.querySelectorAll(geometryEls.join(', '));
+      let len = els.length;
+
+      let el0 = els[0] || null;
+      let stylePrev = el0.styleSet !== undefined ? [...el0.styleSet].join('_') : '';
+
+      // all props
+      let allProps = {};
+
+      // find attributes shared by all
+      let globalAtts = [];
+
+      if (len) {
+
+        let groups = [[el0]];
+        let idx = 0;
+        let elPrev = el0;
+
+        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 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]);
+            }
+          }
+        }
+
+        // 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('_') : '';
+
+          // 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;
+
+        }// endof el loop
+
+        // 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');
+
+          if (children.length === 1) {
+            if (globalAtts.length) {
+              let globalTransform = globalAtts.includes('transform');
+              if (globalTransform) {
+
+                groupEl.setAttribute('transform', atts['transform']);
+              }
+
+              for (let att in atts) {
+
+                if (globalAtts.includes(att)) {
+                  child0.removeAttribute(att);
+                }
+              }
+            }
+            continue
+          }
+
+          // create new group
+          if (!groupEl) {
+
+            groupEl = document.createElementNS(svgNs, 'g');
+            child0.parentNode.insertBefore(groupEl, child0);
+            groupEl.append(...children);
+          }
+
+          // move attributes to group
+          for (let att in atts) {
+            let val = atts[att];
+
+            if (!geometryProps.includes(att)) {
+              if (!globalAtts.includes(att) || att === 'transform') {
+                groupEl.setAttribute(att, val);
+              }
+              children.forEach(child => {
+                child.removeAttribute(att);
+              });
+            }
+          }
+
+        } // endof groups
+
+      }
+    }
+
+  }
+
   // remove futile clip-paths
   if (cleanupClip) removeFutileClipPaths(svg, { x, y, width, height });
 
@@ -7783,21 +8118,41 @@ function removeSVGEls(svg, {
   remove = ['metadata', 'script'],
   removeNameSpaced = true,
 } = {}) {
+
   let els = svg.querySelectorAll('*');
+
+  let allowMeta = !remove.includes('metadata');
+
   els.forEach(el => {
     let nodeName = el.nodeName;
-    if ((removeNameSpaced && nodeName.includes(':')) ||
-      remove.includes(nodeName)
+    let isMeta = allowMeta && el.closest('metadata');
+    if (
+      !isMeta &&
+      ((removeNameSpaced && nodeName.includes(':')) ||
+        remove.includes(nodeName))
     ) {
       el.remove();
     }
   });
 }
 
-function removeExcludedAttribues(el, allowed = ['viewBox', 'xmlns', 'width', 'height', 'id', 'class']) {
+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) => {
-    if (!allowed.includes(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);
     }
   });
@@ -9840,6 +10195,7 @@ function svgPathSimplify(input = '', {
 
     toAbsolute = false,
     toRelative = true,
+    toMixed = false,
     toShorthands = true,
     toLonghands = false,
 
@@ -9905,7 +10261,7 @@ function svgPathSimplify(input = '', {
     tolerance = 1,
     reversePath = false,
 
-    minifyRgbColors = false,
+    minifyRgbColors = true,
     removePrologue = true,
     removeHidden = true,
     removeUnused = true,
@@ -9918,6 +10274,11 @@ function svgPathSimplify(input = '', {
     legacyHref = false,
     removeNameSpaced = true,
 
+    allowMeta = false,
+    allowDataAtts = true,
+    allowAriaAtts = true,
+
+    attributesToGroup = false,
     removeOffCanvas = false,
     unGroup = false,
     mergePaths = false,
@@ -10018,7 +10379,7 @@ function svgPathSimplify(input = '', {
 
         // convert all shapes to paths
         if (shapesToPaths) {
-            shapeConvert = true;
+            shapeConvert = 'toPaths';
             convert_rects = true;
             convert_ellipses = true;
             convert_poly = true;
@@ -10027,7 +10388,8 @@ function svgPathSimplify(input = '', {
 
         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
+            shapeConvert, convert_rects, convert_ellipses, convert_poly, convert_lines, minifyRgbColors, unGroup, convertTransforms,
+            allowMeta, allowDataAtts, allowAriaAtts, allowMeta, attributesToGroup
         }
         );
         svg = svgPropObject.svg;
@@ -10052,6 +10414,7 @@ function svgPathSimplify(input = '', {
     // SVG optimization options
     let pathOptions = {
         toRelative,
+        toMixed,
         toAbsolute,
         toLonghands,
         toShorthands,