Improve SVGO configset and SVGs task

assets.json

@@ -1,3 +1,3 @@
 {
-    "version": 1706549368176
+    "version": 1706558057916
 }

build/config/svgo.js

@@ -1,3 +1,14 @@
+/**
+ * @file Provides a custom configuration to optimize (but not minimize)
+ * individual SVG files.
+ *
+ * This configset will not work, as is, with spritesheets.
+ * You will need to remove the following plugins:
+ *
+ * - `cleanupIds`
+ * - `removeHiddenElems`
+ */
+
 export default {
     multipass: true,
     js2svg: {
@@ -7,7 +18,7 @@ export default {
     plugins: [
         'cleanupAttrs',
         'cleanupEnableBackground',
-        'cleanupIDs',
+        'cleanupIds',
         'cleanupListOfValues',
         'cleanupNumericValues',
         'collapseGroups',
@@ -49,4 +60,4 @@ export default {
         // 'sortAttrs',
         'sortDefsChildren',
     ],
-}
+};

build/tasks/svgs.js

@@ -1,3 +1,4 @@
+import defaultSVGOOptions from '../config/svgo.js';
 import loconfig from '../helpers/config.js';
 import message from '../helpers/message.js';
 import notification from '../helpers/notification.js';
@@ -20,13 +21,22 @@ export const defaultMixerOptions = {
 export const developmentMixerOptions = Object.assign({}, defaultMixerOptions);
 export const productionMixerOptions  = Object.assign({}, defaultMixerOptions);
 
+/**
+ * Exclude certain SVGO plugins for the purposes of building a spritesheet.
+ */
+const excludeSVGOPlugins = [
+    'cleanupIds',
+    'removeHiddenElems',
+];
+defaultSVGOOptions.plugins = defaultSVGOOptions.plugins.filter((plugin) => !excludeSVGOPlugins.includes(plugin));
+defaultSVGOOptions.js2svg.pretty = false;
+
 /**
  * @const {object} defaultSVGOOptions     - The default shared SVGO options.
  * @const {object} developmentSVGOOptions - The predefined SVGO options for development.
  * @const {object} productionSVGOOptions  - The predefined SVGO options for production.
  */
-export const defaultSVGOOptions = {
-};
+export { defaultSVGOOptions };
 export const developmentSVGOOptions = Object.assign({}, defaultSVGOOptions);
 export const productionSVGOOptions  = Object.assign({}, defaultSVGOOptions);
 

docs/development.md

@@ -49,6 +49,9 @@ npm start
 
 # Compile and minify assets
 npm run build
+
+# Optimize individual SVG files
+npm run optimize:svg -- -f ./assets/images ./assets/images
 ```
 
 See [`build.js`](../build/build.js) and [`watch.js`](../build/watch.js)
@@ -306,7 +309,7 @@ See the [documentation on our Grid System](grid.md#build-tasks) for details.
 
 ### `svgs`
 
-A wrapper around [SVG Mixer] for transforming and minifying SVG files
+A wrapper around [SVG Mixer] and [SVGO] for transforming and minifying SVG files
 and generating spritesheets.
 
 Example:
@@ -429,4 +432,5 @@ See [`versions.js`](../build/tasks/versions.js) for details.
 [PurgeCSS]:     https://purgecss.com/
 [RegExp]:       https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp
 [SVG Mixer]:    https://npmjs.com/package/svg-mixer
+[SVGO]:         https://npmjs.com/package/svgo
 [tiny-glob]:    https://npmjs.com/package/tiny-glob

www/assets/images/sprite.svg

@@ -1 +1 @@
-<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs></defs></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0"/>