svgo-v2 2.8.0

package/plugins/cleanupIDs.js

@@ -0,0 +1,297 @@
+'use strict';
+
+/**
+ * @typedef {import('../lib/types').XastElement} XastElement
+ */
+
+const { visitSkip } = require('../lib/xast.js');
+const { referencesProps } = require('./_collections.js');
+
+exports.type = 'visitor';
+exports.name = 'cleanupIDs';
+exports.active = true;
+exports.description = 'removes unused IDs and minifies used';
+
+const regReferencesUrl = /\burl\(("|')?#(.+?)\1\)/;
+const regReferencesHref = /^#(.+?)$/;
+const regReferencesBegin = /(\w+)\./;
+const generateIDchars = [
+  'a',
+  'b',
+  'c',
+  'd',
+  'e',
+  'f',
+  'g',
+  'h',
+  'i',
+  'j',
+  'k',
+  'l',
+  'm',
+  'n',
+  'o',
+  'p',
+  'q',
+  'r',
+  's',
+  't',
+  'u',
+  'v',
+  'w',
+  'x',
+  'y',
+  'z',
+  'A',
+  'B',
+  'C',
+  'D',
+  'E',
+  'F',
+  'G',
+  'H',
+  'I',
+  'J',
+  'K',
+  'L',
+  'M',
+  'N',
+  'O',
+  'P',
+  'Q',
+  'R',
+  'S',
+  'T',
+  'U',
+  'V',
+  'W',
+  'X',
+  'Y',
+  'Z',
+];
+const maxIDindex = generateIDchars.length - 1;
+
+/**
+ * Check if an ID starts with any one of a list of strings.
+ *
+ * @type {(string: string, prefixes: Array<string>) => boolean}
+ */
+const hasStringPrefix = (string, prefixes) => {
+  for (const prefix of prefixes) {
+    if (string.startsWith(prefix)) {
+      return true;
+    }
+  }
+  return false;
+};
+
+/**
+ * Generate unique minimal ID.
+ *
+ * @type {(currentID: null | Array<number>) => Array<number>}
+ */
+const generateID = (currentID) => {
+  if (currentID == null) {
+    return [0];
+  }
+  currentID[currentID.length - 1] += 1;
+  for (let i = currentID.length - 1; i > 0; i--) {
+    if (currentID[i] > maxIDindex) {
+      currentID[i] = 0;
+      if (currentID[i - 1] !== undefined) {
+        currentID[i - 1]++;
+      }
+    }
+  }
+  if (currentID[0] > maxIDindex) {
+    currentID[0] = 0;
+    currentID.unshift(0);
+  }
+  return currentID;
+};
+
+/**
+ * Get string from generated ID array.
+ *
+ * @type {(arr: Array<number>, prefix: string) => string}
+ */
+const getIDstring = (arr, prefix) => {
+  return prefix + arr.map((i) => generateIDchars[i]).join('');
+};
+
+/**
+ * Remove unused and minify used IDs
+ * (only if there are no any <style> or <script>).
+ *
+ * @author Kir Belevich
+ *
+ * @type {import('../lib/types').Plugin<{
+ *   remove?: boolean,
+ *   minify?: boolean,
+ *   prefix?: string,
+ *   preserve?: Array<string>,
+ *   preservePrefixes?: Array<string>,
+ *   force?: boolean,
+ * }>}
+ */
+exports.fn = (_root, params) => {
+  const {
+    remove = true,
+    minify = true,
+    prefix = '',
+    preserve = [],
+    preservePrefixes = [],
+    force = false,
+  } = params;
+  const preserveIDs = new Set(
+    Array.isArray(preserve) ? preserve : preserve ? [preserve] : []
+  );
+  const preserveIDPrefixes = Array.isArray(preservePrefixes)
+    ? preservePrefixes
+    : preservePrefixes
+    ? [preservePrefixes]
+    : [];
+  /**
+   * @type {Map<string, XastElement>}
+   */
+  const nodeById = new Map();
+  /**
+   * @type {Map<string, Array<{element: XastElement, name: string, value: string }>>}
+   */
+  const referencesById = new Map();
+  let deoptimized = false;
+
+  return {
+    element: {
+      enter: (node) => {
+        if (force == false) {
+          // deoptimize if style or script elements are present
+          if (
+            (node.name === 'style' || node.name === 'script') &&
+            node.children.length !== 0
+          ) {
+            deoptimized = true;
+            return;
+          }
+
+          // avoid removing IDs if the whole SVG consists only of defs
+          if (node.name === 'svg') {
+            let hasDefsOnly = true;
+            for (const child of node.children) {
+              if (child.type !== 'element' || child.name !== 'defs') {
+                hasDefsOnly = false;
+                break;
+              }
+            }
+            if (hasDefsOnly) {
+              return visitSkip;
+            }
+          }
+        }
+
+        for (const [name, value] of Object.entries(node.attributes)) {
+          if (name === 'id') {
+            // collect all ids
+            const id = value;
+            if (nodeById.has(id)) {
+              delete node.attributes.id; // remove repeated id
+            } else {
+              nodeById.set(id, node);
+            }
+          } else {
+            // collect all references
+            /**
+             * @type {null | string}
+             */
+            let id = null;
+            if (referencesProps.includes(name)) {
+              const match = value.match(regReferencesUrl);
+              if (match != null) {
+                id = match[2]; // url() reference
+              }
+            }
+            if (name === 'href' || name.endsWith(':href')) {
+              const match = value.match(regReferencesHref);
+              if (match != null) {
+                id = match[1]; // href reference
+              }
+            }
+            if (name === 'begin') {
+              const match = value.match(regReferencesBegin);
+              if (match != null) {
+                id = match[1]; // href reference
+              }
+            }
+            if (id != null) {
+              let refs = referencesById.get(id);
+              if (refs == null) {
+                refs = [];
+                referencesById.set(id, refs);
+              }
+              refs.push({ element: node, name, value });
+            }
+          }
+        }
+      },
+    },
+
+    root: {
+      exit: () => {
+        if (deoptimized) {
+          return;
+        }
+        /**
+         * @type {(id: string) => boolean}
+         **/
+        const isIdPreserved = (id) =>
+          preserveIDs.has(id) || hasStringPrefix(id, preserveIDPrefixes);
+        /**
+         * @type {null | Array<number>}
+         */
+        let currentID = null;
+        for (const [id, refs] of referencesById) {
+          const node = nodeById.get(id);
+          if (node != null) {
+            // replace referenced IDs with the minified ones
+            if (minify && isIdPreserved(id) === false) {
+              /**
+               * @type {null | string}
+               */
+              let currentIDString = null;
+              do {
+                currentID = generateID(currentID);
+                currentIDString = getIDstring(currentID, prefix);
+              } while (isIdPreserved(currentIDString));
+              node.attributes.id = currentIDString;
+              for (const { element, name, value } of refs) {
+                if (value.includes('#')) {
+                  // replace id in href and url()
+                  element.attributes[name] = value.replace(
+                    `#${id}`,
+                    `#${currentIDString}`
+                  );
+                } else {
+                  // replace id in begin attribute
+                  element.attributes[name] = value.replace(
+                    `${id}.`,
+                    `${currentIDString}.`
+                  );
+                }
+              }
+            }
+            // keep referenced node
+            nodeById.delete(id);
+          }
+        }
+        // remove non-referenced IDs attributes from elements
+        if (remove) {
+          for (const [id, node] of nodeById) {
+            if (isIdPreserved(id) === false) {
+              delete node.attributes.id;
+            }
+          }
+        }
+      },
+    },
+  };
+};

package/plugins/cleanupListOfValues.js

@@ -0,0 +1,154 @@
+'use strict';
+
+const { removeLeadingZero } = require('../lib/svgo/tools.js');
+
+exports.name = 'cleanupListOfValues';
+exports.type = 'visitor';
+exports.active = false;
+exports.description = 'rounds list of values to the fixed precision';
+
+const regNumericValues =
+  /^([-+]?\d*\.?\d+([eE][-+]?\d+)?)(px|pt|pc|mm|cm|m|in|ft|em|ex|%)?$/;
+const regSeparator = /\s+,?\s*|,\s*/;
+const absoluteLengths = {
+  // relative to px
+  cm: 96 / 2.54,
+  mm: 96 / 25.4,
+  in: 96,
+  pt: 4 / 3,
+  pc: 16,
+  px: 1,
+};
+
+/**
+ * Round list of values to the fixed precision.
+ *
+ * @example
+ * <svg viewBox="0 0 200.28423 200.28423" enable-background="new 0 0 200.28423 200.28423">
+ *         ⬇
+ * <svg viewBox="0 0 200.284 200.284" enable-background="new 0 0 200.284 200.284">
+ *
+ * <polygon points="208.250977 77.1308594 223.069336 ... "/>
+ *         ⬇
+ * <polygon points="208.251 77.131 223.069 ... "/>
+ *
+ * @author kiyopikko
+ *
+ * @type {import('../lib/types').Plugin<{
+ *   floatPrecision?: number,
+ *   leadingZero?: boolean,
+ *   defaultPx?: boolean,
+ *   convertToPx?: boolean
+ * }>}
+ */
+exports.fn = (_root, params) => {
+  const {
+    floatPrecision = 3,
+    leadingZero = true,
+    defaultPx = true,
+    convertToPx = true,
+  } = params;
+
+  /**
+   * @type {(lists: string) => string}
+   */
+  const roundValues = (lists) => {
+    const roundedList = [];
+
+    for (const elem of lists.split(regSeparator)) {
+      const match = elem.match(regNumericValues);
+      const matchNew = elem.match(/new/);
+
+      // if attribute value matches regNumericValues
+      if (match) {
+        // round it to the fixed precision
+        let num = Number(Number(match[1]).toFixed(floatPrecision));
+        /**
+         * @type {any}
+         */
+        let matchedUnit = match[3] || '';
+        /**
+         * @type{'' | keyof typeof absoluteLengths}
+         */
+        let units = matchedUnit;
+
+        // convert absolute values to pixels
+        if (convertToPx && units && units in absoluteLengths) {
+          const pxNum = Number(
+            (absoluteLengths[units] * Number(match[1])).toFixed(floatPrecision)
+          );
+
+          if (pxNum.toString().length < match[0].length) {
+            num = pxNum;
+            units = 'px';
+          }
+        }
+
+        // and remove leading zero
+        let str;
+        if (leadingZero) {
+          str = removeLeadingZero(num);
+        } else {
+          str = num.toString();
+        }
+
+        // remove default 'px' units
+        if (defaultPx && units === 'px') {
+          units = '';
+        }
+
+        roundedList.push(str + units);
+      }
+      // if attribute value is "new"(only enable-background).
+      else if (matchNew) {
+        roundedList.push('new');
+      } else if (elem) {
+        roundedList.push(elem);
+      }
+    }
+
+    return roundedList.join(' ');
+  };
+
+  return {
+    element: {
+      enter: (node) => {
+        if (node.attributes.points != null) {
+          node.attributes.points = roundValues(node.attributes.points);
+        }
+
+        if (node.attributes['enable-background'] != null) {
+          node.attributes['enable-background'] = roundValues(
+            node.attributes['enable-background']
+          );
+        }
+
+        if (node.attributes.viewBox != null) {
+          node.attributes.viewBox = roundValues(node.attributes.viewBox);
+        }
+
+        if (node.attributes['stroke-dasharray'] != null) {
+          node.attributes['stroke-dasharray'] = roundValues(
+            node.attributes['stroke-dasharray']
+          );
+        }
+
+        if (node.attributes.dx != null) {
+          node.attributes.dx = roundValues(node.attributes.dx);
+        }
+
+        if (node.attributes.dy != null) {
+          node.attributes.dy = roundValues(node.attributes.dy);
+        }
+
+        if (node.attributes.x != null) {
+          node.attributes.x = roundValues(node.attributes.x);
+        }
+
+        if (node.attributes.y != null) {
+          node.attributes.y = roundValues(node.attributes.y);
+        }
+      },
+    },
+  };
+};

package/plugins/cleanupNumericValues.js

@@ -0,0 +1,113 @@
+'use strict';
+
+const { removeLeadingZero } = require('../lib/svgo/tools');
+
+exports.name = 'cleanupNumericValues';
+exports.type = 'visitor';
+exports.active = true;
+exports.description =
+  'rounds numeric values to the fixed precision, removes default ‘px’ units';
+
+const regNumericValues =
+  /^([-+]?\d*\.?\d+([eE][-+]?\d+)?)(px|pt|pc|mm|cm|m|in|ft|em|ex|%)?$/;
+
+const absoluteLengths = {
+  // relative to px
+  cm: 96 / 2.54,
+  mm: 96 / 25.4,
+  in: 96,
+  pt: 4 / 3,
+  pc: 16,
+  px: 1,
+};
+
+/**
+ * Round numeric values to the fixed precision,
+ * remove default 'px' units.
+ *
+ * @author Kir Belevich
+ *
+ * @type {import('../lib/types').Plugin<{
+ *   floatPrecision?: number,
+ *   leadingZero?: boolean,
+ *   defaultPx?: boolean,
+ *   convertToPx?: boolean
+ * }>}
+ */
+exports.fn = (_root, params) => {
+  const {
+    floatPrecision = 3,
+    leadingZero = true,
+    defaultPx = true,
+    convertToPx = true,
+  } = params;
+
+  return {
+    element: {
+      enter: (node) => {
+        if (node.attributes.viewBox != null) {
+          const nums = node.attributes.viewBox.split(/\s,?\s*|,\s*/g);
+          node.attributes.viewBox = nums
+            .map((value) => {
+              const num = Number(value);
+              return Number.isNaN(num)
+                ? value
+                : Number(num.toFixed(floatPrecision));
+            })
+            .join(' ');
+        }
+
+        for (const [name, value] of Object.entries(node.attributes)) {
+          // The `version` attribute is a text string and cannot be rounded
+          if (name === 'version') {
+            continue;
+          }
+
+          const match = value.match(regNumericValues);
+
+          // if attribute value matches regNumericValues
+          if (match) {
+            // round it to the fixed precision
+            let num = Number(Number(match[1]).toFixed(floatPrecision));
+            /**
+             * @type {any}
+             */
+            let matchedUnit = match[3] || '';
+            /**
+             * @type{'' | keyof typeof absoluteLengths}
+             */
+            let units = matchedUnit;
+
+            // convert absolute values to pixels
+            if (convertToPx && units !== '' && units in absoluteLengths) {
+              const pxNum = Number(
+                (absoluteLengths[units] * Number(match[1])).toFixed(
+                  floatPrecision
+                )
+              );
+              if (pxNum.toString().length < match[0].length) {
+                num = pxNum;
+                units = 'px';
+              }
+            }
+
+            // and remove leading zero
+            let str;
+            if (leadingZero) {
+              str = removeLeadingZero(num);
+            } else {
+              str = num.toString();
+            }
+
+            // remove default 'px' units
+            if (defaultPx && units === 'px') {
+              units = '';
+            }
+
+            node.attributes[name] = str + units;
+          }
+        }
+      },
+    },
+  };
+};

package/plugins/collapseGroups.js

@@ -0,0 +1,135 @@
+'use strict';
+
+/**
+ * @typedef {import('../lib/types').XastNode} XastNode
+ */
+
+const { inheritableAttrs, elemsGroups } = require('./_collections.js');
+
+exports.type = 'visitor';
+exports.name = 'collapseGroups';
+exports.active = true;
+exports.description = 'collapses useless groups';
+
+/**
+ * @type {(node: XastNode, name: string) => boolean}
+ */
+const hasAnimatedAttr = (node, name) => {
+  if (node.type === 'element') {
+    if (
+      elemsGroups.animation.includes(node.name) &&
+      node.attributes.attributeName === name
+    ) {
+      return true;
+    }
+    for (const child of node.children) {
+      if (hasAnimatedAttr(child, name)) {
+        return true;
+      }
+    }
+  }
+  return false;
+};
+
+/**
+ * Collapse useless groups.
+ *
+ * @example
+ * <g>
+ *     <g attr1="val1">
+ *         <path d="..."/>
+ *     </g>
+ * </g>
+ *         ⬇
+ * <g>
+ *     <g>
+ *         <path attr1="val1" d="..."/>
+ *     </g>
+ * </g>
+ *         ⬇
+ * <path attr1="val1" d="..."/>
+ *
+ * @author Kir Belevich
+ *
+ * @type {import('../lib/types').Plugin<void>}
+ */
+exports.fn = () => {
+  return {
+    element: {
+      exit: (node, parentNode) => {
+        if (parentNode.type === 'root' || parentNode.name === 'switch') {
+          return;
+        }
+        // non-empty groups
+        if (node.name !== 'g' || node.children.length === 0) {
+          return;
+        }
+
+        // move group attibutes to the single child element
+        if (
+          Object.keys(node.attributes).length !== 0 &&
+          node.children.length === 1
+        ) {
+          const firstChild = node.children[0];
+          // TODO untangle this mess
+          if (
+            firstChild.type === 'element' &&
+            firstChild.attributes.id == null &&
+            node.attributes.filter == null &&
+            (node.attributes.class == null ||
+              firstChild.attributes.class == null) &&
+            ((node.attributes['clip-path'] == null &&
+              node.attributes.mask == null) ||
+              (firstChild.name === 'g' &&
+                node.attributes.transform == null &&
+                firstChild.attributes.transform == null))
+          ) {
+            for (const [name, value] of Object.entries(node.attributes)) {
+              // avoid copying to not conflict with animated attribute
+              if (hasAnimatedAttr(firstChild, name)) {
+                return;
+              }
+              if (firstChild.attributes[name] == null) {
+                firstChild.attributes[name] = value;
+              } else if (name === 'transform') {
+                firstChild.attributes[name] =
+                  value + ' ' + firstChild.attributes[name];
+              } else if (firstChild.attributes[name] === 'inherit') {
+                firstChild.attributes[name] = value;
+              } else if (
+                inheritableAttrs.includes(name) === false &&
+                firstChild.attributes[name] !== value
+              ) {
+                return;
+              }
+              delete node.attributes[name];
+            }
+          }
+        }
+
+        // collapse groups without attributes
+        if (Object.keys(node.attributes).length === 0) {
+          // animation elements "add" attributes to group
+          // group should be preserved
+          for (const child of node.children) {
+            if (
+              child.type === 'element' &&
+              elemsGroups.animation.includes(child.name)
+            ) {
+              return;
+            }
+          }
+          // replace current node with all its children
+          const index = parentNode.children.indexOf(node);
+          parentNode.children.splice(index, 1, ...node.children);
+          // TODO remove in v3
+          for (const child of node.children) {
+            // @ts-ignore parentNode is forbidden for public usage
+            // and will be moved in v3
+            child.parentNode = parentNode;
+          }
+        }
+      },
+    },
+  };
+};