svg-path-simplify 0.4.3 → 0.4.4

package/src/svgii/svg_cleanup.js

@@ -17,7 +17,7 @@ import { qrDecomposeMatrix } from "./transform_qr_decompose";
 import { svgNs } from "../constants";
 import { toCamelCase, toShortStr } from "../string_helpers";
 import { getElementLength } from "./svg_getElementLength";
-import { removeHiddenSvgEls, removeSvgAtts, removeSvgChildAtts, removeSvgEls } from "./svg_cleanup_remove_els_and_atts";
+import { removeAtts, removeHiddenSvgEls, removeSvgAtts, removeSvgChildAtts, removeSvgEls } from "./svg_cleanup_remove_els_and_atts";
 import { cleanupSVGAttributes, removeElAtts } from "./svg_cleanup_general_svg_atts";
 import { convertPathLengthAtt } from "./svg_cleanup_convertPathLength";
 import { removeGroupProps, ungroupElements } from "./svg_cleanup_ungroup";
@@ -54,7 +54,10 @@ export function cleanUpSVG(svgMarkup, {
   cleanupSVGAtts = true,
   removeNameSpaced = true,
   removeNameSpacedAtts = true,
+
+  // unit conversions
   convertPathLength = false,
+  toAbsoluteUnits = false,
 
   // meta
   allowMeta = false,
@@ -82,10 +85,10 @@ export function cleanUpSVG(svgMarkup, {
 
 
   // resolve dependencies
-  if (unGroup || convertTransforms || minifyRgbColors || attributesToGroup) 
-  stylesToAttributes = true;
+  if (unGroup || convertTransforms || minifyRgbColors || attributesToGroup)
+    stylesToAttributes = true;
 
-  if(stylesToAttributes) cleanUpStrokes = true;
+  if (stylesToAttributes) cleanUpStrokes = true;
 
   // replace namespaced refs 
   if (fixHref) svgMarkup = svgMarkup.replaceAll("xlink:href=", "href=");
@@ -136,7 +139,7 @@ export function cleanUpSVG(svgMarkup, {
     removeClassNames,
     minifyRgbColors,
     stylesheetProps: {},
-    exclude:[]
+    exclude: []
   }
 
   // root svg inline style properties
@@ -275,9 +278,16 @@ export function cleanUpSVG(svgMarkup, {
     if (stylePropsSVG['class']) delete stylePropsSVG['class']
     if (stylePropsSVG['id']) delete stylePropsSVG['id']
 
+    // add svg props
+    inheritedProps = {
+      ...stylePropsSVG,
+      ...inheritedProps,
+    };
+
+    //console.log('inheritedProps', inheritedProps);
+
     // merge with svg props
     styleProps = {
-      ...stylePropsSVG,
       ...inheritedProps,
       ...styleProps
     }
@@ -287,7 +297,6 @@ export function cleanUpSVG(svgMarkup, {
     addTransFormProps(styleProps, transFormInherited);
     //console.log('transFormInherited', transFormInherited);
     //console.log('styleProps', styleProps);
-
     remove = [...new Set([...remove, ...styleProps.remove])];
 
 
@@ -325,6 +334,46 @@ export function cleanUpSVG(svgMarkup, {
     // general cleanup
     if (cleanupSVGAtts) cleanupSVGAttributes(svg, { removeIds, removeClassNames, removeDimensions, stylesToAttributes, allowMeta, allowAriaAtts, allowDataAtts });
 
+    // all relative units to absolute
+    if (toAbsoluteUnits) {
+      normalizeTransforms = true;
+      //stylesToAttributes = true
+      //console.log(name, styleProps);
+
+      /**
+       * apply consolidated 
+       * element attributes
+       * remove non-supported element props
+       */
+      stylePropsFiltered = filterSvgElProps(name, styleProps,
+        { removeDefaults: true, cleanUpStrokes, allowMeta, allowAriaAtts, allowDataAtts, removeIds, inheritedProps });
+
+
+      for (let prop in stylePropsFiltered.propsFiltered) {
+        let values = styleProps[prop]
+        let val = values.length ? values.join(' ') : values[0]
+        el.setAttribute(prop, val)
+      }
+
+      //console.log('inheritedProps', inheritedProps);
+      //console.log('current props', stylePropsFiltered.propsFiltered);
+
+      let removeAttsEl = [...new Set([...remove, ...stylePropsFiltered.remove])];
+
+      // check if same value is in inherited 
+      for (let prop in stylePropsFiltered.propsFiltered) {
+        let valInh = inheritedProps[prop] || [];
+        let val = stylePropsFiltered.propsFiltered[prop] || [];
+        if (valInh.join() === val.join()) {
+          removeAttsEl.push(prop)
+        }
+      }
+
+      // remove obsolete/inherited
+      removeAtts(el, removeAttsEl)
+
+    }
+
 
 
     if (stylesToAttributes) {
@@ -345,12 +394,9 @@ export function cleanUpSVG(svgMarkup, {
        * remove non-supported element props
        */
       stylePropsFiltered = filterSvgElProps(name, styleProps,
-        { removeDefaults: true, cleanUpStrokes, allowMeta, allowAriaAtts, allowDataAtts, removeIds });
+        { removeDefaults: true, cleanUpStrokes, allowMeta, allowAriaAtts, allowDataAtts, removeIds, inheritedProps });
 
-      //remove = [...remove, ...stylePropsFiltered.remove];
       remove = [...new Set([...remove, ...stylePropsFiltered.remove])];
-      //console.log('el remove', name, remove);
-      //console.log('!!stylePropsFiltered', name, stylePropsFiltered);
 
       for (let prop in stylePropsFiltered.propsFiltered) {
         let values = styleProps[prop]
@@ -363,14 +409,14 @@ export function cleanUpSVG(svgMarkup, {
        * remove obsolete 
        * attributes
        */
-      //removeSvgChildAtts(svg, remove)
+      removeAtts(el, remove)
 
+      /*
       for (let i = 0; i < remove.length; i++) {
         let att = remove[i];
-        //if (att === 'style') continue
-        //console.log('--remove att', remove, att, name);
         el.removeAttribute(att)
       }
+      */
 
 
     } // endof style processing
@@ -460,15 +506,15 @@ export function cleanUpSVG(svgMarkup, {
         let values = stylePropsFiltered[prop]
         let val = values.length ? values.join(' ') : values[0]
 
-        if(prop!=='class' && prop!=='id'){
+        if (prop !== 'class' && prop !== 'id') {
 
           let propShort = toShortStr(prop)
           let valShort = toShortStr(val)
           let propStr = `${propShort}-${valShort}`;
-  
+
           // store in node property
           if (!el.styleSet) el.styleSet = new Set()
-          if(propStr) el.styleSet.add(propStr)
+          if (propStr) el.styleSet.add(propStr)
         }
       }
 
@@ -524,7 +570,7 @@ export function cleanUpSVG(svgMarkup, {
 
 
 function removeEmptyClassAtts(svg) {
-  let emptyClassEls = svg.querySelectorAll('[class=""');
+  let emptyClassEls = svg.querySelectorAll('[class=""]');
   emptyClassEls.forEach(el => {
     el.removeAttribute('class')
   })
@@ -538,7 +584,7 @@ function sharedAttributesToGroup(svg) {
 
   let els = svg.querySelectorAll(renderedEls.join(', '))
   let len = els.length;
-  if(len===1) return;
+  if (len === 1) return;
 
   let el0 = els[0] || null
   let stylePrev = el0.styleSet !== undefined ? [...el0.styleSet].join('_') : ''
@@ -623,7 +669,7 @@ function sharedAttributesToGroup(svg) {
 
 
       // create new group
-      if (!groupEl || groups.length>1) {
+      if (!groupEl || groups.length > 1) {
         //console.log('new group');
         groupEl = document.createElementNS(svgNs, 'g')
         child0.parentNode.insertBefore(groupEl, child0)
@@ -719,7 +765,9 @@ function removeOffCanvasEls(svg, { x = 0, y = 0, width = 0, height = 0 } = {}) {
   bb0.bottom = y + height
 
   els.forEach(el => {
+    //console.log(el);
     let bb = getElBBox(el)
+    //console.log('!!bb', bb);
     let outside = bb.right < bb0.x || bb.bottom < bb0.y || bb.x > bb0.right || bb.y > bb.bottom
     if (outside) el.remove();
   })

package/src/svgii/svg_cleanup_convertPathLength.js

@@ -1,29 +1,36 @@
+import { scaleProps } from "./svg_cleanup_normalize_transforms";
+import { getElementLength } from "./svg_getElementLength";
+
 export function convertPathLengthAtt(el, {
     styleProps = {}
-}={}) {
+} = {}) {
+
+    let pathLength = styleProps['pathLength'];
+
+    if (pathLength) {
 
-    let pathLength = el.getAttribute('pathLength') ? +el.getAttribute('pathLength') : 0;
-    //let strokeDasharray 
-    if (pathLength && (styleProps['stroke-dasharray'] || styleProps['stroke-dashoffset'])) {
-        let elLength = getElementLength(el, {
-            pathLength,
-            props: styleProps
-        })
+        //let strokeDasharray 
+        if ((styleProps['stroke-dasharray'] || styleProps['stroke-dashoffset'])) {
+            let elLength = getElementLength(el, {
+                pathLength,
+                props: styleProps
+            })
 
-        let scale = elLength / pathLength
-        //scale = 1/scale
+            let scale = elLength / pathLength
+            styleProps = scaleProps(styleProps, { props: ['stroke-dasharray', 'stroke-dashoffset'], scale })
 
-        styleProps = scaleProps(styleProps, { props: ['stroke-dasharray', 'stroke-dashoffset'], scale })
-        let [strokeDasharrayN = [], strokeDashoffsetN = []] = [styleProps['stroke-dasharray'], styleProps['stroke-dashoffset']]
-        //if(strokeDasharrayN.length) el.setAttribute('stroke-dasharray', strokeDasharrayN.map(val=>roundTo(val, 3)).join(' '))
-        //if(strokeDashoffsetN.length) el.setAttribute('stroke-dashoffset', strokeDashoffsetN.map(val=>roundTo(val, 3)).join(' '))
+            // set absolute
+            if (styleProps['stroke-dasharray']) el.setAttribute('stroke-dasharray', styleProps['stroke-dasharray'].join(' '))
+            if (styleProps['stroke-dashoffset']) el.setAttribute('stroke-dashoffset', styleProps['stroke-dashoffset'][0])
+
+        }
 
         // tag for removal
         delete styleProps['pathLength'];
         styleProps.remove.push('pathLength')
         el.removeAttribute('pathLength')
 
-        //console.log(name, styleProps, 'pathLength', pathLength, elLength, scale, 'strokeDasharrayN', strokeDasharrayN);
+
     }
 
     return styleProps;

package/src/svgii/svg_cleanup_remove_els_and_atts.js

@@ -51,11 +51,16 @@ export function removeSvgEls(svg, {
 */
 
 export function removeSvgAtts(svg, remove = []) {
+  removeAtts(svg, remove)
+}
+
+export function removeAtts(el, remove = []) {
   remove.forEach(att => {
-    svg.removeAttribute(att);
+    el.removeAttribute(att);
   })
 }
 
+
 export function removeSvgChildAtts(svg, remove = []) {
   if (remove.length) {
     let selector = remove.map(att => { return `[${att}]` }).join(', ')

package/src/svgii/svg_el_parse_style_props.js

@@ -18,8 +18,8 @@ export function parseStylesProperties(el, {
     autoRoundValues = false,
     minifyRgbColors = false,
     removeInvalid = true,
-    allowDataAtts=true,
-    allowAriaAtts=true,
+    allowDataAtts = true,
+    allowAriaAtts = true,
     removeDefaults = true,
     cleanUpStrokes = true,
     normalizeTransforms = true,
@@ -94,7 +94,7 @@ export function parseStylesProperties(el, {
      */
 
     if (removeInvalid || removeDefaults || removeNameSpaced) {
-        let propsFilteredObj = filterSvgElProps(nodeName, props, {allowDataAtts, allowAriaAtts, removeIds, removeClassNames, removeDefaults, removeNameSpaced, exclude, cleanUpStrokes, include: [...transformsStandalone, ...include], cleanUpStrokes: false })
+        let propsFilteredObj = filterSvgElProps(nodeName, props, { allowDataAtts, allowAriaAtts, removeIds, removeClassNames, removeDefaults, removeNameSpaced, exclude, cleanUpStrokes, include: [...transformsStandalone, ...include], cleanUpStrokes: false })
         props = propsFilteredObj.propsFiltered
         remove.push(...propsFilteredObj.remove)
         //console.log(propsFilteredObj.remove, allowDataAtts, allowAriaAtts);
@@ -196,10 +196,11 @@ export function parseStylesProperties(el, {
 
         if (prop !== 'transforms') {
 
-            if (cleanUpStrokes && (prop === 'stroke-dasharray' || prop === 'stroke-dashoffset')) {
+            //cleanUpStrokes &&
+            if ((prop === 'stroke-dasharray' || prop === 'stroke-dashoffset')) {
                 normalizedDiagonal = true
                 for (let i = 0; i < values.length; i++) {
-                    let val = normalizeUnits(values[i].value, { unit: values[i].unit, width, height, normalizedDiagonal, fontSize })
+                    let val = normalizeUnits(values[i].value, { unit: values[i].unit, width, height, normalizedDiagonal, fontSize, autoRoundValues })
                     valsNew.push(val)
                 }
             }
@@ -244,15 +245,12 @@ export function parseStylesProperties(el, {
                         if (prop === 'scale' && unit === '%') {
                             valAbs = valAbs * 0.01;
                         } else {
-                            if (prop === 'r') normalizedDiagonal = true;
+                            if (prop === 'r' && width!==height)  normalizedDiagonal = true;
                             valAbs = normalizeUnits(val.value, { unit, width, height, isHorizontal, isVertical, normalizedDiagonal, fontSize })
 
                             if (autoRoundValues && isNumeric) {
                                 valAbs = autoRound(valAbs)
-                                //valAbs = roundTo(valAbs, 3)
                             }
-
-                            //console.log('norm', prop, valAbs, 'val', val, unit, isHorizontal, isVertical, width, height, 'isNumeric', isNumeric);
                         }
                     }
                     valsNew.push(valAbs)
@@ -466,6 +464,7 @@ export function filterSvgElProps(elNodename = '', props = {}, {
     removeIds = false,
     removeClassNames = false,
     exclude = [],
+    inheritedProps = null,
 } = {}) {
     let propsFiltered = {}
     let remove = [];
@@ -474,6 +473,7 @@ export function filterSvgElProps(elNodename = '', props = {}, {
     if (!removeClassNames) include.push('class')
     //console.log('???include', 'removeIds', removeIds, include);
 
+
     // allow defaults for nested
     //removeDefaults = false;
 
@@ -490,6 +490,7 @@ export function filterSvgElProps(elNodename = '', props = {}, {
             (attLookup.atts[prop] ? attLookup.atts[prop].includes(elNodename) : false) :
             false;
 
+
         // remove null transforms
         if (prop === 'transform' && value === 'matrix(1 0 0 1 0 0)') isValid = false;
 
@@ -498,7 +499,7 @@ export function filterSvgElProps(elNodename = '', props = {}, {
         let isMeta = prop === 'title'
         let isAria = prop.startsWith('aria-')
 
-        if( (allowDataAtts && isDataAtt) || (allowAriaAtts && isAria) || (allowMeta && isMeta ) ) continue
+        if ((allowDataAtts && isDataAtt) || (allowAriaAtts && isAria) || (allowMeta && isMeta)) continue
 
         // filter out defaults
         let isDefault = removeDefaults ?
@@ -509,6 +510,8 @@ export function filterSvgElProps(elNodename = '', props = {}, {
 
         if (isDefault || isDataAtt || isMeta || isAria || isFutileStroke) isValid = false
         if (include.includes(prop)) isValid = true;
+        if (exclude.includes(prop)) isValid = false
+
 
         if (isValid) {
             propsFiltered[prop] = props[prop]

package/src/svgii/svg_validate.js

@@ -0,0 +1,220 @@
+
+
+export function validateSVG(markup, allowed = {}) {
+  allowed = {
+    ...{
+      //useEls: 10,
+      //hasPrologue: false,
+      //hasXmlns: true,
+      useElsNested: 5000,
+      hasScripts: false,
+      hasEntity: false,
+      fileSizeKB: 10000,
+      isSymbolSprite: false,
+      isSvgFont: false
+    },
+    ...allowed
+  };
+
+
+  let fileReport = analyzeSVG(markup, allowed);
+  let isValid = true;
+  let log = [];
+
+  if (!fileReport.hasEls) {
+    log.push("no elements");
+    isValid = false;
+  }
+
+  if (Object.keys(fileReport).length) {
+    if (fileReport.isBillionLaugh === true) {
+      log.push(`suspicious: might contain billion laugh attack`);
+      isValid = false;
+    }
+
+    for (let key in allowed) {
+      let val = allowed[key];
+      let valRep = fileReport[key];
+      if (typeof val === "number" && valRep > val) {
+        log.push(`allowed "${key}" exceeded: ${valRep} / ${val} `);
+        isValid = false;
+      }
+      if (valRep === true && val === false) {
+        log.push(`not allowed: "${key}" `);
+        isValid = false;
+      }
+    }
+  } else {
+    isValid = false;
+  }
+
+  /*
+  if (!isValid) {
+    log = ["SVG not valid"].concat(log);
+    //console.log(log.join("\n"));
+    if (Object.keys(fileReport).length) {
+      console.warn(fileReport);
+    }
+  }
+  */
+
+  return { isValid, log, fileReport };
+}
+
+function analyzeSVG(markup, allowed = {}) {
+  markup = markup.trim();
+  let doc, svg;
+  let fileSizeKB = +(markup.length / 1024).toFixed(3);
+
+  let fileReport = {
+    totalEls: 1,
+    hasEls: true,
+    hasDefs: false,
+    geometryEls: [],
+    useEls: 0,
+    useElsNested: 0,
+    nonsensePaths: 0,
+    isSuspicious: false,
+    isBillionLaugh: false,
+    hasScripts: false,
+    hasPrologue: false,
+    hasEntity: false,
+    isPathData:false,
+    fileSizeKB,
+    hasXmlns: markup.includes("http://www.w3.org/2000/svg"),
+    isSymbolSprite: false,
+    isSvgFont: markup.includes("<glyph>")
+  };
+
+
+  let maxNested = allowed.useElsNested ? allowed.useElsNested : 2000;
+
+  /**
+   * analyze nestes use references
+   */
+  const countUseRefs = (useEls, maxNested = 2000) => {
+    let nestedCount = 0;
+    //stop loop if number of nested use references is exceeded
+    for (let i = 0; i < useEls.length && nestedCount < maxNested; i++) {
+      let use = useEls[i];
+      let refId = use.getAttribute("xlink:href")
+        ? use.getAttribute("xlink:href")
+        : use.getAttribute("href");
+      refId = refId ? refId.replace("#", "") : "";
+
+      //normalize href attributes to facilitate JS selection
+      use.setAttribute("href", "#" + refId);
+
+      let refEl = svg.getElementById(refId);
+      let nestedUse = refEl.querySelectorAll("use");
+      let nestedUseLength = nestedUse.length;
+      nestedCount += nestedUseLength;
+
+      // query nested use references
+      for (let n = 0; n < nestedUse.length && nestedCount < maxNested; n++) {
+        let nested = nestedUse[n];
+        let id1 = nested.getAttribute("href").replace("#", "");
+        let refEl1 = svg.getElementById(id1);
+        let nestedUse1 = refEl1.querySelectorAll("use");
+        nestedCount += nestedUse1.length;
+      }
+    }
+    fileReport.useElsNested = nestedCount;
+    return nestedCount;
+  };
+
+  /**
+   * check on raw text level
+   */
+  let hasPrologue = /\<\?xml.+\?\>|\<\!DOCTYPE.+]\>/g.test(markup);
+  let hasEntity = /\<\!ENTITY/gi.test(markup);
+  let hasScripts = /\<script/gi.test(markup) ? true : false;
+  let hasUse = /\<use/gi.test(markup) ? true : false;
+  let hasEls = /[\<path|\<polygon|\<polyline|\<rect|\<circle|\<ellipse|\<line|\<text|\<foreignObject]/gi.test(markup);
+  let hasDefs = /[\<filter|\<linearGradient|\<radialGradient|\<pattern|\<animate|\<animateMotion|\<animateTransform|\<clipPath|\<mask|\<symbol|\<marker]/gi.test(markup);
+
+  let isPathData = (markup.startsWith('M') || markup.startsWith('m')) && !/[\<svg|\<\/svg]/gi.test(markup);
+  fileReport.isPathData = isPathData;
+
+  // seems OK
+  if (!hasEntity && !hasUse && !hasScripts && (hasEls || hasDefs) && fileSizeKB < allowed.fileSizeKB) {
+    fileReport.hasEls = hasEls
+    fileReport.hasDefs = hasDefs
+    //console.log('Looks OK!', fileReport, allowed);
+    return fileReport
+  }
+
+
+  // Contains xml entity definition: highly suspicious - stop parsing!
+  if (allowed.hasEntity === false && hasEntity) {
+    fileReport.hasEntity = true;
+    //return fileReport;
+  }
+
+  /**
+   * sanitizing for parsing:
+   * remove xml prologue and comments
+   */
+  markup = markup
+    .replace(/\<\?xml.+\?\>|\<\!DOCTYPE.+]\>/g, "")
+    .replace(/(<!--.*?-->)|(<!--[\S\s]+?-->)|(<!--[\S\s]*?$)/g, "");
+
+  /**
+   * Try to parse svg:
+   * invalid svg will return false via "catch"
+   */
+  try {
+    //doc = new DOMParser().parseFromString(markup, "image/svg+xml");
+    doc = new DOMParser().parseFromString(markup, "text/html");
+    svg = doc.querySelector("svg");
+
+    // paths containing only a M command
+    let nonsensePaths = svg.querySelectorAll('path[d="M0,0"], path[d="M0 0"]').length;
+    let useEls = svg.querySelectorAll("use").length;
+
+
+    // create analyzing object
+    fileReport.totalEls = svg.querySelectorAll("*").length;
+    fileReport.geometryEls = svg.querySelectorAll(
+      "path, rect, circle, ellipse, polygon, polyline, line"
+    ).length
+
+    fileReport.hasScripts = hasScripts
+    fileReport.useEls = useEls;
+    fileReport.nonsensePaths = nonsensePaths;
+    fileReport.isSuspicious = false;
+    fileReport.isBillionLaugh = false;
+    fileReport.hasXmlns = svg.getAttribute("xmlns")
+      ? svg.getAttribute("xmlns") === "http://www.w3.org/2000/svg"
+        ? true
+        : false
+      : false;
+    fileReport.isSymbolSprite = 
+    svg.querySelectorAll("symbol").length &&
+      svg.querySelectorAll("use").length === 0
+      ? true
+      : false;
+    fileReport.isSvgFont = svg.querySelectorAll("glyph").length ? true : false;
+
+    let totalEls = fileReport.totalEls;
+    let totalUseEls = fileReport.useEls;
+    let usePercentage = (100 / totalEls) * totalUseEls;
+
+    // if percentage of use elements is higher than 75% - suspicious
+    if (usePercentage > 75) {
+      fileReport.isSuspicious = true;
+
+      // check nested use references
+      let nestedCount = countUseRefs(svg.querySelectorAll("use"), maxNested);
+      if (nestedCount >= maxNested) {
+        fileReport.isBillionLaugh = true;
+      }
+    }
+
+    return fileReport;
+  } catch {
+    // svg file has malformed markup
+    console.warn("svg could not be parsed");
+    return false;
+  }
+}

package/tests/testSVG.js

@@ -19,8 +19,21 @@ let svgMarkup =
 </g>
 </svg>`
 
+
+/*
+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(d);
+*/
+
+
+
+
 // try to simplify
-let svgOpt = svgPathSimplify(svgMarkup, {scaleTo:24});
+let svgOpt = svgPathSimplify(svgMarkup, {preset:'high'});
 
 // simplified pathData
 console.log(svgOpt)