svg-path-simplify 0.2.4 → 0.2.7

package/dist/svg-path-simplify.js

@@ -162,7 +162,7 @@
    * http://jsfiddle.net/justin_c_rounds/Gd2S2/light/
    */
 
-  function checkLineIntersection(p1 = null, p2 = null, p3 = null, p4 = null, exact = true, debug = false) {
+  function checkLineIntersection(p1 = null, p2 = null, p3 = null, p4 = null, exact = true, respectDirection = false, debug = false) {
       // if the lines intersect, the result contains the x and y of the intersection (treating the lines as infinite) and booleans for whether line segment 1 or line segment 2 contain the point
       let denominator, a, b, numerator1, numerator2;
       let intersectionPoint = {};
@@ -174,7 +174,9 @@
 
       try {
           denominator = ((p4.y - p3.y) * (p2.x - p1.x)) - ((p4.x - p3.x) * (p2.y - p1.y));
-          if (denominator == 0) {
+
+          // parallel or colinear
+          if (denominator === 0) {
               return false;
           }
       } catch {
@@ -203,8 +205,13 @@
 
       }
 
-      if (exact && !intersection) {
+      // direction
+      if (!exact && respectDirection && ((a > 0 && b < 0) || (a < 0 && b > 0))) {
+          intersection = false;
+          return false
+      }
 
+      if (exact && !intersection) {
           return false;
       }
 
@@ -213,6 +220,44 @@
       return intersectionPoint;
   }
 
+  /** Get relationship between a point and a polygon using ray-casting algorithm
+  * based on timepp's answer
+  * https://stackoverflow.com/questions/217578/how-can-i-determine-whether-a-2d-point-is-within-a-polygon#63436180
+  */
+  function isPointInPolygon(pt, polygon, bb, skipBB = false) {
+      const between = (p, a, b) => (p >= a && p <= b) || (p <= a && p >= b);
+      let inside = false;
+
+      // not in bbox - quit || no bbox defined
+      if (!skipBB || !bb.bottom) {
+          if (bb.left > pt.x || bb.top > pt.y || bb.bottom < pt.y || bb.right < pt.x) {
+              return false;
+          }
+      }
+
+      let l=polygon.length;
+      for (let i = l - 1, j = 0; j < l; i = j, j++) {
+          const A = polygon[i];
+          const B = polygon[j];
+          // corner cases
+          if ((pt.x == A.x && pt.y == A.y) || (pt.x == B.x && pt.y == B.y))
+              return true;
+          if (A.y == B.y && pt.y == A.y && between(pt.x, A.x, B.x)) return true;
+          if (between(pt.y, A.y, B.y)) {
+              /** 
+               * if pt inside the vertical range filter out "ray pass vertex" problem 
+               * by treating the line a little lower
+               */ 
+              if ((pt.y == A.y && B.y >= A.y) || (pt.y == B.y && A.y >= B.y)) continue;
+              // calc cross product `ptA X ptB`, pt lays on left side of AB if c > 0
+              const c = (A.x - pt.x) * (B.y - pt.y) - (B.x - pt.x) * (A.y - pt.y);
+              if (c == 0) return true;
+              if (A.y < B.y == c > 0) inside = !inside;
+          }
+      }
+      return inside ? true : false;
+  }
+
   /**
   * Linear  interpolation (LERP) helper
   */
@@ -2372,6 +2417,7 @@
       }
 
       let dim_min = dims.sort();
+
       let sliceIdx = Math.ceil(dim_min.length / 8);
       dim_min = dim_min.slice(0, sliceIdx);
       let minVal = dim_min.reduce((a, b) => a + b, 0) / sliceIdx;
@@ -2475,6 +2521,7 @@
               (type === 'C' ? [p0, cp1, cp2, p] : [p0, cp1, p]) :
               ([p0, p]);
           let thresholdLength = dimA * 0.1;
+          let threshold = thresholdLength*0.01;
 
           // bezier types
           let isBezier = type === 'Q' || type === 'C';
@@ -2491,10 +2538,12 @@
               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 && dx > 0;
-              let vertical = dx === 0 && dy > 0;
+              let horizontal = (dy === 0 || dy<threshold ) && dx > 0;
+              let vertical = (dx === 0 || dx<threshold ) && dy > 0;
 
-              if (horizontal || vertical) hasExtremes = true;
+              if (horizontal || vertical) {
+                  hasExtremes = true;
+              }
 
               // is extreme relative to bounding box 
               if ((p.x === left || p.y === top || p.x === right || p.y === bottom)) {
@@ -2506,7 +2555,7 @@
                   let couldHaveExtremes = bezierhasExtreme(null, commandPts);
                   if (couldHaveExtremes) {
                       let tArr = getTatAngles(commandPts);
-                      if (tArr.length && (tArr[0] > 0.15)) {
+                      if (tArr.length && (tArr[0] > 0.2)) {
                           hasExtremes = true;
                       }
                   }
@@ -3110,7 +3159,7 @@
               let dx1 = (p0.x - cpPrev.x);
               let dy1 = (p0.y - cpPrev.y);
 
-              maxDist = getDistManhattan(cpPrev, cpFirst) * 0.05;
+              maxDist = getDistManhattan(cpPrev, cpFirst) * 0.025;
 
               // reflected cp
               let cpR = { x: cpPrev.x + dx1 * 2, y: cpPrev.y + dy1 * 2 };
@@ -3898,12 +3947,14 @@
       let attributes = [...el.attributes].map(att => att.name);
 
       let pathN = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+
       pathN.setAttribute('d', d);
 
-      let exclude = ['x', 'y', 'cx', 'cy', 'dx', 'dy', 'r', 'rx', 'ry', 'width', 'height', 'points'];
+      let exclude = ['x', 'y', 'x1', 'y1', 'x2', 'y2', 'cx', 'cy', 'dx', 'dy', 'r', 'rx', 'ry', 'width', 'height', 'points'];
 
       attributes.forEach(att => {
           if (!exclude.includes(att)) {
+
               let val = el.getAttribute(att);
               pathN.setAttribute(att, val);
           }
@@ -3917,7 +3968,7 @@
   function getPathDataFromEl(el, stringify = false) {
 
       let pathData = [];
-      let type = el.nodeName;
+      let type = el.nodeName.toLowerCase();
       let atts, attNames, d, x, y, width, height, r, rx, ry, cx, cy, x1, x2, y1, y2;
 
       // convert relative or absolute units 
@@ -4540,6 +4591,125 @@
       return pathData;
   }
 
+  /**
+   * reverse pathdata
+   * make sure all command coordinates are absolute and
+   * shorthands are converted to long notation
+   */
+  function reversePathData(pathData, {
+      arcToCubic = false,
+      quadraticToCubic = false,
+      toClockwise = false,
+      returnD = false
+  } = {}) {
+
+      /**
+       * Add closing lineto:
+       * needed for path reversing or adding points
+       */
+      const addClosePathLineto = (pathData) => {
+          let closed = pathData[pathData.length - 1].type.toLowerCase() === "z";
+          let M = pathData[0];
+          let [x0, y0] = [M.values[0], M.values[1]];
+          let lastCom = closed ? pathData[pathData.length - 2] : pathData[pathData.length - 1];
+          let [xE, yE] = [lastCom.values[lastCom.values.length - 2], lastCom.values[lastCom.values.length - 1]];
+
+          if (closed && (x0 != xE || y0 != yE)) {
+
+              pathData.pop();
+              pathData.push(
+                  {
+                      type: "L",
+                      values: [x0, y0]
+                  },
+                  {
+                      type: "Z",
+                      values: []
+                  }
+              );
+          }
+          return pathData;
+      };
+
+      // helper to rearrange control points for all command types
+      const reverseControlPoints = (type, values) => {
+          let controlPoints = [];
+          let endPoints = [];
+          if (type !== "A") {
+              for (let p = 0; p < values.length; p += 2) {
+                  controlPoints.push([values[p], values[p + 1]]);
+              }
+              endPoints = controlPoints.pop();
+              controlPoints.reverse();
+          }
+          // is arc
+          else {
+
+              let sweep = values[4] == 0 ? 1 : 0;
+              controlPoints = [values[0], values[1], values[2], values[3], sweep];
+              endPoints = [values[5], values[6]];
+          }
+          return { controlPoints, endPoints };
+      };
+
+      // start compiling new path data
+      let pathDataNew = [];
+
+      let closed =
+          pathData[pathData.length - 1].type.toLowerCase() === "z" ? true : false;
+      if (closed) {
+          // add lineto closing space between Z and M
+          pathData = addClosePathLineto(pathData);
+          // remove Z closepath
+          pathData.pop();
+      }
+
+      // define last point as new M if path isn't closed
+      let valuesLast = pathData[pathData.length - 1].values;
+      let valuesLastL = valuesLast.length;
+      let M = closed
+          ? pathData[0]
+          : {
+              type: "M",
+              values: [valuesLast[valuesLastL - 2], valuesLast[valuesLastL - 1]]
+          };
+      // starting M stays the same – unless the path is not closed
+      pathDataNew.push(M);
+
+      // reverse path data command order for processing
+      pathData.reverse();
+      for (let i = 1; i < pathData.length; i++) {
+          let com = pathData[i];
+          let type = com.type;
+          let values = com.values;
+          let comPrev = pathData[i - 1];
+          let typePrev = comPrev.type;
+          let valuesPrev = comPrev.values;
+
+          // get reversed control points and new end coordinates
+          let controlPointsPrev = reverseControlPoints(typePrev, valuesPrev).controlPoints;
+          let endPoints = reverseControlPoints(type, values).endPoints;
+
+          // create new path data
+          let newValues = [];
+          newValues = [controlPointsPrev, endPoints].flat();
+          pathDataNew.push({
+              type: typePrev,
+              values: newValues.flat()
+          });
+      }
+
+      // add previously removed Z close path
+      if (closed) {
+          pathDataNew.push({
+              type: "z",
+              values: []
+          });
+      }
+
+      return pathDataNew;
+  }
+
   function simplifyRDP(pts, {
       quality = 0.9,
       width = 0,
@@ -6290,6 +6460,8 @@
               ...textEls,
           ],
 
+          "fill-rule": ["svg", "g", "path", "polygon",  "text", "textPath"],
+
           opacity: [
               "svg",
               "g",
@@ -6654,26 +6826,30 @@
     removeUnused = true,
     stylesToAttributes = true,
     removePrologue = true,
+    removeIds = false,
+    removeClassNames = false,
+    removeDimensions = false,
     fixHref = true,
     mergePaths = false,
     cleanupSVGAtts = true,
     removeNameSpaced = true,
     attributesToGroup = true,
+    shapesToPaths = false,
     decimals = -1,
     excludedEls = [],
   } = {}) {
 
-    svgMarkup = cleanSvgPrologue(svgMarkup);
+    attributesToGroup = cleanupSVGAtts ? true : false;
 
     // replace namespaced refs 
     if (fixHref) svgMarkup = svgMarkup.replaceAll("xlink:href=", "href=");
 
     let svg = new DOMParser()
-
       .parseFromString(svgMarkup, "text/html")
       .querySelector("svg");
 
     if (cleanupSVGAtts) {
+
       let allowed = ['viewBox', 'xmlns', 'width', 'height', 'id', 'class', 'fill', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin'];
       removeExcludedAttribues(svg, allowed);
 
@@ -6685,11 +6861,22 @@
     let els = svg.querySelectorAll('*');
     let elProps = [];
 
+    let geometryElements = ['polygon', 'polyline', 'line', 'rect', 'circle', 'ellipse'];
+
     for (let i = 0; i < els.length; i++) {
       let el = els[i];
 
       let name = el.nodeName.toLowerCase();
 
+      // convert shapes
+      if (shapesToPaths && name !== 'path' && geometryElements.includes(name)) {
+        let path = shapeElToPath(el);
+        el.replaceWith(path);
+        name = 'path';
+        el = path;
+
+      }
+
       // remove hidden elements
       let style = el.getAttribute('style') || '';
       let isHiddenByStyle = style ? style.trim().includes('display:none') : false;
@@ -6709,11 +6896,25 @@
     }
 
     // group styles
-
     if (attributesToGroup || mergePaths) {
       moveAttributesToGroup(elProps, mergePaths);
     }
 
+    if (removeDimensions) {
+      svg.removeAttribute('width');
+      svg.removeAttribute('height');
+    }
+
+    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 (returnDom) return svg
     let markup = stringifySVG(svg);
 
@@ -6725,11 +6926,39 @@
     let combine = [[elProps[0]]];
     let idx = 0;
     let lastProps = '';
-    for (let i = 0; i < elProps.length; i++) {
+    let l = elProps.length;
+    let itemsWithProps = elProps.filter(item => item.propstr);
+    let path0;
+
+    // merge paths without properties
+    if (!itemsWithProps.length && mergePaths) {
+      let item0 = elProps[0];
+      path0 = item0.el;
+      let dCombined = item0.propsFiltered.d;
+
+      for (let i = 1; i < l; i++) {
+        let item = elProps[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(' ');
+
+        dCombined += dAbs;
+
+        // delete path el
+        path.remove();
+      }
+
+      path0.setAttribute('d', dCombined);
+      return
+    }
+
+    // add to combine chunks
+    for (let i = 0; i < l; i++) {
       let item = elProps[i];
       let props = item.propsFiltered;
       let propstr = [];
-
       for (let prop in props) {
         if (prop !== 'd' && prop !== 'id') {
           propstr.push(`${prop}:${props[prop]}`);
@@ -6738,16 +6967,15 @@
       propstr = propstr.join('_');
       item.propstr = propstr;
 
-      if (propstr === lastProps) {
+      if (l > 1 && propstr === lastProps) {
         combine[idx].push(item);
       } else {
-        if (combine[idx].length) {
+        if (l > 1 && combine[idx].length) {
           combine.push([]);
           idx++;
         }
       }
       lastProps = propstr;
-
     }
 
     // add att groups
@@ -6785,10 +7013,15 @@
           }
 
           if (mergePaths) {
-            let path0 = group[0].el;
+            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 < group.length; i++) {
+            for (let i = 1; i < l; i++) {
               let item = group[i];
               let path = item.el;
               let d = item.propsFiltered.d;
@@ -6813,20 +7046,6 @@
 
   }
 
-  function cleanSvgPrologue(svgString) {
-    return (
-      svgString
-        // Remove XML prologues like <?xml ... ?>
-        .replace(/<\?xml[\s\S]*?\?>/gi, "")
-        // Remove DOCTYPE declarations
-        .replace(/<!DOCTYPE[\s\S]*?>/gi, "")
-        // Remove comments <!-- ... -->
-        .replace(/<!--[\s\S]*?-->/g, "")
-        // Trim extra whitespace
-        .trim()
-    );
-  }
-
   function removeExcludedAttribues(el, allowed = ['viewBox', 'xmlns', 'width', 'height', 'id', 'class']) {
     let atts = [...el.attributes].map((att) => att.name);
     atts.forEach((att) => {
@@ -6836,13 +7055,22 @@
     });
   }
 
-  function stringifySVG(svg) {
+  function stringifySVG(svg, omitNamespace = false) {
     let markup = new XMLSerializer().serializeToString(svg);
+
+    if (omitNamespace) {
+      markup = markup.replaceAll('xmlns="http://www.w3.org/2000/svg"', '');
+    }
+
     markup = markup
       .replace(/\t/g, "")
       .replace(/[\n\r|]/g, "\n")
       .replace(/\n\s*\n/g, '\n')
-      .replace(/ +/g, ' ');
+      .replace(/ +/g, ' ')
+
+      .replace(/> </g, '><')
+      .trim();
+      
 
     return markup
   }
@@ -7409,296 +7637,14 @@
       return viewBox
   }
 
-  function redrawPathData(pathData, {
-      tolerance = 1
-
-  } = {}) {
-      let chunks = [];
-      let chunk = [];
-
-      let l = pathData.length;
-
-      for (let i = 1; i < l; i++) {
-          let com = pathData[i];
-          let { type, values, p0, cp1 = null, cp2 = null, p, extreme = null, semiExtreme = null, corner = null, directionChange } = com;
-
-          let comN = pathData[i + 1] || null;
-
-          /*
-          if (extreme || corner || semiExtreme || directionChange) {
-
-              if (extreme) renderPoint(markers, com.p, 'cyan', '1%', '0.5')
-
-              if (semiExtreme) renderPoint(markers, com.p, 'orange', '1%', '0.5')
-              if (corner) renderPoint(markers, com.p, 'magenta', '1.75%', '0.5')
-          }
-          */
-
-          if (extreme || corner || (comN && comN.type !== type)) {
-              chunk.push(com);
-              chunks.push(chunk);
-              chunk = [];
-              continue
-          }
-
-          chunk.push(com);
-
-      }
-
-      console.log('!!!chunks', chunks);
-
-      renderChunks(chunks);
-
-      // cleanup chunks
-
-      let chunksLen = chunks.length;
-
-      
-
-      for (let c = 0; c < chunksLen; c++) {
-          let chunk = chunks[c];
-          let chunkN = chunks[c + 1] || null;
-
-          let chunkLen = chunk.length;
-
-          if (chunkLen === 1 && chunkN && chunkN[0].type === 'C') ;
-
-      }
-
-      chunks = chunks.filter(Boolean);
-
-      // test render
-
-      let pathDataC = [pathData[0]];
-
-      /**
-       * combine chunk based
-       */
-      for (let c = 0; c < chunks.length; c++) {
-          let chunk = chunks[c];
-          let chunkLen = chunk.length;
-          let comChunk0 = chunk[0];
-          let comChunk1 = chunk[chunkLen - 1];
-          let thresh = getDistManhattan(comChunk0.p0, comChunk1.p) * 0.05;
-
-          // commands in chunk
-          for (let i = 0, l = chunkLen; i < l; i++) {
-              let com = chunk[i];
-              chunk[i + 1];
-              chunk[l - 1];
-
-              let isBezier = comChunk0.type === 'C' && comChunk1.type === 'C';
-
-              let { type, values, p0, cp1 = null, cp2 = null, p = null, extreme, semiExtreme = null, corner = null } = com;
-
-              let pI1 = null, pI2 = null;
-              let cp1_S = null, cp2_S = null;
-              let cp2_M = null;
-              let cp1_M = null;
-              let pathDataS = [];
-              let tSplit = 0.666;
-              let comMid = null;
-
-              // 0. adjust Extreme cpts
-              if (isBezier) {
-                  let dx1 = Math.abs(comChunk0.p0.x - comChunk0.cp1.x);
-                  let dy1 = Math.abs(comChunk0.p0.y - comChunk0.cp1.y);
-                  let dx2 = Math.abs(comChunk1.p.x - comChunk1.cp2.x);
-                  let dy2 = Math.abs(comChunk1.p.y - comChunk1.cp2.y);
-
-                  let vertical1 = dx1 < thresh && dx1 < dy1;
-                  let horizontal1 = dy1 < thresh && dx1 > dy1;
-
-                  let vertical2 = dx2 < thresh && dx2 < dy2;
-                  let horizontal2 = dy2 < thresh && dx2 > dy2;
-
-                  if (horizontal1) comChunk0.cp1.y = comChunk0.p0.y;
-                  if (horizontal2) comChunk1.cp2.y = comChunk1.p.y;
-                  if (vertical1) comChunk0.cp1.x = comChunk0.p0.x;
-                  if (vertical2) comChunk1.cp2.x = comChunk1.p.x;
-              }
-
-              // test render - original pathdata
-              let pathDataChunk = [
-                  { type: 'M', values: [com.p0.x, com.p0.y] },
-                  { type, values },
-              ];
-
-              pathDataToD(pathDataChunk);
-              // renderPath(markers, d, stroke, '1%', '0.5')
-              //  continue
-              /*
-
-              */
-
-              // 1. only one command in chunk - nothing to simplify
-              if (chunkLen === 1 || type !== 'C') {
-                  pathDataC.push(com);
-              }
-
-              // 2. could be simplified
-              else {
-                  // 2.1 has semi extreme - extrapolate
-                  // 2.2 has sdirection change
-                  let semiExtremes = chunk.filter(ch => ch.semiExtreme);
-                  let comsDirectionChange = chunk.filter(ch => ch.directionChange);
-
-                  if (semiExtremes.length || comsDirectionChange.length) {
-
-                      // semiExtreme command
-                      comMid = semiExtremes.length ? semiExtremes[0] : comsDirectionChange[0];
-
-                      // zero length cpt vectors
-                      if (comChunk0.p0.x === comChunk0.cp1.x && comChunk0.p0.y === comChunk0.cp1.y) {
-                          comChunk0.cp1 = pointAtT([comChunk0.p0, comChunk0.cp1, comChunk0.cp2, comChunk0.p], 0.5);
-                      }
-                      else if (comChunk1.p.x === comChunk1.cp2.x && comChunk1.p.y === comChunk1.cp2.y) {
-                          comChunk1.cp2 = pointAtT([comChunk1.p0, comChunk1.cp1, comChunk1.cp2, comChunk1.p], 0.5);
-                      }
-
-                      pI1 = checkLineIntersection(comMid.p, comMid.cp2, comChunk0.p0, comChunk0.cp1, false);
-                      pI2 = checkLineIntersection(comMid.p, comMid.cp2, comChunk1.p, comChunk1.cp2, false);
-
-                      // intersections try to extrapolate cpts
-                      if (pI1 && pI2) {
-
-                          cp1_S = pointAtT([comChunk0.p0, pI1], tSplit);
-                          cp2_S = pointAtT([comChunk1.p, pI2], tSplit);
-
-                          cp2_M = pointAtT([comMid.p, pI1], tSplit);
-                          cp1_M = pointAtT([comMid.p, pI2], tSplit);
-
-                          /*
-                          renderPoint(markers, cp1_S, 'magenta', '1%', '1' )
-                          */
-
-                          pathDataS = [
-                              { type: 'M', values: [comChunk0.p0.x, comChunk0.p0.y] },
-                              {
-                                  type: 'C', values: [
-                                      cp1_S.x, cp1_S.y,
-                                      cp2_M.x, cp2_M.y,
-                                      comMid.p.x,
-                                      comMid.p.y
-                                  ]
-                              },
-                              {
-                                  type: 'C', values: [
-                                      cp1_M.x, cp1_M.y,
-                                      cp2_S.x, cp2_S.y,
-                                      comChunk1.p.x,
-                                      comChunk1.p.y,
-                                  ]
-                              },
-                          ];
-                          pathDataToD(pathDataS);
-
-                          pathDataC.push(
-                              {
-                                  type: 'C', values: [
-                                      cp1_S.x, cp1_S.y,
-                                      cp2_M.x, cp2_M.y,
-                                      comMid.p.x,
-                                      comMid.p.y
-                                  ],
-                                  p0: comChunk0.p0,
-                                  cp1: cp1_S,
-                                  cp2: cp2_M,
-                                  p: comMid.p,
-                                  dimA: getDistManhattan(comChunk0.p0, comMid.p)
-                              },
-
-                              {
-                                  type: 'C', values: [
-                                      cp1_M.x, cp1_M.y,
-                                      cp2_S.x, cp2_S.y,
-                                      comChunk1.p.x,
-                                      comChunk1.p.y,
-                                  ],
-                                  p0: comMid.p,
-                                  cp1: cp1_M,
-                                  cp2: cp2_S,
-                                  p: comChunk1.p,
-                                  extreme: true,
-                                  dimA: getDistManhattan(comMid.p, comChunk1.p)
-
-                              }
-                          );
-                          break
-
-                      }
-                  } else {
-                      pathDataC.push(com);
-                  }
-
-              }
-
-          }
-
-      }
-
-      /*
-      // render
-      let d = pathDataToD(pathDataC)
-      console.log(d);
-      renderPath(markers, d, 'red', '1%', '0.5')
-      */
-
-      return pathDataC
-
-  }
-
-  function renderChunks(chunks) {
-
-      console.log('chunks', chunks);
-
-      let stroke = 'green';
-
-      /**
-       * combine chunk based
-       */
-      for (let c = 0; c < chunks.length; c++) {
-          let chunk = chunks[c];
-          let chunkLen = chunk.length;
-
-          stroke = c % 2 === 0 ? 'orange' : 'green';
-          let comChunk0 = chunk[0];
-          let comChunk1 = chunk[chunkLen - 1];
-
-          let pathDataChunk = [
-              { type: 'M', values: [comChunk0.p0.x, comChunk0.p0.y] }
-          ];
-
-          // commands in chunk
-          for (let i = 0, l = chunkLen; i < l; i++) {
-              let com = chunk[i];
-              chunk[i + 1];
-              chunk[l - 1];
-              comChunk0.type === 'C' && comChunk1.type === 'C';
-
-              let { type, values, p0, cp1 = null, cp2 = null, p = null, extreme, semiExtreme = null, corner = null } = com;
-
-              // test render - original pathdata
-              pathDataChunk.push(
-                  { type, values },
-              );
-
-          }
-
-          let d = pathDataToD(pathDataChunk);
-          renderPath(markers, d, stroke, '1%', '0.5');
-
-      }
-  }
-
-  function pathDataRevertCubicToQuadratic(pathData) {
+  function pathDataRevertCubicToQuadratic(pathData, tolerance=1) {
 
       for (let c = 1, l = pathData.length; c < l; c++) {
           let com = pathData[c];
           let { type, values, p0, cp1 = null, cp2 = null, p = null } = com;
           if (type === 'C') {
 
-              let comQ = revertCubicQuadratic(p0, cp1, cp2, p);
+              let comQ = revertCubicQuadratic(p0, cp1, cp2, p, tolerance);
               if (comQ.type === 'Q') {
                   comQ.extreme = com.extreme;
                   comQ.corner = com.corner;
@@ -8213,12 +8159,59 @@
   }
   */
 
+  function getPathDataPolyPrecise(pathData = []) {
+
+      let poly = [];
+      for (let i = 0; i < pathData.length; i++) {
+          let com = pathData[i];
+          let prev = i > 0 ? pathData[i - 1] : pathData[i];
+          let { type, values } = com;
+          let p0 = { x: prev.values[prev.values.length - 2], y: prev.values[prev.values.length - 1] };
+          let p = values.length ? { x: values[values.length - 2], y: values[values.length - 1] } : '';
+          let cp1 = values.length ? { x: values[0], y: values[1] } : '';
+
+          switch (type) {
+
+              // convert to cubic to get polygon
+              case 'A':
+                  if (typeof arcToBezier$1 !== 'function') {
+
+                      break;
+                  }
+                  let cubic = arcToBezier$1(p0, values);
+                  cubic.forEach(com => {
+                      let vals = com.values;
+                      let cp1 = { x: vals[0], y: vals[1] };
+                      let cp2 = { x: vals[2], y: vals[3] };
+                      let p = { x: vals[4], y: vals[5] };
+                      poly.push(cp1, cp2, p);
+                  });
+                  break;
+
+              case 'C':
+                  let cp2 = { x: values[2], y: values[3] };
+                  poly.push(cp1, cp2);
+                  break;
+              case 'Q':
+                  poly.push(cp1);
+                  break;
+          }
+
+          // M and L commands
+          if (type.toLowerCase() !== 'z') {
+              poly.push(p);
+          }
+      }
+
+      return poly;
+  }
+
   function pathDataToPolygon(pathData, {
       angles = [],
       split = 0,
       getPathData = true,
-      width=0,
-      height=0
+      width = 0,
+      height = 0
   } = {}) {
 
       let l = pathData.length;
@@ -8234,9 +8227,9 @@
 
       split = !split ? 1 : split;
 
-      if(width && height){
-          minLength = (width+height) * 0.025 / split;
-      }else {
+      if (width && height) {
+          minLength = (width + height) * 0.025 / split;
+      } else {
 
           let lengths = pathData.map(com => com.dimA || 0).filter(Boolean).sort();
           minLength = lengths[0];
@@ -8262,8 +8255,8 @@
               split = Math.ceil(length / minLength);
 
               let tArr = [];
-              for(let i=1; i<split; i++){
-                  tArr.push(1/split*i);
+              for (let i = 1; i < split; i++) {
+                  tArr.push(1 / split * i);
               }
 
               tArr.forEach(t => {
@@ -8277,10 +8270,10 @@
               M = p;
           }
 
-          p.area = com.cptArea|| 0;
-          p.isExtreme = com.extreme|| false;
-          p.isCorner = com.corner|| false; 
-          p.isDirChange = com.directionChange || false ;
+          p.area = com.cptArea || 0;
+          p.isExtreme = com.extreme || false;
+          p.isCorner = com.corner || false;
+          p.isDirChange = com.directionChange || false;
 
           // segment end point
           pts.push(p);
@@ -8294,7 +8287,7 @@
 
       // reduce poly vertices
 
-      pts = simplifyRD(pts, {quality:0.5, width, height});
+      pts = simplifyRD(pts, { quality: 0.5, width, height });
 
       /*
       pts.forEach(pt => {
@@ -8307,6 +8300,103 @@
       return getPathData ? pathDataPoly : pts;
   }
 
+  function pathDataLineToCubic(pathData) {
+
+      for (let c = 1, l = pathData.length; c < l; c++) {
+          let com = pathData[c];
+          let { type, values, p0, cp1 = null, cp2 = null, p = null } = com;
+          if (type === 'L') {
+
+              let cp1 = interpolate(p0, p, 0.333);
+              let cp2 = interpolate(p, p0, 0.333);
+
+              pathData[c].type = 'C';
+              pathData[c].values = [cp1.x, cp1.y, cp2.x, cp2.y, p.x, p.y];
+              pathData[c].cp1 = cp1;
+              pathData[c].cp2 = cp2;
+
+          }
+      }
+      return pathData
+  }
+
+  /**
+   * fix sub path directions
+   * pathdata must be be normalized to
+   * absolute and longhand commands
+   * toClockwise = force default direction
+   */
+
+  function fixPathDataDirections(pathDataArr = [], toClockwise = false) {
+
+      let polys = [];
+
+      pathDataArr.forEach((sub, i) => {
+          let pathData = sub.pathData;
+
+          let vertices = getPathDataPolyPrecise(pathData);
+          let area = getPolygonArea(vertices);
+          let isClockwise = area >= 0;
+          polys.push({ pts: vertices, bb: getPolyBBox(vertices), cw: isClockwise, index: i, inter: 0, includes: [], includedIn: [] });
+      });
+
+      // check poly intersections
+      let l = polys.length;
+      for (let i = 0; i < l; i++) {
+          let prev = polys[i];
+          let bb0 = prev.bb;
+
+          for (let j = 0; j < l; j++) {
+
+              let poly = polys[j];
+              let bb = poly.bb;
+
+              // skip if the same poly or parent
+              if (i === j || poly.includes.includes(i)) continue
+
+              // if mid point is in previous polygon
+              let ptMid = { x: bb.left + bb.width / 2, y: bb.top + bb.height / 2 };
+              let inPoly = isPointInPolygon(ptMid, prev.pts, bb0);
+
+              if (inPoly) {
+                  polys[j].inter += 1;
+                  poly.includedIn.push(i);
+                  prev.includes.push(j);
+              }
+          }
+      }
+
+      // reverse paths
+      for (let i = 0; i < l; i++) {
+
+          let poly = polys[i];
+          let { cw, includedIn, includes } = poly;
+
+          // outer path direction to counter clockwise
+          if (!includedIn.length && cw && !toClockwise
+              || !includedIn.length && !cw && toClockwise
+          ) {
+              pathDataArr[i].pathData = reversePathData(pathDataArr[i].pathData);
+              polys[i].cw = polys[i].cw ? false : true;
+              cw = polys[i].cw;
+          }
+
+          // reverse inner sub paths
+          for (let j = 0; j < includes.length; j++) {
+              let ind = includes[j];
+              let child = polys[ind];
+
+              if (child.cw === cw) {
+                  pathDataArr[ind].pathData = reversePathData(pathDataArr[ind].pathData);
+                  polys[ind].cw = polys[ind].cw ? false : true;
+              }
+          }
+      }
+
+      return pathDataArr
+
+  }
+
   function svgPathSimplify(input = '', {
 
       // return svg markup or object
@@ -8334,6 +8424,12 @@
 
       refineExtremes = true,
       simplifyCorners = false,
+      removeDimensions = false,
+      removeIds = false,
+      removeClassNames = false,
+      omitNamespace = false,
+
+      fixDirections = false,
 
       keepExtremes = true,
       keepCorners = true,
@@ -8347,7 +8443,6 @@
       toPolygon = false,
 
       removeOrphanSubpaths = false,
-
       simplifyRound = false,
 
       scale = 1,
@@ -8355,32 +8450,28 @@
       crop = false,
       alignToOrigin = false,
 
-      // svg path optimizations
       decimals = 3,
       autoAccuracy = true,
 
       minifyD = 0,
       tolerance = 1,
-      reverse = false,
+      reversePath = false,
 
-      // svg cleanup options
-      cleanupSVGAtts=true,
+      cleanupSVGAtts = true,
       removePrologue = true,
       stylesToAttributes = true,
       fixHref = true,
-      removeNameSpaced=true,
-      attributesToGroup=false,
+      removeNameSpaced = true,
+      attributesToGroup = false,
       mergePaths = false,
       removeHidden = true,
       removeUnused = true,
-      shapesToPaths = true,
+      shapesToPaths = false,
+      lineToCubic = false,
 
       tMin = 0,
       tMax = 1,
 
-      // redraw - for messed up paths
-      redraw = false,
-
   } = {}) {
 
       // clamp tolerance and scale
@@ -8438,14 +8529,16 @@
       else {
 
           let returnDom = true;
-          svg = cleanUpSVG(input, { cleanupSVGAtts, returnDom, removeHidden, removeUnused, removeNameSpaced, attributesToGroup, stylesToAttributes, removePrologue, fixHref ,mergePaths  }
+          svg = cleanUpSVG(input, { removeIds, removeClassNames, removeDimensions, cleanupSVGAtts, returnDom, removeHidden, removeUnused, removeNameSpaced, stylesToAttributes, removePrologue, fixHref, mergePaths, shapesToPaths }
           );
 
           if (shapesToPaths) {
               let shapes = svg.querySelectorAll('polygon, polyline, line, rect, circle, ellipse');
               shapes.forEach(shape => {
                   let path = shapeElToPath(shape);
+
                   shape.replaceWith(path);
+
               });
           }
 
@@ -8598,23 +8691,6 @@
               // remove zero length linetos
               if (removeColinear || removeZeroLength) pathDataSub = removeZeroLengthLinetos(pathDataSub);
 
-              /**
-               * try to redraw messed up paths
-               * based on significant points suchas
-               * extremes, semi-extremes and corners
-               */
-              if (redraw) {
-                  addExtremes = true;
-                  addSemiExtremes = true;
-                  simplifyCorners = false;
-                  keepCorners = true;
-                  keepExtremes = true;
-                  optimizeOrder = true;
-
-                  tMin = 0;
-                  tMax = 0;
-              }
-
               // sort to top left
               if (optimizeOrder) pathDataSub = pathDataToTopLeft(pathDataSub);
 
@@ -8624,6 +8700,11 @@
               if (addExtremes || addSemiExtremes) pathDataSub = addExtremePoints(pathDataSub,
                   { tMin, tMax, addExtremes, addSemiExtremes, angles: [30] });
 
+              // reverse
+              if(reversePath) {
+                  pathDataSub = reversePathData(pathDataSub);
+              }
+
               // analyze pathdata to add info about signicant properties such as extremes, corners
               let pathDataPlus = analyzePathData(pathDataSub, {
                   detectSemiExtremes: addSemiExtremes,
@@ -8636,7 +8717,7 @@
 
               if (refineClosing) pathData = refineClosingCommand(pathData, { threshold: dimA * 0.001 });
 
-              pathData = simplifyBezier ? simplifyPathDataCubic(pathData, { simplifyBezier, keepInflections, keepExtremes, keepCorners, extrapolateDominant, revertToQuadratics, tolerance, reverse }) : pathData;
+              pathData = simplifyBezier ? simplifyPathDataCubic(pathData, { simplifyBezier, keepInflections, keepExtremes, keepCorners, extrapolateDominant, revertToQuadratics, tolerance }) : pathData;
 
               // refine extremes
               if (refineExtremes) {
@@ -8645,29 +8726,6 @@
                   pathData = refineAdjacentExtremes(pathData, { threshold: thresholdEx, tolerance });
               }
 
-              /**
-                * try redrawing
-                */
-
-              if (redraw) {
-
-                  /*
-                  pathData = addExtremePoints(pathData,
-                      { tMin: 0, tMax: 1, addExtremes: true, addSemiExtremes: true })
-      
-                      pathData = analyzePathData(pathDataSub, {
-                          detectSemiExtremes: true,
-                          detectExtremes: true,
-                      }).pathData;
-      
-                      */
-
-                  (bb.width + bb.height) * 0.1;
-
-                  pathData = redrawPathData(pathData, { tolerance, threshold: dimA * 0.001 });
-
-              }
-
               // cubic to arcs
               if (cubicToArc) pathData = pathDataCubicsToArc(pathData, { areaThreshold: 2.5 });
 
@@ -8687,13 +8745,14 @@
               if (simplifyRound) pathData = refineRoundSegments(pathData);
 
               // simplify to quadratics
-              if (revertToQuadratics) pathData = pathDataRevertCubicToQuadratic(pathData);
+              if (revertToQuadratics) pathData = pathDataRevertCubicToQuadratic(pathData, tolerance);
+
+              if (lineToCubic) pathData = pathDataLineToCubic(pathData);
 
               // optimize close path
               if (optimizeOrder) pathData = optimizeClosePath(pathData, { autoClose });
 
               // update
-
               pathDataPlusArr.push({ pathData, bb });
 
           } // end sup paths
@@ -8712,6 +8771,11 @@
               pathDataPlusArr = isPortrait ? pathDataPlusArr.sort((a, b) => a.bb.y - b.bb.y || a.bb.x - b.bb.x) : pathDataPlusArr.sort((a, b) => a.bb.x - b.bb.x || a.bb.y - b.bb.y);
           }
 
+          // fix path directions
+          if (fixDirections) {
+              pathDataPlusArr = fixPathDataDirections(pathDataPlusArr);
+          }
+
           // flatten compound paths 
           pathData = [];
           pathDataPlusArr.forEach(sub => {
@@ -8721,11 +8785,10 @@
           if (autoAccuracy) {
               decimals = detectAccuracy(pathData);
               pathOptions.decimals = decimals;
-
           }
 
           // collect for merged svg paths 
-          mergePaths= false;
+          mergePaths = false;
           if (el && mergePaths) {
               pathData_merged.push(...pathData);
           }
@@ -8828,7 +8891,16 @@
               }
           }
 
-          svg = stringifySVG(svg);
+          // remove fill rules
+          if (fixDirections) {
+              let elsFill = svg.querySelectorAll('path[fill-rule], path[clip-rule]');
+              elsFill.forEach(el => {
+                  el.removeAttribute('fill-rule');
+                  el.removeAttribute('clip-rule');
+              });
+          }
+
+          svg = stringifySVG(svg, omitNamespace);
 
           svgSizeOpt = svg.length;
 
@@ -8872,6 +8944,9 @@
 
   import {parsePathDataString_plus} from './svgii/pathData_parse2';
   export {parsePathDataString_plus as parsePathDataString_plus}
+
+  import {getPathDataFromEl} from './svgii/pathData_parse_els';
+  export{getPathDataFromEl as getPathDataFromEl};
   */
 
   // IIFE