svg-path-simplify 0.3.6 → 0.4.1

package/src/svgii/svg_cleanup.js

@@ -1,16 +1,20 @@
 import { getElementAtts } from "../svg-getAttributes";
 import { flattenTransforms } from "../svg_flatten_transforms";
 import { getViewBox } from "../svg_getViewbox";
-import { normalizeUnits } from "./convert_units";
+import { isNumericValue, normalizeUnits } from "./convert_units";
 import { getPathDataVertices } from "./geometry";
 import { checkBBoxIntersections, getPathDataBBox, getPolyBBox } from "./geometry_bbox";
 import { getElBBox } from "./geometry_bbox_element";
 import { parsePathDataString } from "./pathData_parse";
 import { parsePathDataNormalized } from "./pathData_convert";
 import { pathElToShape, shapeElToPath } from "./pathData_parse_els";
-import { svgStylesToAttributes } from "./svg-styles-to-attributes";
-import { strokeAtts } from "./svg-styles-to-attributes-const";
-import { parseStylesProperties } from "./svg_el_parse_style_props";
+//import { scaleProps } from "./svg-styles-to-attributes";
+import { geometryEls, renderedEls, shapeEls, strokeAtts } from "./svg-styles-to-attributes-const";
+import { addTransFormProps, filterSvgElProps, parseStylesProperties } from "./svg_el_parse_style_props";
+import { autoRound } from "./rounding";
+import { getMatrixFromTransform } from "./svg-styles-getTransforms";
+import { qrDecomposeMatrix } from "./transform_qr_decompose";
+import { svgNs } from "../constants";
 
 
 export function removeEmptySVGEls(svg) {
@@ -22,6 +26,7 @@ export function removeEmptySVGEls(svg) {
 
 //const DOMParserPoly = globalThis.DOMParser;
 
+
 export function cleanUpSVG(svgMarkup, {
   removeHidden = true,
   //removeUnused = true,
@@ -36,6 +41,12 @@ export function cleanUpSVG(svgMarkup, {
   cleanupClip = true,
   addViewBox = false,
   addDimensions = false,
+  minifyRgbColors = false,
+
+  normalizeTransforms = true,
+  autoRoundValues = true,
+
+  unGroup = false,
 
   mergePaths = false,
   removeOffCanvas = true,
@@ -47,20 +58,22 @@ export function cleanUpSVG(svgMarkup, {
   convert_rects = false,
   convert_ellipses = false,
   convert_poly = false,
-  convert_lines=false,
+  convert_lines = false,
 
   convertTransforms = false,
+  removeDefaults = true,
   cleanUpStrokes = true,
   decimals = -1,
   excludedEls = [],
 } = {}) {
 
-  attributesToGroup = cleanupSVGAtts ? true : false;
+  //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");
@@ -69,16 +82,60 @@ export function cleanUpSVG(svgMarkup, {
   let { x, y, width, height } = viewBox;
 
 
+  // get svg styles
+  let propOptions = {
+    width: width,
+    height: height,
+    normalizeTransforms,
+    removeDefaults: false,
+    cleanUpStrokes: false,
+    autoRoundValues,
+    minifyRgbColors,
+  }
+  let stylePropsSVG = parseStylesProperties(svg, propOptions)
+
+  // add svg font size for scaling relative
+  propOptions.fontSize = stylePropsSVG['font-size'] ? stylePropsSVG['font-size'][0] : 16;
+
+
+  /**
+   * get group styles
+   * especially transformations to
+   * be inherited by children
+   */
+  let groups = svg.querySelectorAll('g')
+  let groupProps = [];
+
+  groups.forEach(g => {
+    let stylePropsG = parseStylesProperties(g, propOptions)
+    groupProps.push(stylePropsG);
+    let children = g.querySelectorAll(`${renderedEls.join(', ')}`)
+
+    // store parent styles to child property
+    children.forEach(child => {
+      if (child.parentStyleProps === undefined) {
+        child.parentStyleProps = []
+      }
+      child.parentStyleProps.push(stylePropsG)
+    })
+  })
+
+
+
   if (cleanupSVGAtts) {
     //console.log('cleanupSVGAtts');
-    let allowed = ['viewBox', 'xmlns', 'width', 'height', 'id', 'class', 'fill', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin'];
+    let allowed = ['viewBox', 'xmlns', 'width', 'height', 'id', 'class'];
+    if (!stylesToAttributes) {
+      allowed.push('fill', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin', 'font-size', 'font-family', 'font-style', 'style');
+    }
+
     removeExcludedAttribues(svg, allowed)
   }
 
   // add viewBox
   if (addViewBox) addSvgViewBox(svg, { x, y, width, height })
   if (addDimensions) {
-    svg.setAttribute('width', width); 
+    svg.setAttribute('width', width);
     svg.setAttribute('height', height);
   }
 
@@ -94,44 +151,20 @@ export function cleanUpSVG(svgMarkup, {
   // always remove scripts
   let removeEls = ['metadata', 'script', ...excludedEls]
 
-  let els = svg.querySelectorAll('*')
+  removeSVGEls(svg, { removeEls, removeNameSpaced });
 
   // an array of all elements' properties
   let svgElProps = []
-
-  let geometryElements = ['polygon', 'polyline', 'line', 'rect', 'circle', 'ellipse']
-
-    //console.log('shapeConvert', shapeConvert);
-
-
-  /** convert paths to shapes */
-  if(shapeConvert === 'toShapes'){
-    let paths = svg.querySelectorAll('path')
-    paths.forEach(path=>{
-      let shape = pathElToShape(path, {convert_rects, convert_ellipses, convert_poly, convert_lines})
-      path.replaceWith(shape)
-      path = shape;
-      //console.log('path', path);
-    })
-
-  }
+  let els = svg.querySelectorAll(`${renderedEls.join(', ')}`)
 
 
   for (let i = 0; i < els.length; i++) {
     let el = els[i];
 
     let name = el.nodeName.toLowerCase();
+    //console.log(name);
 
-    // convert shapes
-    if (shapeConvert === 'toPaths' && name !== 'path' && geometryElements.includes(name)) {
-      let path = shapeElToPath(el, { width, height, convert_rects, convert_ellipses, convert_poly, convert_lines });
-      el.replaceWith(path)
-      name = 'path'
-      el = path;
-      //console.log('shapesToPaths', el.outerHTML);
-    }
-
-    // remove hidden elements
+    // 1. remove hidden elements
     let style = el.getAttribute('style') || ''
     let isHiddenByStyle = style ? style.trim().includes('display:none') : false;
     let isHidden = (el.getAttribute('display') && el.getAttribute('display') === 'none') || isHiddenByStyle;
@@ -146,94 +179,241 @@ export function cleanUpSVG(svgMarkup, {
      * convert relative or physical units
      * to user units
      */
+    let styleProps = parseStylesProperties(el, propOptions)
+
+    // get parent styles
+    let { parentStyleProps = [] } = el;
+    let inheritedProps = {}
+    let transFormInherited = []
 
 
-    /*
-    let styleProps = parseStylesProperties(el, {
-      width:viewBox.width,
-      height:viewBox.height
+    /** inherit transforms 
+     * and styles from group 
+     */
+    parentStyleProps.forEach(props => {
+      // transforms from groups are applied cumulatively
+      let { transformArr = [] } = props
+      transFormInherited.push(...transformArr)
+
+      // merge
+      inheritedProps = {
+        ...inheritedProps,
+        ...props
+      };
     })
-      */
 
 
-    /*
-    let propTest = normalizeUnits('50%',{width:200, height:100, isHorizontal:true})
-    console.log('propTest', propTest);
-    */
+    //merge transforms
+    transFormInherited = [...transFormInherited, ...styleProps.transformArr]
+    styleProps.transformArr = transFormInherited
 
 
-    // styles to attributes
-    if (stylesToAttributes || attributesToGroup || mergePaths || cleanUpStrokes) {
-      let propsFiltered = svgStylesToAttributes(el, { removeNameSpaced, decimals })
-      //if (name === 'path') {}
-      svgElProps.push({ el, name, idx: i, propsFiltered })
+    // merge with svg props
+    styleProps = {
+      ...stylePropsSVG,
+      ...inheritedProps,
+      ...styleProps
     }
+    //console.log('inheritedProps', inheritedProps, name);
 
-  }
+    // add combined transforms
+    addTransFormProps(styleProps, transFormInherited);
+
+    //console.log('transFormInherited', transFormInherited);
+    //console.log('styleProps', styleProps);
+
+
+    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 (stylesToAttributes) {
+
+      /**
+       * normalize transforms
+       */
+      if (normalizeTransforms && matrix) {
+        let { rotate, scaleX, scaleY, skewX, translateX, translateY } = transComponents;
+        //console.log(rotate, scaleX, scaleY, skewX, skewY, translateX, translateY);
+
+        // scale attributes instead of transform
+        let hasRot = rotate !== 0 || skewX !== 0;
+        let unProportional = scaleX !== scaleY;
+        let scalableByAtt = ['circle', 'ellipse', 'rect']
+        let needsTrans = convertTransforms || (name === 'g') || (hasRot) || unProportional
+        //needsTrans = true
+
+        if (!needsTrans && scalableByAtt.includes(name)) {
+
+          if (name === 'circle' || name === 'ellipse') {
+            styleProps.cx[0] = [styleProps.cx[0] * scaleX + translateX]
+            styleProps.cy[0] = [styleProps.cy[0] * scaleX + translateY]
+
+            if (styleProps.r) styleProps.r[0] = [styleProps.r[0] * scaleX]
 
+            if (styleProps.rx) styleProps.rx[0] = [styleProps.rx[0] * scaleX]
+            if (styleProps.ry) styleProps.ry[0] = [styleProps.ry[0] * scaleX]
 
+          }
+          else if (name === 'rect') {
+            let x = styleProps.x ? styleProps.x[0] + translateX : translateX;
+            let y = styleProps.y ? styleProps.y[0] + translateY : translateY;
+
+            let rx = styleProps.rx ? styleProps.rx[0] * scaleX : 0;
+            let ry = styleProps.ry ? styleProps.ry[0] * scaleY : 0;
+
+            styleProps.x = [x]
+            styleProps.y = [y]
+
+            styleProps.rx = [rx]
+            styleProps.ry = [ry]
 
-  // remove stroke properties if no stroke color applied - common inkscape issue
-  if (cleanUpStrokes) {
+            styleProps.width = [styleProps.width[0] * scaleX]
+            styleProps.height = [styleProps.height[0] * scaleX]
+          }
+
+          remove.push('transform')
 
-    for (let item of svgElProps) {
+          // scale props like stroke width or dash-array
+          styleProps = scaleProps(styleProps, { props: ['stroke-width', 'stroke-dasharray'], scale: scaleX })
 
-      let { el, propsFiltered } = item;
-      let strokeProps = Object.keys(propsFiltered)
+        } else {
+          el.setAttribute('transform', transComponents.matrixAtt)
+
+        }
+      }
+
+
+      /**
+       * apply consolidated 
+       * element attributes
+       */
+
+      let stylePropsFiltered = filterSvgElProps(name, styleProps,
+        { removeDefaults: true, cleanUpStrokes });
+
+      remove = [...remove, ...stylePropsFiltered.remove];
+
+      for (let prop in stylePropsFiltered.propsFiltered) {
+        let values = styleProps[prop]
+        //console.log('add', prop);
+        let val = values.length ? values.join(' ') : values[0]
+        el.setAttribute(prop, val)
+      }
 
-      if (!strokeProps.includes('stroke')) {
-        strokeAtts.forEach(att => {
-          el.removeAttribute(att)
+      // remove obsolete attributes
+      for (let i = 0; i < remove.length; i++) {
+        let att = remove[i];
+        if (!stylesToAttributes && att === 'style') continue
 
-          // delete in property object
-          if (item['propsFiltered'][att] !== undefined) delete item['propsFiltered'][att]
+        //console.log('remove att', att, name);
+        el.removeAttribute(att)
+      }
+
+
+
+      /**
+       * remove group styles
+       * copied to children
+       * or remove nesting
+       */
+
+      if (unGroup) {
+        groups.forEach((g, i) => {
+          let children = [...g.children];
+
+          children.forEach(child => {
+            g.parentNode.insertBefore(child, g)
+          })
+          g.remove()
         })
+      } else {
+        groups.forEach((g, i) => {
+          let atts = [...Object.keys(groupProps[i]), 'style', 'transform'];
+          atts.forEach(att => {
+            g.removeAttribute(att)
+          })
+        })
+
       }
+
+
+    } // endof style processing
+
+
+    /**
+     * element conversions:
+     * shapes to paths or 
+     * paths to shapes
+     */
+
+
+    // force shape conversion when transform conversion is enabled
+    if (convertTransforms) {
+      shapeConvert = 'toPaths';
+      convert_rects = true;
+      convert_ellipses = true;
+      convert_poly = true;
+      convert_lines = true;
     }
-  }
 
-  // group styles
-  if (attributesToGroup || mergePaths) {
-    moveAttributesToGroup(svgElProps, mergePaths)
-  }
+    // convert shapes to paths
+    if (shapeConvert === 'toPaths') {
 
-  if (removeDimensions) {
-    svg.removeAttribute('width')
-    svg.removeAttribute('height')
-  }
+      let { matrix = null, transComponents = null } = styleProps;
 
-  if (removeClassNames || removeIds) {
-    let att = removeClassNames ? 'class' : 'id';
-    let selector = `[${att}]`
-    let els = svg.querySelectorAll(selector)
-    svg.removeAttribute(att)
-    els.forEach(el => {
-      el.removeAttribute(att)
-    })
-  }
+      if (matrix && transComponents) {
+        // scale props like stroke width or dash-array before conversion
+        ['stroke-width', 'stroke-dasharray'].forEach(att => {
+          let attVal = el.getAttribute(att)
+          let vals = attVal ? attVal.split(' ').filter(Boolean).map(Number).map(val => val * transComponents.scaleX) : []
+          if (vals.length) el.setAttribute(att, vals.join(' '))
+        })
+      }
 
-  //console.log('!!!svgMarkup', svgMarkup);
+      // convert paths only if a matrix transform is required
+      if (matrix ? geometryEls.includes(name) : shapeEls.includes(name)) {
 
+        let path = shapeElToPath(el, { width, height, convert_rects, convert_ellipses, convert_poly, convert_lines, matrix });
+        el.replaceWith(path)
 
+        name = 'path'
+        el = path;
 
-  /**
-   * refine properties 
-   * such as transforms or properties including units
-   */
 
-  /*
-  for(let i=0; i<svgElProps.length; i++){
-    let item = svgElProps[i];
-    let {propsFiltered} = item;
+      }
 
-    for(let prop in propsFiltered){
+    }
 
-      let propOb = parseStyleProperty(prop, propsFiltered[prop])
+    // convert paths to shapes 
+    else if (shapeConvert === 'toShapes') {
+      let paths = svg.querySelectorAll('path')
+      paths.forEach(path => {
+        let shape = pathElToShape(path, { convert_rects, convert_ellipses, convert_poly, convert_lines })
+        path.replaceWith(shape)
+        path = shape;
+      })
 
     }
 
-  }
-  */
+
+
+  }//endof element loop
+
+
+
+
 
   // remove futile clip-paths
   if (cleanupClip) removeFutileClipPaths(svg, { x, y, width, height })
@@ -457,7 +637,7 @@ function moveAttributesToGroup(svgElProps = [], mergePaths = true) {
 
       // wrap in group if not existent
       if (!g) {
-        g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+        g = document.createElementNS(svgNs, 'g');
         el0.parentNode.insertBefore(g, el0)
         group.forEach(item => {
           g.append(item.el)
@@ -518,6 +698,35 @@ function moveAttributesToGroup(svgElProps = [], mergePaths = true) {
 }
 
 
+export function scaleProps(styleProps = {}, { props = [], scale = 1 } = {}) {
+  if (scale === 1 || !props.length) return props;
+
+  for (let i = 0; i < props.length; i++) {
+    let prop = props[i];
+
+    if (styleProps[prop] !== undefined) {
+      styleProps[prop] = styleProps[prop].map(val => val * scale)
+    }
+  }
+  return styleProps
+}
+
+export function removeSVGEls(svg, {
+  remove = ['metadata', 'script'],
+  removeNameSpaced = true,
+} = {}) {
+  let els = svg.querySelectorAll('*')
+  els.forEach(el => {
+    let nodeName = el.nodeName;
+    if ((removeNameSpaced && nodeName.includes(':')) ||
+      remove.includes(nodeName)
+    ) {
+      el.remove()
+    }
+  })
+}
+
+
 function cleanSvgPrologue(svgString) {
   return (
     svgString
@@ -552,22 +761,32 @@ function removeAtts(el, exclude = [], include = []) {
 }
 
 
-function removeNameSpaceAtts(el) {
+function removeNameSpaceAtts(el, {
+  include = ['xlink:href']
+} = {}) {
   let atts = [...el.attributes].map((att) => att.name);
   atts.forEach((att) => {
-    if (att.includes(":")) {
+    if (att.includes(":") && !include.includes(att)) {
       el.removeAttribute(att);
     }
   });
 }
 
-export function stringifySVG(svg, omitNamespace = false) {
+export function stringifySVG(svg, {
+  omitNamespace = false,
+  removeComments = true,
+} = {}) {
   let markup = new XMLSerializer().serializeToString(svg);
 
   if (omitNamespace) {
     markup = markup.replaceAll('xmlns="http://www.w3.org/2000/svg"', '')
   }
 
+  if (removeComments) {
+    markup = markup
+      .replace(/(<!--.*?-->)|(<!--[\S\s]+?-->)|(<!--[\S\s]*?$)/g, '')
+  }
+
   markup = markup
     .replace(/\t/g, "")
     .replace(/[\n\r|]/g, "\n")
@@ -576,9 +795,12 @@ export function stringifySVG(svg, omitNamespace = false) {
     //.replace(/  +/g, ' ')
     .replace(/> </g, '><')
     .trim()
-     // sanitize linebreaks within pathdata
+    // sanitize linebreaks within pathdata
     .replaceAll('&#10;', '\n');
 
 
+
+
+
   return markup
 }