feat(removeDeprecatedAttrs): new removeDeprecatedAttrs plugin

The new removeDeprecatedAttributes removes deprecated attributes from
the SVG document. For example, the "version" attribute on the "svg"
element is deprecated and not recommended as documented on MDN:

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/version

> Deprecated: This feature is no longer recommended. Though some
> browsers might still support it, it may have already been removed from
> the relevant web standards, may be in the process of being dropped, or
> may only be kept for compatibility purposes. Avoid using it, and
> update existing code if possible; see the compatibility table at the
> bottom of this page to guide your decision. Be aware that this feature
> may cease to work at any time.

The document:

```
<svg version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="80"/>
</svg>
```

Becomes:

```
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="80"/>
</svg>
```

The plugin is built for easy expansion as new deprecated attributes are
discovered or announced. Simply add to the "deprecated" array in
plugins/_collections.js.

Fixes #1701

docs/03-plugins/remove-deprecated-attrs.mdx

@@ -0,0 +1,26 @@
+---
+title: Remove Deprecated Attributes
+svgo:
+  pluginId: removeDeprecatedAttrs
+  parameters:
+    removeAny:
+      description: By default, this plugin only removes safe deprecated attributes that do not change the rendered image. Enabling this will remove all deprecated attributes which may impact rendering.
+      type: boolean
+      default: false
+---
+
+Remove deprecated attributes from elements in the document.
+
+This plugin does not remove attributes from the deprecated XLink namespace. To remove them, use the [Remove XLink](/docs/plugins/remove-xlink/) plugin.
+
+## Usage
+
+<PluginUsage />
+
+## Demo
+
+<PluginDemo />
+
+## Implementation
+
+- https://github.com/svg/svgo/blob/main/plugins/removeDeprecatedAttrs.js

lib/builtin.js

@@ -27,6 +27,7 @@ exports.builtin = [
   require('../plugins/removeAttributesBySelector.js'),
   require('../plugins/removeAttrs.js'),
   require('../plugins/removeComments.js'),
+  require('../plugins/removeDeprecatedAttrs.js'),
   require('../plugins/removeDesc.js'),
   require('../plugins/removeDimensions.js'),
   require('../plugins/removeDoctype.js'),

plugins/_collections.js

@@ -381,11 +381,35 @@ exports.attrsGroupsDefaults = {
   },
 };
 
+/**
+ * @type {Record<string, { safe?: Array<string>, unsafe?: Array<string> }>}
+ * @see https://www.w3.org/TR/SVG11/intro.html#Definitions
+ */
+exports.attrsGroupsDeprecated = {
+  animationAttributeTarget: { unsafe: ['attributeType'] },
+  conditionalProcessing: { unsafe: ['requiredFeatures'] },
+  core: { unsafe: ['xml:base', 'xml:lang', 'xml:space'] },
+  presentation: {
+    unsafe: [
+      'clip',
+      'color-profile',
+      'enable-background',
+      'glyph-orientation-horizontal',
+      'glyph-orientation-vertical',
+      'kerning',
+    ],
+  },
+};
+
 /**
  * @type {Record<string, {
  *   attrsGroups: Set<string>,
  *   attrs?: Set<string>,
  *   defaults?: Record<string, string>,
+ *   deprecated?: {
+ *     safe?: Array<string>,
+ *     unsafe?: Array<string>,
+ *   },
  *   contentGroups?: Set<string>,
  *   content?: Set<string>,
  * }>}
@@ -580,6 +604,7 @@ exports.elems = {
       name: 'sRGB',
       'rendering-intent': 'auto',
     },
+    deprecated: { unsafe: ['name'] },
     contentGroups: new Set(['descriptive']),
   },
   cursor: {
@@ -964,6 +989,7 @@ exports.elems = {
       width: '120%',
       height: '120%',
     },
+    deprecated: { unsafe: ['filterRes'] },
     contentGroups: new Set(['descriptive', 'filterPrimitive']),
     content: new Set(['animate', 'set']),
   },
@@ -984,6 +1010,15 @@ exports.elems = {
       'horiz-origin-x': '0',
       'horiz-origin-y': '0',
     },
+    deprecated: {
+      unsafe: [
+        'horiz-origin-x',
+        'horiz-origin-y',
+        'vert-adv-y',
+        'vert-origin-x',
+        'vert-origin-y',
+      ],
+    },
     contentGroups: new Set(['descriptive']),
     content: new Set(['font-face', 'glyph', 'hkern', 'missing-glyph', 'vkern']),
   },
@@ -1034,6 +1069,31 @@ exports.elems = {
       'panose-1': '0 0 0 0 0 0 0 0 0 0',
       slope: '0',
     },
+    deprecated: {
+      unsafe: [
+        'accent-height',
+        'alphabetic',
+        'ascent',
+        'bbox',
+        'cap-height',
+        'descent',
+        'hanging',
+        'ideographic',
+        'mathematical',
+        'panose-1',
+        'slope',
+        'stemh',
+        'stemv',
+        'unicode-range',
+        'units-per-em',
+        'v-alphabetic',
+        'v-hanging',
+        'v-ideographic',
+        'v-mathematical',
+        'widths',
+        'x-height',
+      ],
+    },
     contentGroups: new Set(['descriptive']),
     content: new Set([
       // TODO: "at most one 'font-face-src' element"
@@ -1044,10 +1104,12 @@ exports.elems = {
   'font-face-format': {
     attrsGroups: new Set(['core']),
     attrs: new Set(['string']),
+    deprecated: { unsafe: ['string'] },
   },
   'font-face-name': {
     attrsGroups: new Set(['core']),
     attrs: new Set(['name']),
+    deprecated: { unsafe: ['name'] },
   },
   'font-face-src': {
     attrsGroups: new Set(['core']),
@@ -1140,6 +1202,18 @@ exports.elems = {
     defaults: {
       'arabic-form': 'initial',
     },
+    deprecated: {
+      unsafe: [
+        'arabic-form',
+        'glyph-name',
+        'horiz-adv-x',
+        'orientation',
+        'unicode',
+        'vert-adv-y',
+        'vert-origin-x',
+        'vert-origin-y',
+      ],
+    },
     contentGroups: new Set([
       'animation',
       'descriptive',
@@ -1179,6 +1253,9 @@ exports.elems = {
       'vert-origin-x',
       'vert-origin-y',
     ]),
+    deprecated: {
+      unsafe: ['horiz-adv-x', 'vert-adv-y', 'vert-origin-x', 'vert-origin-y'],
+    },
     contentGroups: new Set([
       'animation',
       'descriptive',
@@ -1242,6 +1319,7 @@ exports.elems = {
   hkern: {
     attrsGroups: new Set(['core']),
     attrs: new Set(['u1', 'g1', 'u2', 'g2', 'k']),
+    deprecated: { unsafe: ['g1', 'g2', 'k', 'u1', 'u2'] },
   },
   image: {
     attrsGroups: new Set([
@@ -1436,6 +1514,9 @@ exports.elems = {
       'vert-origin-x',
       'vert-origin-y',
     ]),
+    deprecated: {
+      unsafe: ['horiz-adv-x', 'vert-adv-y', 'vert-origin-x', 'vert-origin-y'],
+    },
     contentGroups: new Set([
       'animation',
       'descriptive',
@@ -1716,6 +1797,15 @@ exports.elems = {
       contentScriptType: 'application/ecmascript',
       contentStyleType: 'text/css',
     },
+    deprecated: {
+      safe: ['version'],
+      unsafe: [
+        'baseProfile',
+        'contentScriptType',
+        'contentStyleType',
+        'zoomAndPan',
+      ],
+    },
     contentGroups: new Set([
       'animation',
       'descriptive',
@@ -1962,11 +2052,13 @@ exports.elems = {
       'viewTarget',
       'zoomAndPan',
     ]),
+    deprecated: { unsafe: ['viewTarget', 'zoomAndPan'] },
     contentGroups: new Set(['descriptive']),
   },
   vkern: {
     attrsGroups: new Set(['core']),
     attrs: new Set(['u1', 'g1', 'u2', 'g2', 'k']),
+    deprecated: { unsafe: ['g1', 'g2', 'k', 'u1', 'u2'] },
   },
 };
 

plugins/plugins-types.d.ts

@@ -141,6 +141,9 @@ type DefaultPlugins = {
   removeComments: {
     preservePatterns: Array<RegExp | string> | false;
   };
+  removeDeprecatedAttrs: {
+    removeUnsafe?: boolean;
+  };
   removeDesc: {
     removeAny?: boolean;
   };

plugins/removeDeprecatedAttrs.js

@@ -0,0 +1,62 @@
+'use strict';
+
+const { attrsGroupsDeprecated, elems } = require('./_collections');
+
+exports.name = 'removeDeprecatedAttrs';
+exports.description = 'removes deprecated attributes';
+
+/**
+ * Remove deprecated attributes.
+ *
+ * @type {import('./plugins-types').Plugin<'removeDeprecatedAttrs'>}
+ */
+exports.fn = (root, params) => {
+  const { removeUnsafe = false } = params;
+
+  return {
+    element: {
+      enter: (node) => {
+        const elemConfig = elems[node.name];
+        if (!elemConfig) {
+          return;
+        }
+
+        elemConfig.attrsGroups.forEach((attrsGroup) => {
+          const deprecated = attrsGroupsDeprecated[attrsGroup];
+          if (!deprecated) {
+            return;
+          }
+
+          if (deprecated.safe) {
+            deprecated.safe.forEach((name) => {
+              delete node.attributes[name];
+            });
+          }
+
+          if (removeUnsafe && deprecated.unsafe) {
+            deprecated.unsafe.forEach((name) => {
+              delete node.attributes[name];
+            });
+          }
+        });
+
+        const deprecated = elemConfig.deprecated;
+        if (!deprecated) {
+          return;
+        }
+
+        if (deprecated.safe) {
+          deprecated.safe.forEach((name) => {
+            delete node.attributes[name];
+          });
+        }
+
+        if (removeUnsafe && deprecated.unsafe) {
+          deprecated.unsafe.forEach((name) => {
+            delete node.attributes[name];
+          });
+        }
+      },
+    },
+  };
+};

test/plugins/_collections.test.js

@@ -0,0 +1,24 @@
+const { elems } = require('../../plugins/_collections');
+
+describe('elems.deprecated', () => {
+  Object.entries(elems).forEach(([tagName, elemConfig]) => {
+    const deprecated = elemConfig.deprecated;
+    if (!deprecated) {
+      return;
+    }
+
+    test(`${tagName} deprecated attributes are all known attributes`, () => {
+      if (deprecated.safe) {
+        deprecated.safe.forEach((attr) => {
+          expect(elemConfig.attrs).toContain(attr);
+        });
+      }
+
+      if (deprecated.unsafe) {
+        deprecated.unsafe.forEach((attr) => {
+          expect(elemConfig.attrs).toContain(attr);
+        });
+      }
+    });
+  });
+});