svgo-v2 2.8.0

package/plugins/reusePaths.js

@@ -0,0 +1,113 @@
+'use strict';
+
+/**
+ * @typedef {import('../lib/types').XastElement} XastElement
+ * @typedef {import('../lib/types').XastParent} XastParent
+ * @typedef {import('../lib/types').XastNode} XastNode
+ */
+
+const JSAPI = require('../lib/svgo/jsAPI.js');
+
+exports.type = 'visitor';
+exports.name = 'reusePaths';
+exports.active = false;
+exports.description =
+  'Finds <path> elements with the same d, fill, and ' +
+  'stroke, and converts them to <use> elements ' +
+  'referencing a single <path> def.';
+
+/**
+ * Finds <path> elements with the same d, fill, and stroke, and converts them to
+ * <use> elements referencing a single <path> def.
+ *
+ * @author Jacob Howcroft
+ *
+ * @type {import('../lib/types').Plugin<void>}
+ */
+exports.fn = () => {
+  /**
+   * @type {Map<string, Array<XastElement>>}
+   */
+  const paths = new Map();
+
+  return {
+    element: {
+      enter: (node) => {
+        if (node.name === 'path' && node.attributes.d != null) {
+          const d = node.attributes.d;
+          const fill = node.attributes.fill || '';
+          const stroke = node.attributes.stroke || '';
+          const key = d + ';s:' + stroke + ';f:' + fill;
+          let list = paths.get(key);
+          if (list == null) {
+            list = [];
+            paths.set(key, list);
+          }
+          list.push(node);
+        }
+      },
+
+      exit: (node, parentNode) => {
+        if (node.name === 'svg' && parentNode.type === 'root') {
+          /**
+           * @type {XastElement}
+           */
+          const rawDefs = {
+            type: 'element',
+            name: 'defs',
+            attributes: {},
+            children: [],
+          };
+          /**
+           * @type {XastElement}
+           */
+          const defsTag = new JSAPI(rawDefs, node);
+          let index = 0;
+          for (const list of paths.values()) {
+            if (list.length > 1) {
+              // add reusable path to defs
+              /**
+               * @type {XastElement}
+               */
+              const rawPath = {
+                type: 'element',
+                name: 'path',
+                attributes: { ...list[0].attributes },
+                children: [],
+              };
+              delete rawPath.attributes.transform;
+              let id;
+              if (rawPath.attributes.id == null) {
+                id = 'reuse-' + index;
+                index += 1;
+                rawPath.attributes.id = id;
+              } else {
+                id = rawPath.attributes.id;
+                delete list[0].attributes.id;
+              }
+              /**
+               * @type {XastElement}
+               */
+              const reusablePath = new JSAPI(rawPath, defsTag);
+              defsTag.children.push(reusablePath);
+              // convert paths to <use>
+              for (const pathNode of list) {
+                pathNode.name = 'use';
+                pathNode.attributes['xlink:href'] = '#' + id;
+                delete pathNode.attributes.d;
+                delete pathNode.attributes.stroke;
+                delete pathNode.attributes.fill;
+              }
+            }
+          }
+          if (defsTag.children.length !== 0) {
+            if (node.attributes['xmlns:xlink'] == null) {
+              node.attributes['xmlns:xlink'] = 'http://www.w3.org/1999/xlink';
+            }
+            node.children.unshift(defsTag);
+          }
+        }
+      },
+    },
+  };
+};

package/plugins/sortAttrs.js

@@ -0,0 +1,113 @@
+'use strict';
+
+exports.type = 'visitor';
+exports.name = 'sortAttrs';
+exports.active = false;
+exports.description = 'Sort element attributes for better compression';
+
+/**
+ * Sort element attributes for better compression
+ *
+ * @author Nikolay Frantsev
+ *
+ * @type {import('../lib/types').Plugin<{
+ *   order?: Array<string>
+ *   xmlnsOrder?: 'front' | 'alphabetical'
+ * }>}
+ */
+exports.fn = (_root, params) => {
+  const {
+    order = [
+      'id',
+      'width',
+      'height',
+      'x',
+      'x1',
+      'x2',
+      'y',
+      'y1',
+      'y2',
+      'cx',
+      'cy',
+      'r',
+      'fill',
+      'stroke',
+      'marker',
+      'd',
+      'points',
+    ],
+    xmlnsOrder = 'front',
+  } = params;
+
+  /**
+   * @type {(name: string) => number}
+   */
+  const getNsPriority = (name) => {
+    if (xmlnsOrder === 'front') {
+      // put xmlns first
+      if (name === 'xmlns') {
+        return 3;
+      }
+      // xmlns:* attributes second
+      if (name.startsWith('xmlns:')) {
+        return 2;
+      }
+    }
+    // other namespaces after and sort them alphabetically
+    if (name.includes(':')) {
+      return 1;
+    }
+    // other attributes
+    return 0;
+  };
+
+  /**
+   * @type {(a: [string, string], b: [string, string]) => number}
+   */
+  const compareAttrs = ([aName], [bName]) => {
+    // sort namespaces
+    const aPriority = getNsPriority(aName);
+    const bPriority = getNsPriority(bName);
+    const priorityNs = bPriority - aPriority;
+    if (priorityNs !== 0) {
+      return priorityNs;
+    }
+    // extract the first part from attributes
+    // for example "fill" from "fill" and "fill-opacity"
+    const [aPart] = aName.split('-');
+    const [bPart] = bName.split('-');
+    // rely on alphabetical sort when the first part is the same
+    if (aPart !== bPart) {
+      const aInOrderFlag = order.includes(aPart) ? 1 : 0;
+      const bInOrderFlag = order.includes(bPart) ? 1 : 0;
+      // sort by position in order param
+      if (aInOrderFlag === 1 && bInOrderFlag === 1) {
+        return order.indexOf(aPart) - order.indexOf(bPart);
+      }
+      // put attributes from order param before others
+      const priorityOrder = bInOrderFlag - aInOrderFlag;
+      if (priorityOrder !== 0) {
+        return priorityOrder;
+      }
+    }
+    // sort alphabetically
+    return aName < bName ? -1 : 1;
+  };
+
+  return {
+    element: {
+      enter: (node) => {
+        const attrs = Object.entries(node.attributes);
+        attrs.sort(compareAttrs);
+        /**
+         * @type {Record<string, string>}
+         */
+        const sortedAttributes = {};
+        for (const [name, value] of attrs) {
+          sortedAttributes[name] = value;
+        }
+        node.attributes = sortedAttributes;
+      },
+    },
+  };
+};

package/plugins/sortDefsChildren.js

@@ -0,0 +1,60 @@
+'use strict';
+
+exports.type = 'visitor';
+exports.name = 'sortDefsChildren';
+exports.active = true;
+exports.description = 'Sorts children of <defs> to improve compression';
+
+/**
+ * Sorts children of defs in order to improve compression.
+ * Sorted first by frequency then by element name length then by element name (to ensure grouping).
+ *
+ * @author David Leston
+ *
+ * @type {import('../lib/types').Plugin<void>}
+ */
+exports.fn = () => {
+  return {
+    element: {
+      enter: (node) => {
+        if (node.name === 'defs') {
+          /**
+           * @type {Map<string, number>}
+           */
+          const frequencies = new Map();
+          for (const child of node.children) {
+            if (child.type === 'element') {
+              const frequency = frequencies.get(child.name);
+              if (frequency == null) {
+                frequencies.set(child.name, 1);
+              } else {
+                frequencies.set(child.name, frequency + 1);
+              }
+            }
+          }
+          node.children.sort((a, b) => {
+            if (a.type !== 'element' || b.type !== 'element') {
+              return 0;
+            }
+            const aFrequency = frequencies.get(a.name);
+            const bFrequency = frequencies.get(b.name);
+            if (aFrequency != null && bFrequency != null) {
+              const frequencyComparison = bFrequency - aFrequency;
+              if (frequencyComparison !== 0) {
+                return frequencyComparison;
+              }
+            }
+            const lengthComparison = b.name.length - a.name.length;
+            if (lengthComparison !== 0) {
+              return lengthComparison;
+            }
+            if (a.name !== b.name) {
+              return a.name > b.name ? -1 : 1;
+            }
+            return 0;
+          });
+        }
+      },
+    },
+  };
+};