build: Update 'svgo' to latest v2.8.0 & re-crush images

Updating 'svgo' to v2.8.0 and newest Wikimedia SVG guidelines –
mainly around new whitespace features of SVGO.

Change-Id: I7c9eb84fdaeb50f6ff04c9e5cd2f005e129d555a

.svgo.config.js

@@ -1,55 +1,40 @@
 /**
  * SVGO Configuration
+ * Compatible to v2.4.0+
  * Recommended options from:
  * https://www.mediawiki.org/wiki/Manual:Coding_conventions/SVG#Exemplified_safe_configuration
  */
-const { extendDefaultPlugins } = require( 'svgo' );
 module.exports = {
-	multipass: true,
+	plugins: [
-	plugins: extendDefaultPlugins( [
 		{
-			name: 'cleanupIDs',
+			// Set of built-in plugins enabled by default.
-			active: false
+			name: 'preset-default',
+			params: {
+				overrides: {
+					cleanupIDs: false,
+					removeDesc: false,
+					removeTitle: false,
+					removeViewBox: false,
+					// If the SVG doesn't start with an XML declaration, then its MIME type will
+					// be detected as "text/plain" rather than "image/svg+xml" by libmagic and,
+					// consequently, MediaWiki's CSSMin CSS minifier. libmagic's default database
+					// currently requires that SVGs contain an XML declaration:
+					// https://github.com/threatstack/libmagic/blob/master/magic/Magdir/sgml#L5
+					removeXMLProcInst: false
+				}
+			}
 		},
-		{
+		'removeRasterImages',
-			name: 'removeDesc',
+		'sortAttrs'
-			active: false
+	],
-		},
+	// Set whitespace according to Wikimedia Coding Conventions.
-		{
+	// @see https://github.com/svg/svgo/blob/v2.8.0/lib/stringifier.js#L41 for available options.
-			name: 'removeRasterImages',
-			active: true
-		},
-		{
-			name: 'removeTitle',
-			active: false
-		},
-		{
-			name: 'removeViewBox',
-			active: false
-		},
-		{
-			// If the SVG doesn't start with an XML declaration, then its MIME type will
-			// be detected as "text/plain" rather than "image/svg+xml" by libmagic and,
-			// consequently, MediaWiki's CSSMin CSS minifier. libmagic's default database
-			// currently requires that SVGs contain an XML declaration:
-			// https://github.com/threatstack/libmagic/blob/master/magic/Magdir/sgml#L5
-			name: 'removeXMLProcInst',
-			active: false
-		},
-		{
-			name: 'sortAttrs',
-			active: true
-		}
-	] ),
-
-	// Configure the indent (default 4 spaces) used by `--pretty` here:
-	// @see https://github.com/svg/svgo/blob/master/lib/svgo/js2svg.js#L6 for more config options
-	//
-	// Unfortunately EOL cannot be configured, SVGO uses the platform's EOL marker.
-	// On non-unix systems the linebreaks will be normalized to LF (unix) only at git commit,
-	// assuming `core.autocrlf` is 'true' (default) or 'input'.
 	js2svg: {
-		indent: "\t",
+		eol: 'lf',
-		pretty: true,
+		finalNewline: true,
-	}
+		// Configure the indent to tabs (default 4 spaces) used by `--pretty` here.
-}
+		indent: '\t',
+		pretty: true
+	},
+	multipass: true
+};

package-lock.json

@@ -12,7 +12,7 @@
 				"grunt-stylelint": "0.17.0",
 				"postcss-less": "6.0.0",
 				"stylelint-config-wikimedia": "0.11.1",
-				"svgo": "2.3.1"
+				"svgo": "2.8.0"
 			}
 		},
 		"node_modules/@babel/code-frame": {
@@ -475,9 +475,9 @@
 			}
 		},
 		"node_modules/@trysound/sax": {
-			"version": "0.1.1",
+			"version": "0.2.0",
-			"resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.1.1.tgz",
+			"resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
-			"integrity": "sha512-Z6DoceYb/1xSg5+e+ZlPZ9v0N16ZvZ+wYMraFue4HYrE4ttONKtsvruIRf6t9TBR0YvSOfi1hUU0fJfBLCDYow==",
+			"integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
 			"dev": true,
 			"engines": {
 				"node": ">=10.13.0"
@@ -5343,17 +5343,17 @@
 			"dev": true
 		},
 		"node_modules/svgo": {
-			"version": "2.3.1",
+			"version": "2.8.0",
-			"resolved": "https://registry.npmjs.org/svgo/-/svgo-2.3.1.tgz",
+			"resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz",
-			"integrity": "sha512-riDDIQgXpEnn0BEl9Gvhh1LNLIyiusSpt64IR8upJu7MwxnzetmF/Y57pXQD2NMX2lVyMRzXt5f2M5rO4wG7Dw==",
+			"integrity": "sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==",
 			"dev": true,
 			"dependencies": {
-				"@trysound/sax": "0.1.1",
+				"@trysound/sax": "0.2.0",
-				"chalk": "^4.1.0",
+				"commander": "^7.2.0",
-				"commander": "^7.1.0",
 				"css-select": "^4.1.3",
-				"css-tree": "^1.1.2",
+				"css-tree": "^1.1.3",
 				"csso": "^4.2.0",
+				"picocolors": "^1.0.0",
 				"stable": "^0.1.8"
 			},
 			"bin": {
@@ -6240,9 +6240,9 @@
 			}
 		},
 		"@trysound/sax": {
-			"version": "0.1.1",
+			"version": "0.2.0",
-			"resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.1.1.tgz",
+			"resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
-			"integrity": "sha512-Z6DoceYb/1xSg5+e+ZlPZ9v0N16ZvZ+wYMraFue4HYrE4ttONKtsvruIRf6t9TBR0YvSOfi1hUU0fJfBLCDYow==",
+			"integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
 			"dev": true
 		},
 		"@types/mdast": {
@@ -9936,17 +9936,17 @@
 			"dev": true
 		},
 		"svgo": {
-			"version": "2.3.1",
+			"version": "2.8.0",
-			"resolved": "https://registry.npmjs.org/svgo/-/svgo-2.3.1.tgz",
+			"resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz",
-			"integrity": "sha512-riDDIQgXpEnn0BEl9Gvhh1LNLIyiusSpt64IR8upJu7MwxnzetmF/Y57pXQD2NMX2lVyMRzXt5f2M5rO4wG7Dw==",
+			"integrity": "sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==",
 			"dev": true,
 			"requires": {
-				"@trysound/sax": "0.1.1",
+				"@trysound/sax": "0.2.0",
-				"chalk": "^4.1.0",
+				"commander": "^7.2.0",
-				"commander": "^7.1.0",
 				"css-select": "^4.1.3",
-				"css-tree": "^1.1.2",
+				"css-tree": "^1.1.3",
 				"csso": "^4.2.0",
+				"picocolors": "^1.0.0",
 				"stable": "^0.1.8"
 			}
 		},

package.json

@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"scripts": {
-		"minify-svg": "svgo --config=.svgo.config.js -q -r -f resources/images/",
+		"minify-svg": "svgo --config=.svgo.config.js --quiet --recursive --folder resources/images/",
 		"test": "grunt test"
 	},
 	"devDependencies": {
@@ -12,7 +12,7 @@
 		"grunt-stylelint": "0.17.0",
 		"postcss-less": "6.0.0",
 		"stylelint-config-wikimedia": "0.11.1",
-		"svgo": "2.3.1"
+		"svgo": "2.8.0"
 	},
 	"eslintIgnore": [
 		"lib/**",

resources/images/cog-sprite.svg

@@ -3,6 +3,6 @@
 	<defs>
 		<path id="a" d="M14 9.3V6.73l-1.575-.264a4.947 4.947 0 0 0-.496-1.2l.93-1.285-1.81-1.84-1.31.908c-.38-.205-.79-.38-1.196-.497L8.284 1H5.716l-.263 1.578a5.489 5.489 0 0 0-1.196.497L2.975 2.17 1.137 3.98l.934 1.287c-.2.38-.376.79-.493 1.228L0 6.73V9.3l1.575.264c.117.438.292.818.496 1.198l-.93 1.315L2.95 13.89l1.312-.938c.38.205.787.38 1.224.497L5.746 15h2.566l.263-1.578a6.13 6.13 0 0 0 1.196-.497l1.315.935 1.81-1.812-.935-1.315c.203-.38.38-.76.495-1.2L14 9.303zm-7 1.404c-1.488 0-2.683-1.2-2.683-2.69S5.542 5.327 7 5.327a2.698 2.698 0 0 1 2.683 2.69A2.678 2.678 0 0 1 7 10.705z"/>
 	</defs>
-	<use fill="#72777d" xlink:href="#a"/>
+	<use xlink:href="#a" fill="#72777d"/>
-	<use fill="#54595d" transform="translate(0 16)" xlink:href="#a"/>
+	<use xlink:href="#a" fill="#54595d" transform="translate(0 16)"/>
 </svg>