SVG optimizations (#1745)

* remove legacy svgo script

* update svgo dep + new updated SVG minifier script

* minify SVGs

* update SVG paths to use *.mini.svg

Author: fturmel

node-scripts/minify-svgs.mjs

@@ -0,0 +1,63 @@
+import fs from 'node:fs/promises';
+import { optimize } from 'svgo';
+import { glob } from 'glob';
+import path from 'node:path';
+
+// Find non-minified SVG imports in codebase with regex search: (\S+(?<!\.mini)\.svg)
+
+const config = {
+  multipass: true,
+  plugins: [
+    {
+      name: 'preset-default',
+      params: {
+        overrides: {
+          inlineStyles: {
+            onlyMatchedOnce: false
+          }
+        }
+      }
+    },
+    'removeStyleElement'
+  ]
+};
+
+const srcImages = await glob(
+  ['src/images/**/*.svg', 'static/images/**/*.svg'],
+  { ignore: '**/*.mini.svg' }
+);
+
+let bytesSaved = 0;
+
+const promises = srcImages.map(async (file) => {
+  const data = await fs.readFile(file, 'utf-8');
+  const result = optimize(data, config);
+
+  if (result.error) {
+    console.error(result.error);
+    process.exit(1);
+  }
+
+  const sizeDelta = result.data.length - data.length;
+  bytesSaved += sizeDelta;
+
+  console.log(file);
+  console.log(
+    sizeDelta <= 0 ? '  🟢' : '  🟡',
+    `${((sizeDelta / data.length) * 100).toFixed(2)}%`
+  );
+  console.log('    ', (sizeDelta / 1024).toFixed(2), 'kB');
+
+  const { dir, name } = path.parse(file);
+  const destinationFile = path.join(dir, `${name}.mini.svg`);
+
+  await fs.writeFile(destinationFile, result.data, 'utf-8');
+});
+
+await Promise.all(promises);
+
+console.log(
+  'Done!',
+  (bytesSaved / 1024).toFixed(2),
+  'kB size difference total'
+);

package-lock.json

@@ -62,6 +62,6 @@
     "prettier": "^3.0.3",
     "sharp": "^0.32.6",
     "slugify": "^1.6.6",
-    "svgo": "^3.0.2"
+    "svgo": "^3.3.2"
   }
 }

package.json

@@ -5,9 +5,9 @@ import Image from './Image';
 
 import * as css from './CodeExampleList.module.css';
 
-import NodeIcon from '../images/node-icon.svg';
-import P5Icon from '../images/p5js-icon.svg';
-import ProcessingLogo from '../images/processing-icon.svg';
+import NodeIcon from '../images/node-icon.mini.svg';
+import P5Icon from '../images/p5js-icon.mini.svg';
+import ProcessingLogo from '../images/processing-icon.mini.svg';
 
 const icons = {
   p5: () => <P5Icon className={css.p5} />,

src/components/CodeExampleList.js

@@ -5,7 +5,7 @@ import cn from 'classnames';
 
 import * as css from './Footer.module.css';
 
-import Logo from '../images/logo.svg';
+import Logo from '../images/logo.mini.svg';
 
 import {
   FaGithub,
@@ -37,7 +37,7 @@ const Footer = () => {
         </div>
         <div className={css.train}>
           <img
-            src="/images/train.svg"
+            src="/images/train.mini.svg"
             width={371}
             height={150}
             alt="The Coding Train illustration"

src/components/Footer.js

@@ -4,10 +4,10 @@ import cn from 'classnames';
 import { Heading1 } from '../components/Heading';
 import Spacer from './Spacer';
 
-import Train from '../images/characters/homepage.svg';
-import TrainTrack from '../images/tracks.svg';
-import Sun from '../images/sun.svg';
-import Cloud from '../images/cloud.svg';
+import Train from '../images/characters/homepage.mini.svg';
+import TrainTrack from '../images/tracks.mini.svg';
+import Sun from '../images/sun.mini.svg';
+import Cloud from '../images/cloud.mini.svg';
 
 import SemiColonCharacter from '../images/characters/SemiColon_hello.mini.svg';
 

src/components/HomepageScene.js

@@ -13,7 +13,7 @@ const NebulaVideoRow = ({ nebulaSlug, variant }) => {
           rel="noopener noreferrer">
           <img
             className={css.svg}
-            src="/images/nebula-button.svg"
+            src="/images/nebula-button.mini.svg"
             alt="Nebula logo"
           />
         </a>

src/components/NebulaVideoRow.js

@@ -5,7 +5,7 @@ import Image from './Image';
 
 import * as css from './PassengerShowcasePanel.module.css';
 
-import PlayButton from '../images/playbutton.svg';
+import PlayButton from '../images/playbutton.mini.svg';
 import { useIsFirstRender } from '../hooks';
 import { shuffleCopy } from '../utils';
 

src/components/PassengerShowcasePanel.js

@@ -6,7 +6,7 @@ import YouTubeVideo from './YouTubeVideo';
 
 import * as css from './Question.module.css';
 
-import Open from '../images/open.svg';
+import Open from '../images/open.mini.svg';
 
 import { useLinkParsedText } from '../hooks';
 

src/components/Question.js

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import cn from 'classnames';
 
-import PlayButton from '../images/playbutton-filled.svg';
+import PlayButton from '../images/playbutton-filled.mini.svg';
 
 import * as css from './TimestampTimeline.module.css';