svg-path-simplify 0.2.3 → 0.2.6

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

@@ -0,0 +1,139 @@
+import { getMatrix, parseCSSTransform } from './svg-styles-getTransforms';
+import { attLookup } from './svg-styles-to-attributes-const';
+
+export function svgStylesToAttributes(el, {
+    removeNameSpaced = true,
+    decimals = -1
+} = {}) {
+
+    let nodeName = el.nodeName.toLowerCase();
+    let attProps = getElAttributes(el)
+    let cssProps = getElStyleProps(el)
+
+    // merge properties
+    let props = {
+        ...attProps,
+        ...cssProps
+    }
+
+    // filter out obsolete properties
+    let propsFiltered = {}
+
+    // parse CSS transforms
+    let cssTrans = cssProps['transform']
+    
+    if (cssTrans) {
+        let transStr = `${cssTrans}`
+        let transformObj = parseCSSTransform(transStr)
+        let matrix = getMatrix(transformObj)
+
+        // apply as SVG matrix transform
+        props['transform'] = `matrix(${Object.values(matrix).join(',')})`
+    }
+
+
+    // can't be replaced with attributes
+    let cssOnlyProps = ['inline-size']
+    let styleProps = [];
+
+    for (let prop in props) {
+
+        let value = props[prop];
+
+        // CSS variable
+        if (value && prop.startsWith('--') || cssOnlyProps.includes(prop) ||
+            (!removeNameSpaced && prop.startsWith('-'))) {
+            styleProps.push(`${prop}:${value}`)
+            continue
+        }
+
+        // check if property is valid
+        if (value && attLookup.atts[prop] &&
+            (attLookup.atts[prop] === '*' ||
+                attLookup.atts[prop].includes(nodeName) ||
+                !removeNameSpaced && (prop.includes(':'))
+            )
+        ) {
+            propsFiltered[prop] = value
+        }
+
+        // remove property
+        el.removeAttribute(prop)
+
+    }
+
+    // apply filtered attributes
+    for (let prop in propsFiltered) {
+        let value = propsFiltered[prop]
+        el.setAttribute(prop, value)
+    }
+
+    if (styleProps.length) {
+        el.setAttribute('style', styleProps.join(';'));
+    }
+
+    //console.log('propsFiltered', propsFiltered);
+
+    return propsFiltered;
+
+}
+
+
+function parseInlineStyle(styleAtt = '') {
+
+    let props = {}
+    if (!styleAtt) return props;
+
+    let styleArr = styleAtt.split(';').filter(Boolean).map(prop => prop.trim());
+    let l = styleArr.length
+    if (!l) return props;
+
+    for (let i = 0; l && i < l; i++) {
+        let style = styleArr[i]
+        let [prop, value] = style.split(':').filter(Boolean)
+        props[prop] = value;
+        //props.push(`${prop}:${value}`)
+    }
+
+    return props
+}
+
+function getElStyleProps(el) {
+    let styleAtt = el.getAttribute('style')
+    let props = styleAtt ? parseInlineStyle(styleAtt) : {}
+    return props
+}
+
+function getElAttributes(el) {
+    let props = {}
+    let atts = [...el.attributes].map((att) => att.name);
+    let l = atts.length;
+    if (!l) return props;
+
+    for (let i = 0; i < l; i++) {
+        let att = atts[i];
+        let value = el.getAttribute(att);
+        props[att] = value
+    }
+
+    return props;
+}
+
+
+function getUnit(val) {
+    return val && isNaN(val) ? val.match(/[^\d|.]+/g)[0] : '';
+}
+
+
+function roundValue(value = '', decimals = -1) {
+    if (decimals < 0) return value;
+    value = value.replace(/["]/g, '').trim()
+    let valueNum = parseFloat(value);
+    let valueHasNumber = !isNaN(valueNum);
+    if (!valueHasNumber) return value;
+
+    let unit = valueHasNumber ? getUnit(value) : '';
+    if (valueHasNumber) value = `${valueNum.toFixed(decimals)}${unit}`;
+    //console.log('rounded', value)
+    return value;
+}

package/src/svgii/svg_cleanup.js

@@ -1,3 +1,5 @@
+import { parsePathDataString } from "./pathData_parse";
+import { svgStylesToAttributes } from "./svg-styles-to-attributes";
 
 
 export function removeEmptySVGEls(svg) {
@@ -13,61 +15,177 @@ export function cleanUpSVG(svgMarkup, {
   returnDom = false,
   removeHidden = true,
   removeUnused = true,
+  stylesToAttributes = true,
+  removePrologue = true,
+  fixHref = true,
+  mergePaths = false,
+  cleanupSVGAtts = true,
+  removeNameSpaced = true,
+  attributesToGroup = true,
+  decimals = -1,
+  excludedEls = [],
 } = {}) {
 
   svgMarkup = cleanSvgPrologue(svgMarkup);
 
   // replace namespaced refs 
-  svgMarkup = svgMarkup.replaceAll("xlink:href=", "href=");
-  //console.log('!!!svgMarkup', svgMarkup);
-
+  if (fixHref) svgMarkup = svgMarkup.replaceAll("xlink:href=", "href=");
 
   let svg = new DOMParser()
-  //.parseFromString(svgMarkup, "image/svg+xml")
-  .parseFromString(svgMarkup, "text/html")
-  .querySelector("svg");
+    //.parseFromString(svgMarkup, "image/svg+xml")
+    .parseFromString(svgMarkup, "text/html")
+    .querySelector("svg");
   //console.log(svg);
 
 
-  let allowed = ['viewBox', 'xmlns', 'width', 'height', 'id', 'class', 'fill', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin'];
-  removeExcludedAttribues(svg, allowed)
+  if (cleanupSVGAtts) {
+    let allowed = ['viewBox', 'xmlns', 'width', 'height', 'id', 'class', 'fill', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin'];
+    removeExcludedAttribues(svg, allowed)
+
+  }
 
-  let removeEls = ['metadata', 'script']
+  // always remove scripts
+  let removeEls = ['metadata', 'script', ...excludedEls]
 
   let els = svg.querySelectorAll('*')
+  let elProps = []
+
+  for (let i = 0; i < els.length; i++) {
+    let el = els[i];
+
+    let name = el.nodeName.toLowerCase();
 
-  let textEls = svg.querySelectorAll('text')
-  let remove = !textEls.length ? ['font-family', 'font-weight', 'font-style', 'font-size'] : [];
-  
-  els.forEach(el => {
-    let name = el.nodeName;
     // remove hidden elements
     let style = el.getAttribute('style') || ''
     let isHiddenByStyle = style ? style.trim().includes('display:none') : false;
     let isHidden = (el.getAttribute('display') && el.getAttribute('display') === 'none') || isHiddenByStyle;
     if (name.includes(':') || removeEls.includes(name) || (removeHidden && isHidden)) {
       el.remove();
-    } else {
-      // remove BS elements
-      removeNameSpaceAtts(el)
-      removeAtts(el,remove)
+      continue;
     }
-  })
 
-  //console.log('svg', svg);
-  //return
+    // styles to attributes
+    if (stylesToAttributes || attributesToGroup || mergePaths) {
+      let propsFiltered = svgStylesToAttributes(el, { removeNameSpaced, decimals })
+      if (name === 'path') {
+        elProps.push({ el, name, idx: i, propsFiltered })
+      }
+    }
+  }
 
-  if (returnDom) return svg
+  // group styles
+  //console.log('elProps', elProps);
+  if (attributesToGroup || mergePaths) {
+    moveAttributesToGroup(elProps, mergePaths)
+  }
 
+  if (returnDom) return svg
   let markup = stringifySVG(svg)
   //console.log('!!!markup', markup);
 
-  //return
+  return markup;
+}
 
 
-  return markup;
+function moveAttributesToGroup(elProps = [], mergePaths = true) {
+
+  let combine = [[elProps[0]]]
+  let idx = 0;
+  let lastProps = '';
+  for (let i = 0; i < elProps.length; 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]}`)
+      }
+    }
+    propstr = propstr.join('_')
+    item.propstr = propstr;
+
+    if (propstr === lastProps) {
+      combine[idx].push(item)
+    } else {
+      if (combine[idx].length) {
+        combine.push([])
+        idx++
+      }
+    }
+    lastProps = propstr;
+
+  }
+
+
+  // add att groups
+  for (let i = 0; i < combine.length; i++) {
+    let group = combine[i]
+
+    if (group.length > 1) {
+      // 1st el
+      let el0 = group[0].el;
+      let props = group[0].propsFiltered;
+      let g = el0.parentNode.closest('g') ? el0.parentNode.closest('g') : null;
+
+      // wrap in group if not existent
+      if (!g) {
+        g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+        el0.parentNode.insertBefore(g, el0)
+        group.forEach(item => {
+          g.append(item.el)
+        })
+      }
+
+      let children = [...g.children]
+      for (let prop in props) {
+        if (prop !== 'd' && prop !== 'id') {
+          let value = props[prop]
+          // apply to parent group
+          g.setAttribute(prop, value)
+
+          // remove from children
+          children.forEach(el => {
+            if (el.getAttribute(prop) === value) {
+              el.removeAttribute(prop)
+            }
+          })
+        }
+
+
+        //console.log('mergePaths', mergePaths);
+
+        if (mergePaths) {
+          let path0 = group[0].el;
+          let dCombined = group[0].propsFiltered.d;
+
+          for (let i = 1; i < group.length; i++) {
+            let item = group[i]
+            let path = item.el;
+            let d = item.propsFiltered.d
+            let isAbs = d.startsWith('M')
+
+            let dAbs = isAbs ? d : parsePathDataString(d).pathData.map(com => `${com.type} ${com.values.join(' ')}`).join(' ')
+
+            //console.log(isAbs, dAbs);
+            // concat pathdata string
+            dCombined += dAbs;
+
+            // delete path el
+            path.remove();
+          }
+
+          path0.setAttribute('d', dCombined)
+
+        }
+
+      }
+    }
+  }
+
 }
 
+
 function cleanSvgPrologue(svgString) {
   return (
     svgString
@@ -92,17 +210,16 @@ function removeExcludedAttribues(el, allowed = ['viewBox', 'xmlns', 'width', 'he
 }
 
 
-function removeAtts(el, remove=[]) {
+function removeAtts(el, exclude = [], include = []) {
   let atts = [...el.attributes].map((att) => att.name);
   atts.forEach((att) => {
-    if (remove.includes(att)) {
+    if (exclude.includes(att) && !include.includes(att)) {
       el.removeAttribute(att);
     }
   });
 }
 
 
-
 function removeNameSpaceAtts(el) {
   let atts = [...el.attributes].map((att) => att.name);
   atts.forEach((att) => {

package/tests/testSVG.js

@@ -7,6 +7,7 @@ import 'svg-path-simplify/node';
 import { svgPathSimplify } from 'svg-path-simplify';
 
 
+
 let svgMarkup =
 	`<?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Super Adobe Illustrator 33.0.0 Turbo, SVG Export Plug-In . SVG Version: 123.00 Build 0)  -->