svg-path-simplify 0.4.3 → 0.4.5

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)

package/src/svgii/pathData_refine_round.js

@@ -1,222 +0,0 @@
-import { checkLineIntersection, getAngle, getDistAv, getDistance, getPointOnEllipse, getSquareDistance, pointAtT, rotatePoint } from "./geometry";
-import { getPolygonArea } from "./geometry_area";
-import { getArcFromPoly } from "./geometry_deduceRadius";
-import { arcToBezierResolved, revertCubicQuadratic } from "./pathData_convert";
-import { pathDataToD } from "./pathData_stringify";
-import { renderPath, renderPoint, renderPoly } from "./visualize";
-
-export function refineRoundSegments(pathData, {
-    threshold = 0,
-    tolerance = 1,
-    // take arcs or cubic beziers
-    toCubic = false,
-    debug = false
-} = {}) {
-
-
-    // min size threshold for corners
-    threshold *= tolerance;
-
-    let l = pathData.length;
-
-    // add fist command
-    let pathDataN = [pathData[0]]
-
-    // just for debugging
-    let pathDataTest = []
-
-    for (let i = 1; i < l; i++) {
-        let com = pathData[i];
-        let { type } = com;
-        let comP = pathData[i - 1];
-        let comN = pathData[i + 1] ? pathData[i + 1] : null;
-        let comN2 = pathData[i + 2] ? pathData[i + 2] : null;
-        let comN3 = pathData[i + 3] ? pathData[i + 3] : null;
-        let comBez = null;
-
-        if ((com.type === 'C' || com.type === 'Q')) comBez = com;
-        else if (comN && (comN.type === 'C' || comN.type === 'Q')) comBez = comN;
-
-
-        let cpts = comBez ? (comBez.type === 'C' ? [comBez.p0, comBez.cp1, comBez.cp2, comBez.p] : [comBez.p0, comBez.cp1, comBez.p]) : []
-
-        let areaBez = 0;
-        let areaLines = 0;
-        let signChange = false;
-        let L1, L2;
-        let combine = false
-
-        let p0_S, p_S;
-        let poly = []
-        let pMid;
-
-
-        // 2. line-line-bezier-line-line
-        if (
-            comP.type === 'L' &&
-            type === 'L' &&
-            comBez &&
-            comN2.type === 'L' &&
-            comN3 && (comN3.type === 'L' || comN3.type === 'Z')
-        ) {
-
-            L1 = [com.p0, com.p];
-            L2 = [comN2.p0, comN2.p];
-            p0_S = com.p0
-            p_S = comN2.p
-
-            // don't allow sign changes
-            areaBez = getPolygonArea(cpts, false)
-            areaLines = getPolygonArea([...L1, ...L2], false)
-            signChange = (areaBez < 0 && areaLines > 0) || (areaBez > 0 && areaLines < 0)
-
-            if (!signChange) {
-
-                // mid point of mid bezier
-                pMid = pointAtT(cpts, 0.5)
-
-                // add to poly
-                poly = [p0_S, pMid, p_S]
-
-                combine = true
-            }
-
-        }
-
-        // 1. line-bezier-bezier-line
-        else if ((type === 'C' || type === 'Q') && comP.type === 'L') {
-
-            // 1.2 next is cubic next is lineto
-            if ((comN.type === 'C' || comN.type === 'Q') && comN2.type === 'L') {
-
-                combine = true
-
-                L1 = [comP.p0, comP.p];
-                L2 = [comN2.p0, comN2.p];
-                p0_S = comP.p
-                p_S = comN2.p0
-
-                // mid point of mid bezier
-                pMid = comBez.p
-
-                // add to poly
-                poly = [p0_S, comBez.p, p_S]
-
-
-            }
-        }
-
-
-        /**
-         * calculate either combined
-         * cubic or arc commands
-         */
-        if (combine) {
-
-
-            // try to find center of arc
-            let arcProps = getArcFromPoly(poly)
-            if (arcProps) {
-
-                let { centroid, r, deltaAngle, startAngle, endAngle } = arcProps;
-
-                let xAxisRotation = 0;
-                let sweep = deltaAngle > 0 ? 1 : 0;
-                let largeArc = Math.abs(deltaAngle) > Math.PI ? 1 : 0;
-
-                let pCM = rotatePoint(p0_S, centroid.x, centroid.y, deltaAngle * 0.5)
-
-
-                let dist2 = getDistAv(pCM, pMid)
-                let thresh = getDistAv(p0_S, p_S) * 0.05
-                let bezierCommands;
-
-                // point is close enough
-                if (dist2 < thresh) {
-
-                    //toCubic = false;
-
-                    bezierCommands = arcToBezierResolved(
-                        {
-                            p0: p0_S,
-                            p: p_S,
-                            centroid,
-                            rx: r,
-                            ry: r,
-                            xAxisRotation,
-                            sweep,
-                            largeArc,
-                            deltaAngle,
-                            startAngle,
-                            endAngle
-                        }
-                    );
-
-                    if(bezierCommands.length === 1){
-
-                        // prefer more compact quadratic - otherwise arcs
-                        let comBezier = revertCubicQuadratic(p0_S, bezierCommands[0].cp1, bezierCommands[0].cp2, p_S)
-
-                        if (comBezier.type === 'Q') {
-                            toCubic = true
-                        }
-
-                        com = comBezier
-                    }
-
-
-                    // prefer arcs if 2 cubics are required
-                    if (bezierCommands.length > 1) toCubic = false;
-
-
-                    //toCubic = false
-
-                    // return elliptic arc commands
-                    if (!toCubic) {
-                        // rewrite simplified command
-                        com.type = 'A'
-                        com.values = [r, r, xAxisRotation, largeArc, sweep, p_S.x, p_S.y];
-                    }
-
-                    com.p0 = p0_S;
-                    com.p = p_S;
-                    com.extreme = false;
-                    com.corner = false;
-
-                    // test rendering
-                    //debug=true
-
-                    if (debug) {
-                        // arcs
-                        if (!toCubic) {
-                            pathDataTest = [
-                                { type: 'M', values: [p0_S.x, p0_S.y] },
-                                { type: 'A', values: [r, r, xAxisRotation, largeArc, sweep, p_S.x, p_S.y] },
-                            ]
-                        }
-                        // cubics
-                        else {
-                            pathDataTest = [
-                                { type: 'M', values: [p0_S.x, p0_S.y] },
-                                ...bezierCommands
-                            ]
-                        }
-
-                        let d = pathDataToD(pathDataTest);
-                        renderPath(markers, d, 'orange', '0.5%', '0.5')
-                    }
-
-                    pathDataN.push(com);
-                    i++
-                    continue
-
-                }
-            }
-        }
-
-        // pass through
-        pathDataN.push(com)
-    }
-
-    return pathDataN;
-}