svgo-v2 2.8.0

package/plugins/removeEmptyContainers.js

@@ -0,0 +1,58 @@
+'use strict';
+
+const { detachNodeFromParent } = require('../lib/xast.js');
+const { elemsGroups } = require('./_collections.js');
+
+exports.type = 'visitor';
+exports.name = 'removeEmptyContainers';
+exports.active = true;
+exports.description = 'removes empty container elements';
+
+/**
+ * Remove empty containers.
+ *
+ * @see https://www.w3.org/TR/SVG11/intro.html#TermContainerElement
+ *
+ * @example
+ * <defs/>
+ *
+ * @example
+ * <g><marker><a/></marker></g>
+ *
+ * @author Kir Belevich
+ *
+ * @type {import('../lib/types').Plugin<void>}
+ */
+exports.fn = () => {
+  return {
+    element: {
+      exit: (node, parentNode) => {
+        // remove only empty non-svg containers
+        if (
+          node.name === 'svg' ||
+          elemsGroups.container.includes(node.name) === false ||
+          node.children.length !== 0
+        ) {
+          return;
+        }
+        // empty patterns may contain reusable configuration
+        if (
+          node.name === 'pattern' &&
+          Object.keys(node.attributes).length !== 0
+        ) {
+          return;
+        }
+        // The <g> may not have content, but the filter may cause a rectangle
+        // to be created and filled with pattern.
+        if (node.name === 'g' && node.attributes.filter != null) {
+          return;
+        }
+        // empty <mask> hides masked element
+        if (node.name === 'mask' && node.attributes.id != null) {
+          return;
+        }
+        detachNodeFromParent(node, parentNode);
+      },
+    },
+  };
+};

package/plugins/removeEmptyText.js

@@ -0,0 +1,57 @@
+'use strict';
+
+const { detachNodeFromParent } = require('../lib/xast.js');
+
+exports.name = 'removeEmptyText';
+exports.type = 'visitor';
+exports.active = true;
+exports.description = 'removes empty <text> elements';
+
+/**
+ * Remove empty Text elements.
+ *
+ * @see https://www.w3.org/TR/SVG11/text.html
+ *
+ * @example
+ * Remove empty text element:
+ * <text/>
+ *
+ * Remove empty tspan element:
+ * <tspan/>
+ *
+ * Remove tref with empty xlink:href attribute:
+ * <tref xlink:href=""/>
+ *
+ * @author Kir Belevich
+ *
+ * @type {import('../lib/types').Plugin<{
+ *   text?: boolean,
+ *   tspan?: boolean,
+ *   tref?: boolean
+ * }>}
+ */
+exports.fn = (root, params) => {
+  const { text = true, tspan = true, tref = true } = params;
+  return {
+    element: {
+      enter: (node, parentNode) => {
+        // Remove empty text element
+        if (text && node.name === 'text' && node.children.length === 0) {
+          detachNodeFromParent(node, parentNode);
+        }
+        // Remove empty tspan element
+        if (tspan && node.name === 'tspan' && node.children.length === 0) {
+          detachNodeFromParent(node, parentNode);
+        }
+        // Remove tref with empty xlink:href attribute
+        if (
+          tref &&
+          node.name === 'tref' &&
+          node.attributes['xlink:href'] == null
+        ) {
+          detachNodeFromParent(node, parentNode);
+        }
+      },
+    },
+  };
+};

package/plugins/removeHiddenElems.js

@@ -0,0 +1,318 @@
+'use strict';
+
+const {
+  querySelector,
+  closestByName,
+  detachNodeFromParent,
+} = require('../lib/xast.js');
+const { collectStylesheet, computeStyle } = require('../lib/style.js');
+const { parsePathData } = require('../lib/path.js');
+
+exports.name = 'removeHiddenElems';
+exports.type = 'visitor';
+exports.active = true;
+exports.description =
+  'removes hidden elements (zero sized, with absent attributes)';
+
+/**
+ * Remove hidden elements with disabled rendering:
+ * - display="none"
+ * - opacity="0"
+ * - circle with zero radius
+ * - ellipse with zero x-axis or y-axis radius
+ * - rectangle with zero width or height
+ * - pattern with zero width or height
+ * - image with zero width or height
+ * - path with empty data
+ * - polyline with empty points
+ * - polygon with empty points
+ *
+ * @author Kir Belevich
+ *
+ * @type {import('../lib/types').Plugin<{
+ *   isHidden: boolean,
+ *   displayNone: boolean,
+ *   opacity0: boolean,
+ *   circleR0: boolean,
+ *   ellipseRX0: boolean,
+ *   ellipseRY0: boolean,
+ *   rectWidth0: boolean,
+ *   rectHeight0: boolean,
+ *   patternWidth0: boolean,
+ *   patternHeight0: boolean,
+ *   imageWidth0: boolean,
+ *   imageHeight0: boolean,
+ *   pathEmptyD: boolean,
+ *   polylineEmptyPoints: boolean,
+ *   polygonEmptyPoints: boolean,
+ * }>}
+ */
+exports.fn = (root, params) => {
+  const {
+    isHidden = true,
+    displayNone = true,
+    opacity0 = true,
+    circleR0 = true,
+    ellipseRX0 = true,
+    ellipseRY0 = true,
+    rectWidth0 = true,
+    rectHeight0 = true,
+    patternWidth0 = true,
+    patternHeight0 = true,
+    imageWidth0 = true,
+    imageHeight0 = true,
+    pathEmptyD = true,
+    polylineEmptyPoints = true,
+    polygonEmptyPoints = true,
+  } = params;
+  const stylesheet = collectStylesheet(root);
+
+  return {
+    element: {
+      enter: (node, parentNode) => {
+        // Removes hidden elements
+        // https://www.w3schools.com/cssref/pr_class_visibility.asp
+        const computedStyle = computeStyle(stylesheet, node);
+        if (
+          isHidden &&
+          computedStyle.visibility &&
+          computedStyle.visibility.type === 'static' &&
+          computedStyle.visibility.value === 'hidden' &&
+          // keep if any descendant enables visibility
+          querySelector(node, '[visibility=visible]') == null
+        ) {
+          detachNodeFromParent(node, parentNode);
+          return;
+        }
+
+        // display="none"
+        //
+        // https://www.w3.org/TR/SVG11/painting.html#DisplayProperty
+        // "A value of display: none indicates that the given element
+        // and its children shall not be rendered directly"
+        if (
+          displayNone &&
+          computedStyle.display &&
+          computedStyle.display.type === 'static' &&
+          computedStyle.display.value === 'none' &&
+          // markers with display: none still rendered
+          node.name !== 'marker'
+        ) {
+          detachNodeFromParent(node, parentNode);
+          return;
+        }
+
+        // opacity="0"
+        //
+        // https://www.w3.org/TR/SVG11/masking.html#ObjectAndGroupOpacityProperties
+        if (
+          opacity0 &&
+          computedStyle.opacity &&
+          computedStyle.opacity.type === 'static' &&
+          computedStyle.opacity.value === '0' &&
+          // transparent element inside clipPath still affect clipped elements
+          closestByName(node, 'clipPath') == null
+        ) {
+          detachNodeFromParent(node, parentNode);
+          return;
+        }
+
+        // Circles with zero radius
+        //
+        // https://www.w3.org/TR/SVG11/shapes.html#CircleElementRAttribute
+        // "A value of zero disables rendering of the element"
+        //
+        // <circle r="0">
+        if (
+          circleR0 &&
+          node.name === 'circle' &&
+          node.children.length === 0 &&
+          node.attributes.r === '0'
+        ) {
+          detachNodeFromParent(node, parentNode);
+          return;
+        }
+
+        // Ellipse with zero x-axis radius
+        //
+        // https://www.w3.org/TR/SVG11/shapes.html#EllipseElementRXAttribute
+        // "A value of zero disables rendering of the element"
+        //
+        // <ellipse rx="0">
+        if (
+          ellipseRX0 &&
+          node.name === 'ellipse' &&
+          node.children.length === 0 &&
+          node.attributes.rx === '0'
+        ) {
+          detachNodeFromParent(node, parentNode);
+          return;
+        }
+
+        // Ellipse with zero y-axis radius
+        //
+        // https://www.w3.org/TR/SVG11/shapes.html#EllipseElementRYAttribute
+        // "A value of zero disables rendering of the element"
+        //
+        // <ellipse ry="0">
+        if (
+          ellipseRY0 &&
+          node.name === 'ellipse' &&
+          node.children.length === 0 &&
+          node.attributes.ry === '0'
+        ) {
+          detachNodeFromParent(node, parentNode);
+          return;
+        }
+
+        // Rectangle with zero width
+        //
+        // https://www.w3.org/TR/SVG11/shapes.html#RectElementWidthAttribute
+        // "A value of zero disables rendering of the element"
+        //
+        // <rect width="0">
+        if (
+          rectWidth0 &&
+          node.name === 'rect' &&
+          node.children.length === 0 &&
+          node.attributes.width === '0'
+        ) {
+          detachNodeFromParent(node, parentNode);
+          return;
+        }
+
+        // Rectangle with zero height
+        //
+        // https://www.w3.org/TR/SVG11/shapes.html#RectElementHeightAttribute
+        // "A value of zero disables rendering of the element"
+        //
+        // <rect height="0">
+        if (
+          rectHeight0 &&
+          rectWidth0 &&
+          node.name === 'rect' &&
+          node.children.length === 0 &&
+          node.attributes.height === '0'
+        ) {
+          detachNodeFromParent(node, parentNode);
+          return;
+        }
+
+        // Pattern with zero width
+        //
+        // https://www.w3.org/TR/SVG11/pservers.html#PatternElementWidthAttribute
+        // "A value of zero disables rendering of the element (i.e., no paint is applied)"
+        //
+        // <pattern width="0">
+        if (
+          patternWidth0 &&
+          node.name === 'pattern' &&
+          node.attributes.width === '0'
+        ) {
+          detachNodeFromParent(node, parentNode);
+          return;
+        }
+
+        // Pattern with zero height
+        //
+        // https://www.w3.org/TR/SVG11/pservers.html#PatternElementHeightAttribute
+        // "A value of zero disables rendering of the element (i.e., no paint is applied)"
+        //
+        // <pattern height="0">
+        if (
+          patternHeight0 &&
+          node.name === 'pattern' &&
+          node.attributes.height === '0'
+        ) {
+          detachNodeFromParent(node, parentNode);
+          return;
+        }
+
+        // Image with zero width
+        //
+        // https://www.w3.org/TR/SVG11/struct.html#ImageElementWidthAttribute
+        // "A value of zero disables rendering of the element"
+        //
+        // <image width="0">
+        if (
+          imageWidth0 &&
+          node.name === 'image' &&
+          node.attributes.width === '0'
+        ) {
+          detachNodeFromParent(node, parentNode);
+          return;
+        }
+
+        // Image with zero height
+        //
+        // https://www.w3.org/TR/SVG11/struct.html#ImageElementHeightAttribute
+        // "A value of zero disables rendering of the element"
+        //
+        // <image height="0">
+        if (
+          imageHeight0 &&
+          node.name === 'image' &&
+          node.attributes.height === '0'
+        ) {
+          detachNodeFromParent(node, parentNode);
+          return;
+        }
+
+        // Path with empty data
+        //
+        // https://www.w3.org/TR/SVG11/paths.html#DAttribute
+        //
+        // <path d=""/>
+        if (pathEmptyD && node.name === 'path') {
+          if (node.attributes.d == null) {
+            detachNodeFromParent(node, parentNode);
+            return;
+          }
+          const pathData = parsePathData(node.attributes.d);
+          if (pathData.length === 0) {
+            detachNodeFromParent(node, parentNode);
+            return;
+          }
+          // keep single point paths for markers
+          if (
+            pathData.length === 1 &&
+            computedStyle['marker-start'] == null &&
+            computedStyle['marker-end'] == null
+          ) {
+            detachNodeFromParent(node, parentNode);
+            return;
+          }
+          return;
+        }
+
+        // Polyline with empty points
+        //
+        // https://www.w3.org/TR/SVG11/shapes.html#PolylineElementPointsAttribute
+        //
+        // <polyline points="">
+        if (
+          polylineEmptyPoints &&
+          node.name === 'polyline' &&
+          node.attributes.points == null
+        ) {
+          detachNodeFromParent(node, parentNode);
+          return;
+        }
+
+        // Polygon with empty points
+        //
+        // https://www.w3.org/TR/SVG11/shapes.html#PolygonElementPointsAttribute
+        //
+        // <polygon points="">
+        if (
+          polygonEmptyPoints &&
+          node.name === 'polygon' &&
+          node.attributes.points == null
+        ) {
+          detachNodeFromParent(node, parentNode);
+          return;
+        }
+      },
+    },
+  };
+};

package/plugins/removeMetadata.js

@@ -0,0 +1,29 @@
+'use strict';
+
+const { detachNodeFromParent } = require('../lib/xast.js');
+
+exports.name = 'removeMetadata';
+exports.type = 'visitor';
+exports.active = true;
+exports.description = 'removes <metadata>';
+
+/**
+ * Remove <metadata>.
+ *
+ * https://www.w3.org/TR/SVG11/metadata.html
+ *
+ * @author Kir Belevich
+ *
+ * @type {import('../lib/types').Plugin<void>}
+ */
+exports.fn = () => {
+  return {
+    element: {
+      enter: (node, parentNode) => {
+        if (node.name === 'metadata') {
+          detachNodeFromParent(node, parentNode);
+        }
+      },
+    },
+  };
+};

package/plugins/removeNonInheritableGroupAttrs.js

@@ -0,0 +1,38 @@
+'use strict';
+
+exports.name = 'removeNonInheritableGroupAttrs';
+
+exports.type = 'perItem';
+
+exports.active = true;
+
+exports.description =
+  'removes non-inheritable group’s presentational attributes';
+
+const {
+  inheritableAttrs,
+  attrsGroups,
+  presentationNonInheritableGroupAttrs,
+} = require('./_collections');
+
+/**
+ * Remove non-inheritable group's "presentation" attributes.
+ *
+ * @param {Object} item current iteration item
+ * @return {Boolean} if false, item will be filtered out
+ *
+ * @author Kir Belevich
+ */
+exports.fn = function (item) {
+  if (item.type === 'element' && item.name === 'g') {
+    for (const name of Object.keys(item.attributes)) {
+      if (
+        attrsGroups.presentation.includes(name) === true &&
+        inheritableAttrs.includes(name) === false &&
+        presentationNonInheritableGroupAttrs.includes(name) === false
+      ) {
+        delete item.attributes[name];
+      }
+    }
+  }
+};

package/plugins/removeOffCanvasPaths.js

@@ -0,0 +1,138 @@
+'use strict';
+
+/**
+ * @typedef {import('../lib/types').PathDataItem} PathDataItem
+ */
+
+const { visitSkip, detachNodeFromParent } = require('../lib/xast.js');
+const { parsePathData } = require('../lib/path.js');
+const { intersects } = require('./_path.js');
+
+exports.type = 'visitor';
+exports.name = 'removeOffCanvasPaths';
+exports.active = false;
+exports.description =
+  'removes elements that are drawn outside of the viewbox (disabled by default)';
+
+/**
+ * Remove elements that are drawn outside of the viewbox.
+ *
+ * @author JoshyPHP
+ *
+ * @type {import('../lib/types').Plugin<void>}
+ */
+exports.fn = () => {
+  /**
+   * @type {null | {
+   *   top: number,
+   *   right: number,
+   *   bottom: number,
+   *   left: number,
+   *   width: number,
+   *   height: number
+   * }}
+   */
+  let viewBoxData = null;
+
+  return {
+    element: {
+      enter: (node, parentNode) => {
+        if (node.name === 'svg' && parentNode.type === 'root') {
+          let viewBox = '';
+          // find viewbox
+          if (node.attributes.viewBox != null) {
+            // remove commas and plus signs, normalize and trim whitespace
+            viewBox = node.attributes.viewBox;
+          } else if (
+            node.attributes.height != null &&
+            node.attributes.width != null
+          ) {
+            viewBox = `0 0 ${node.attributes.width} ${node.attributes.height}`;
+          }
+
+          // parse viewbox
+          // remove commas and plus signs, normalize and trim whitespace
+          viewBox = viewBox
+            .replace(/[,+]|px/g, ' ')
+            .replace(/\s+/g, ' ')
+            .replace(/^\s*|\s*$/g, '');
+          // ensure that the dimensions are 4 values separated by space
+          const m =
+            /^(-?\d*\.?\d+) (-?\d*\.?\d+) (\d*\.?\d+) (\d*\.?\d+)$/.exec(
+              viewBox
+            );
+          if (m == null) {
+            return;
+          }
+          const left = Number.parseFloat(m[1]);
+          const top = Number.parseFloat(m[2]);
+          const width = Number.parseFloat(m[3]);
+          const height = Number.parseFloat(m[4]);
+
+          // store the viewBox boundaries
+          viewBoxData = {
+            left,
+            top,
+            right: left + width,
+            bottom: top + height,
+            width,
+            height,
+          };
+        }
+
+        // consider that any item with a transform attribute is visible
+        if (node.attributes.transform != null) {
+          return visitSkip;
+        }
+
+        if (
+          node.name === 'path' &&
+          node.attributes.d != null &&
+          viewBoxData != null
+        ) {
+          const pathData = parsePathData(node.attributes.d);
+
+          // consider that a M command within the viewBox is visible
+          let visible = false;
+          for (const pathDataItem of pathData) {
+            if (pathDataItem.command === 'M') {
+              const [x, y] = pathDataItem.args;
+              if (
+                x >= viewBoxData.left &&
+                x <= viewBoxData.right &&
+                y >= viewBoxData.top &&
+                y <= viewBoxData.bottom
+              ) {
+                visible = true;
+              }
+            }
+          }
+          if (visible) {
+            return;
+          }
+
+          if (pathData.length === 2) {
+            // close the path too short for intersects()
+            pathData.push({ command: 'z', args: [] });
+          }
+
+          const { left, top, width, height } = viewBoxData;
+          /**
+           * @type {Array<PathDataItem>}
+           */
+          const viewBoxPathData = [
+            { command: 'M', args: [left, top] },
+            { command: 'h', args: [width] },
+            { command: 'v', args: [height] },
+            { command: 'H', args: [left] },
+            { command: 'z', args: [] },
+          ];
+
+          if (intersects(viewBoxPathData, pathData) === false) {
+            detachNodeFromParent(node, parentNode);
+          }
+        }
+      },
+    },
+  };
+};

package/plugins/removeRasterImages.js

@@ -0,0 +1,33 @@
+'use strict';
+
+const { detachNodeFromParent } = require('../lib/xast.js');
+
+exports.name = 'removeRasterImages';
+exports.type = 'visitor';
+exports.active = false;
+exports.description = 'removes raster images (disabled by default)';
+
+/**
+ * Remove raster images references in <image>.
+ *
+ * @see https://bugs.webkit.org/show_bug.cgi?id=63548
+ *
+ * @author Kir Belevich
+ *
+ * @type {import('../lib/types').Plugin<void>}
+ */
+exports.fn = () => {
+  return {
+    element: {
+      enter: (node, parentNode) => {
+        if (
+          node.name === 'image' &&
+          node.attributes['xlink:href'] != null &&
+          /(\.|image\/)(jpg|png|gif)/.test(node.attributes['xlink:href'])
+        ) {
+          detachNodeFromParent(node, parentNode);
+        }
+      },
+    },
+  };
+};

package/plugins/removeScriptElement.js

@@ -0,0 +1,29 @@
+'use strict';
+
+const { detachNodeFromParent } = require('../lib/xast.js');
+
+exports.name = 'removeScriptElement';
+exports.type = 'visitor';
+exports.active = false;
+exports.description = 'removes <script> elements (disabled by default)';
+
+/**
+ * Remove <script>.
+ *
+ * https://www.w3.org/TR/SVG11/script.html
+ *
+ * @author Patrick Klingemann
+ *
+ * @type {import('../lib/types').Plugin<void>}
+ */
+exports.fn = () => {
+  return {
+    element: {
+      enter: (node, parentNode) => {
+        if (node.name === 'script') {
+          detachNodeFromParent(node, parentNode);
+        }
+      },
+    },
+  };
+};