svg-path-simplify 0.2.6 → 0.3.0

package/src/svgii/pathData_convert.js

@@ -463,7 +463,7 @@ export function pathDataToShorthands(pathData, decimals = -1, test = false) {
             let dy1 = (p0.y - cpPrev.y)
 
             //adjust maxDist
-            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 }

package/src/svgii/pathData_fix_directions.js

@@ -0,0 +1,83 @@
+/**
+ * fix sub path directions
+ * pathdata must be be normalized to
+ * absolute and longhand commands
+ * toClockwise = force default direction
+ */
+
+import { isPointInPolygon } from "./geometry";
+import { getPolygonArea } from "./geometry_area";
+import { getPolyBBox } from "./geometry_bbox";
+import { reversePathData } from "./pathData_reverse";
+import { getPathDataPolyPrecise } from "./pathData_toPolygon";
+
+export function fixPathDataDirections(pathDataArr = [], toClockwise = false) {
+
+    let polys = []
+
+    pathDataArr.forEach((sub, i) => {
+        let pathData = sub.pathData
+        //console.log('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
+
+}

package/src/svgii/pathData_line_to_cubic.js

@@ -0,0 +1,21 @@
+import { interpolate } from "./geometry";
+
+export 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
+}

package/src/svgii/pathData_parse_els.js

@@ -10,13 +10,18 @@ export function shapeElToPath(el) {
     let d = pathData.map(com => { return `${com.type} ${com.values} ` }).join(' ')
     let attributes = [...el.attributes].map(att => att.name);
 
+    //console.log(d);
+    //return []
+
     let pathN = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    //let pathN = document.createElement('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)) {
+            //console.log(att, attributes, exclude);
             let val = el.getAttribute(att);
             pathN.setAttribute(att, val)
         }
@@ -32,7 +37,7 @@ export function shapeElToPath(el) {
 export 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 

package/src/svgii/pathData_remove_zerolength.js

@@ -41,7 +41,6 @@ export function removeZeroLengthLinetos(pathData) {
             continue
         }
 
-
         // skip minified zero length
         if (!isDot && (type === 'l' || type === 'v' || type === 'h')) {
             let noLength = type === 'l' ? (values.join('') === '00') : values[0] === 0;

package/src/svgii/pathData_reverse.js

@@ -66,7 +66,6 @@ export function reversePathData(pathData, {
     // start compiling new path data
     let pathDataNew = [];
 
-
     let closed =
         pathData[pathData.length - 1].type.toLowerCase() === "z" ? true : false;
     if (closed) {

package/src/svgii/pathData_toPolygon.js

@@ -4,6 +4,7 @@ import { simplifyRD } from "../simplify_poly_radial_distance";
 import { getDistAv, getTatAngles, pointAtT } from "./geometry";
 import { getPolyBBox } from "./geometry_bbox";
 import { addDimensionData, analyzePathData } from "./pathData_analyze";
+import { arcToBezier } from "./pathData_convert";
 import { pathDataFromPoly } from "./pathData_fromPoly";
 import { addExtremePoints } from "./pathData_split";
 import { pathDataToD } from "./pathData_stringify";
@@ -12,13 +13,61 @@ import { getCurvePathData } from "./poly_to_pathdata";
 import { renderPoint } from "./visualize";
 
 
+export 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 !== 'function') {
+                    //console.log('has no arc to cubic conversion');
+                    break;
+                }
+                let cubic = arcToBezier(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;
+}
+
+
 
 export function pathDataToPolygon(pathData, {
     angles = [],
     split = 0,
     getPathData = true,
-    width=0,
-    height=0
+    width = 0,
+    height = 0
 } = {}) {
 
 
@@ -43,9 +92,9 @@ export function pathDataToPolygon(pathData, {
 
     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 areas = pathData.map(com => com.cptArea || 0).filter(Boolean).sort()
         let lengths = pathData.map(com => com.dimA || 0).filter(Boolean).sort()
         minLength = lengths[0]
@@ -75,8 +124,8 @@ export function pathDataToPolygon(pathData, {
             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 => {
@@ -92,10 +141,10 @@ export function pathDataToPolygon(pathData, {
         }
 
 
-        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)
@@ -115,7 +164,7 @@ export function pathDataToPolygon(pathData, {
 
     // reduce poly vertices
     //pts = simplifyRD(pts, { quality: 0.5, exclude: ptsEnd, width, height })
-    pts = simplifyRD(pts, {quality:0.5, width, height})
+    pts = simplifyRD(pts, { quality: 0.5, width, height })
     //pts = simplifyRDP(pts, { quality: 0.8, width, height })
     //console.log(ptsEnd);
 

package/src/svgii/rounding.js

@@ -34,6 +34,8 @@ export function detectAccuracy(pathData) {
     }
 
     let dim_min = dims.sort()
+    //console.log('dim_min', dim_min);
+
     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;

package/src/svgii/svg-styles-to-attributes-const.js

@@ -97,6 +97,8 @@ export const attLookup = {
             ...textEls,
         ],
 
+        "fill-rule": ["svg", "g", "path", "polygon",  "text", "textPath"],
+
         opacity: [
             "svg",
             "g",

package/src/svgii/svg_cleanup.js

@@ -1,4 +1,5 @@
 import { parsePathDataString } from "./pathData_parse";
+import { shapeElToPath } from "./pathData_parse_els";
 import { svgStylesToAttributes } from "./svg-styles-to-attributes";
 
 
@@ -17,28 +18,31 @@ export function cleanUpSVG(svgMarkup, {
   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, "image/svg+xml")
     .parseFromString(svgMarkup, "text/html")
     .querySelector("svg");
-  //console.log(svg);
 
 
   if (cleanupSVGAtts) {
+    //console.log('cleanupSVGAtts');
     let allowed = ['viewBox', 'xmlns', 'width', 'height', 'id', 'class', 'fill', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin'];
     removeExcludedAttribues(svg, allowed)
 
@@ -50,11 +54,23 @@ export function cleanUpSVG(svgMarkup, {
   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;
+      //console.log('shapesToPaths', el.outerHTML);
+    }
+
     // remove hidden elements
     let style = el.getAttribute('style') || ''
     let isHiddenByStyle = style ? style.trim().includes('display:none') : false;
@@ -73,15 +89,35 @@ export function cleanUpSVG(svgMarkup, {
     }
   }
 
+
   // group styles
-  //console.log('elProps', elProps);
   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)
+    })
+  }
+
+  //console.log('!!!svgMarkup', svgMarkup);
+
+
   if (returnDom) return svg
   let markup = stringifySVG(svg)
-  //console.log('!!!markup', markup);
+
+  //console.log(svg.outerHTML);
+
 
   return markup;
 }
@@ -92,11 +128,41 @@ function moveAttributesToGroup(elProps = [], mergePaths = true) {
   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 = [];
-    //let atts = []
     for (let prop in props) {
       if (prop !== 'd' && prop !== 'id') {
         propstr.push(`${prop}:${props[prop]}`)
@@ -105,16 +171,15 @@ function moveAttributesToGroup(elProps = [], mergePaths = true) {
     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;
-
   }
 
 
@@ -153,13 +218,16 @@ function moveAttributesToGroup(elProps = [], mergePaths = true) {
         }
 
 
-        //console.log('mergePaths', mergePaths);
-
         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
@@ -229,13 +297,22 @@ function removeNameSpaceAtts(el) {
   });
 }
 
-export function stringifySVG(svg) {
+export 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
 }

package/tests/testSVG2.js

@@ -0,0 +1,55 @@
+
+/**
+ * load node polyfills for DOM parsing
+ * loads linkedom npm module for DOM parsing and emulation 
+ */
+import 'svg-path-simplify/node';
+import { svgPathSimplify } from 'svg-path-simplify';
+
+
+
+let svgMarkup =`<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 210 210"><g transform="translate(-210)"><path fill="none" stroke="#000" stroke-linecap="round" stroke-width="6.5252" d="M403.6556 126.8938H226.3444"/><path fill="none" stroke="#000" stroke-linecap="round" stroke-width="6.608" d="M218.304 101.7193h193.392"/><path fill="none" stroke="#000" stroke-linecap="round" stroke-width="6.5248" d="M403.6556 76.545H226.3444"/><rect width="122.6239" height="115.3804" x="253.688" y="46.3265" fill="#fff" stroke="#000" stroke-linecap="round" stroke-width="6.5252" ry="16.3026"/><path d="M278.0097 57.7418c-7.1917 0-12.9815 5.7892-12.9815 12.981v65.9129c0 7.1917 5.7898 12.9815 12.9815 12.9815h72.7384c7.1917 0 12.9815-5.7898 12.9815-12.9815v-65.913c0-7.1917-5.7898-12.981-12.9815-12.981zm19.3197 17.3554h13.427l19.7544 54.3635h-11.266l-4.8227-13.8896h-20.7194l-4.8233 13.8896h-11.3819zm40.5508 0h11.3824v54.3635h-11.3824zm-33.8373 8.3726-7.7936 23.5355h15.6261z"/><path fill="none" stroke="#000" stroke-linecap="round" stroke-width="6.5252" d="M340.1744 17.9869v28.3396"/><path fill="none" stroke="#000" stroke-linecap="round" stroke-width="6.608" d="m314.856 9.7382.288 36.5883"/><path fill="none" stroke="#000" stroke-linecap="round" stroke-width="6.5252" d="M289.8257 17.5703v28.7562"/><path stroke="#000" stroke-linecap="round" stroke-width=".4646" d="M226.75 194.8457q1.8299 0 3.5484-.5847 1.7185-.6025 2.6574-1.5239v-3.4553h-5.4739v-3.863h9.7702v9.1789q-1.7822 2.0377-4.6464 3.1895-2.8483 1.1518-5.983 1.1518-5.474 0-8.4177-3.3668-2.9438-3.3844-2.9438-9.5863 0-6.1664 2.9597-9.4445 2.9597-3.2959 8.5131-3.2959 7.8926 0 10.0407 6.5031l-4.3281 1.453q-.7002-1.896-2.196-2.8706-1.4957-.9745-3.5166-.9745-3.3098 0-5.0283 2.2326t-1.7185 6.3968q0 4.235 1.7662 6.5563 1.7822 2.3035 4.9965 2.3035z" font-family="Liberation Sans" font-size="21.0811" font-weight="700" style="line-height:1.25;-inkscape-font-specification:&quot;Liberation Sans Bold&quot;"/><path stroke="#000" stroke-linecap="round" stroke-width=".4646" d="M241.453 198.5846v-24.967h17.6309v4.04H246.147v6.2728h11.9661v4.0401h-11.966v6.574h13.5891v4.04z" font-family="Liberation Sans" font-size="21.0811" font-weight="700" style="line-height:1.25;-inkscape-font-specification:&quot;Liberation Sans Bold&quot;"/><path stroke="#000" stroke-linecap="round" stroke-width=".4646" d="m276.8421 198.5846-9.7702-19.2258q.2864 2.7997.2864 4.5008v14.725h-4.169v-24.967h5.3625l9.9134 19.3853q-.2865-2.6757-.2865-4.873v-14.5123h4.169v24.967z" font-family="Liberation Sans" font-size="21.0811" font-weight="700" style="line-height:1.25;-inkscape-font-specification:&quot;Liberation Sans Bold&quot;"/><path stroke="#000" stroke-linecap="round" stroke-width=".4646" d="M286.7237 198.5846v-24.967h17.631v4.04h-12.9368v6.2728h11.966v4.0401h-11.966v6.574h13.5891v4.04z" font-family="Liberation Sans" font-size="21.0811" font-weight="700" style="line-height:1.25;-inkscape-font-specification:&quot;Liberation Sans Bold&quot;"/><path stroke="#000" stroke-linecap="round" stroke-width=".4646" d="m323.8632 198.5846-5.2033-9.48h-5.5057v9.48H308.46v-24.967h11.2023q4.01 0 6.19 1.9314 2.18 1.9138 2.18 5.5108 0 2.6226-1.3367 4.5363-1.3366 1.896-3.6121 2.4984l6.0626 10.49zm-.557-17.3121q0-3.597-4.1372-3.597h-6.0148v7.3713h6.1421q1.9732 0 2.9916-.9923t1.0184-2.782z" font-family="Liberation Sans" font-size="21.0811" font-weight="700" style="line-height:1.25;-inkscape-font-specification:&quot;Liberation Sans Bold&quot;"/><path stroke="#000" stroke-linecap="round" stroke-width=".4644" d="m347.8432 198.5846-1.989-6.379h-8.545l-1.989 6.379h-4.6942l8.179-24.967h5.5374l8.1472 24.967zm-6.2695-21.1218-3.2144 10.809h6.4446z" font-family="Liberation Sans" font-size="21.0811" font-weight="700" style="line-height:1.25;-inkscape-font-specification:&quot;Liberation Sans Bold&quot;"/><path stroke="#000" stroke-linecap="round" stroke-width=".4646" d="M363.2304 177.6577v20.9269h-4.6941v-20.927h-7.2402v-4.04h19.1904v4.04z" font-family="Liberation Sans" font-size="21.0811" font-weight="700" style="line-height:1.25;-inkscape-font-specification:&quot;Liberation Sans Bold&quot;"/><path stroke="#000" stroke-linecap="round" stroke-width=".4646" d="M373.0165 198.5846v-24.967h17.631v4.04h-12.9368v6.2728h11.9661v4.0401h-11.9661v6.574h13.5892v4.04z" font-family="Liberation Sans" font-size="21.0811" font-weight="700" style="line-height:1.25;-inkscape-font-specification:&quot;Liberation Sans Bold&quot;"/><path stroke="#000" stroke-linecap="round" stroke-width=".4646" d="M414.7388 185.915q0 3.863-1.3685 6.7512-1.3525 2.8706-3.8507 4.3945-2.4824 1.5239-5.6967 1.5239h-9.07v-24.967h8.1153q5.6648 0 8.7677 3.1895 3.103 3.1719 3.103 9.108zm-4.726 0q0-4.0223-1.8776-6.131-1.8777-2.1263-5.3625-2.1263h-3.3257v16.8868h3.9781q3.0234 0 4.8055-2.3213t1.7822-6.3082z" font-family="Liberation Sans" font-size="21.0811" font-weight="700" style="line-height:1.25;-inkscape-font-specification:&quot;Liberation Sans Bold&quot;"/></g></svg>`
+
+//document = new DOMParser().parseFromString(svgMarkup, 'image/svg+xml').querySelector('svg')
+
+/*
+let rect = dom.querySelector('rect')
+let pathdata = getPathDataFromEl(rect)
+let newR = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+newR.setAttribute('d','M414.7388 185.915' )
+console.log(newR);
+*/
+
+// try to simplify
+let options = {
+    stylesToAttributes:true,
+    mergePaths:true,
+    shapesToPaths:true
+}
+
+
+let svgOpt = svgPathSimplify(svgMarkup, options);
+
+// simplified pathData
+console.log(svgOpt)
+
+
+
+/*
+let document = new DOMParser().parseFromString(svgMarkup, 'image/svg+xml');
+let svg = document.querySelector('svg');
+let path = svg.querySelector('path');
+let els = svg.querySelectorAll('path')
+let d = path.getAttribute('d').substring(0, 10)
+//console.log(els);
+
+
+//let markup = document.toString()
+let markup = new XMLSerializer().serializeToString(svg)
+*/
+//console.log(markup);
+
+
+
+/*
+*/