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: I37da089916d2efad696989427b0a06b392d1d89c

.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',
-			active: false
-		},
-		{
-			name: 'removeDesc',
-			active: false
-		},
-		{
-			name: 'removeRasterImages',
-			active: true
-		},
-		{
-			name: 'removeTitle',
-			active: false
-		},
-		{
-			name: 'removeViewBox',
-			active: false
-		},
 		{
+			// Set of built-in plugins enabled by default.
+			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
-			name: 'removeXMLProcInst',
+					removeXMLProcInst: false
-			active: false
+				}
+			}
 		},
-		{
+		'removeRasterImages',
-			name: 'sortAttrs',
+		'sortAttrs'
-			active: true
+	],
-		}
+	// Set whitespace according to Wikimedia Coding Conventions.
-	] ),
+	// @see https://github.com/svg/svgo/blob/v2.8.0/lib/stringifier.js#L41 for available options.
-
-	// 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.json

@@ -16,7 +16,7 @@
 		"doc": "jsdoc -c jsdoc.json && npm run build-storybook",
 		"linter:js": "eslint --cache .",
 		"linter:styles": "stylelint 'src/**/*.less'",
-		"minify-svg": "svgo --config=.svgo.config.js -q -r -f resources/ext.popups.images/",
+		"minify-svg": "svgo --config=.svgo.config.js --quiet --recursive --folder resources/ext.popups.images/",
 		"node-debug": "node -v && npm -v && echo 'Please ensure you are running the correct version of nvm before running this command.'",
 		"precommit": "npm -s t",
 		"selenium-daily": "npm run selenium-test",
@@ -58,7 +58,7 @@
 		"redux-thunk": "2.3.0",
 		"stylelint-config-wikimedia": "0.11.1",
 		"svg-inline-loader": "0.8.0",
-		"svgo": "2.3.0",
+		"svgo": "2.8.0",
 		"tap-mocha-reporter": "5.0.1",
 		"url-loader": "1.1.2",
 		"wdio-mediawiki": "1.1.1",

resources/ext.popups.images/footer-ltr.svg

@@ -7,10 +7,10 @@
 	</defs>
 	<g fill="none" fill-rule="evenodd">
 		<g transform="matrix(1 0 0 -1 0 13)">
-			<use fill="#f8f9fa" xlink:href="#a"/>
+			<use xlink:href="#a" fill="#f8f9fa"/>
 			<rect width="199" height="11" x="1" y="1" stroke="#a2a9b1" stroke-width="2" rx="2"/>
 		</g>
-		<use fill="#fff" xlink:href="#b"/>
+		<use xlink:href="#b" fill="#fff"/>
 		<rect width="199" height="167" x="1" y="11" stroke="#a2a9b1" stroke-width="2" rx="2"/>
 		<g fill="#72777d" opacity=".4" transform="translate(67 35)">
 			<rect width="73" height="2" y="7" fill="#c8ccd1" rx="1"/>
@@ -36,7 +36,7 @@
 		</g>
 		<rect width="30" height="2" x="67" y="158" fill="#72777d" opacity=".4" rx="1"/>
 		<rect width="30" height="2" x="99" y="158" fill="#72777d" opacity=".4" rx="1"/>
-		<use fill="#36c" xlink:href="#c"/>
+		<use xlink:href="#c" fill="#36c"/>
 		<rect width="33" height="5" x="133.5" y="156.5" stroke="#ffc057" stroke-opacity=".447" stroke-width="3" rx="2.5"/>
 		<circle cx="34" cy="49" r="19" fill="#eaecf0"/>
 		<g fill="#a2a9b1" transform="translate(5 5)">

resources/ext.popups.images/footer-rtl.svg

@@ -8,10 +8,10 @@
 	<g fill="none" fill-rule="evenodd">
 		<g transform="translate(34)">
 			<g transform="matrix(1 0 0 -1 0 13)">
-				<use fill="#f8f9fa" xlink:href="#a"/>
+				<use xlink:href="#a" fill="#f8f9fa"/>
 				<rect width="199" height="11" x="1" y="1" stroke="#a2a9b1" stroke-width="2" rx="2"/>
 			</g>
-			<use fill="#fff" xlink:href="#b"/>
+			<use xlink:href="#b" fill="#fff"/>
 			<rect width="199" height="167" x="1" y="11" stroke="#a2a9b1" stroke-width="2" rx="2"/>
 			<g fill="#72777d" opacity=".4" transform="matrix(-1 0 0 1 132 35)">
 				<rect width="73" height="2" y="7" fill="#c8ccd1" rx="1"/>
@@ -37,7 +37,7 @@
 			</g>
 			<rect width="30" height="2" x="69" y="158" fill="#72777d" opacity=".4" rx="1"/>
 			<rect width="30" height="2" x="101" y="158" fill="#72777d" opacity=".4" rx="1"/>
-			<use fill="#36C" xlink:href="#c"/>
+			<use xlink:href="#c" fill="#36C"/>
 			<rect width="33" height="5" x="32.5" y="156.5" stroke="#ffc057" stroke-opacity=".447" stroke-width="3" rx="2.5"/>
 			<circle cx="168" cy="49" r="19" fill="#eaecf0"/>
 			<g fill="#a2a9b1" transform="translate(183 5)">