use SVGO instead of html-minifier

README.md

@@ -66,8 +66,8 @@ Ideas for other diagrams: https://stereobooster.com/posts/text-to-diagram/.
 
 ## TODO
 
-- [ ] make `@beoe/cache` usable in Astro components
 - [ ] reuse `processGraphvizSvg` in `@beoe/astro-graphviz`
+- [ ] make `@beoe/cache` usable in Astro components
 - [ ] example of gnuplot custom diagram
   - any diagram which expects `input.dat`, for example https://gnuplot.sourceforge.net/demo_svg_5.4/histograms.html
   - maybe do it like [asciidoctor does for penrose](https://docs.asciidoctor.org/diagram-extension/latest/diagram_types/penrose/)?
@@ -84,6 +84,13 @@ Ideas for other diagrams: https://stereobooster.com/posts/text-to-diagram/.
 - [ ] maybe move to this monorepo [venn-isomorphic](https://github.com/stereobooster/venn-isomorphic)
 - [ ] maybe move to this monorepo [gnuplot-wasm](https://github.com/stereobooster/gnuplot-wasm)
 
+## Notes
+
+- https://github.com/svg/svgo alternatives
+  - https://www.npmjs.com/package/@minify-html/node
+  - https://github.com/pleshevskiy/node-svgcleaner
+  - https://github.com/RazrFalcon/svgcleaner
+
 ## Logo
 
 Logo is an illustration from [Oliver Byrne's Elements of Euclid: The First Six Books with Coloured Diagrams and Symbols](https://www.c82.net/euclid/).

experiments/rehype-pintora/package.json

@@ -38,7 +38,6 @@
   },
   "devDependencies": {
     "@types/hast": "^3.0.4",
-    "@types/html-minifier": "^4.0.5",
     "unified": "^11.0.4",
     "rehype-stringify": "^10.0.0",
     "remark-parse": "^11.0.0",

packages/demo/src/styles/custom.css

@@ -10,10 +10,12 @@
   text {
     fill: var(--sl-color-white);
   }
-  [fill="black"] {
+  [fill="black"],
+  [fill="#000"] {
     fill: var(--sl-color-white);
   }
-  [stroke="black"] {
+  [stroke="black"],
+  [stroke="#000"] {
     stroke: var(--sl-color-white);
   }
 }

packages/rehype-gnuplot/package.json

@@ -34,14 +34,13 @@
   "dependencies": {
     "@beoe/rehype-code-hook": "workspace:*",
     "gnuplot-wasm": "^0.0.1",
-    "html-minifier": "^4.0.0"
+    "svgo": "^3.2.0"
   },
   "devDependencies": {
     "@types/hast": "^3.0.4",
-    "@types/html-minifier": "^4.0.5",
-    "unified": "^11.0.4",
     "rehype-stringify": "^10.0.0",
     "remark-parse": "^11.0.0",
-    "remark-rehype": "^11.1.0"
+    "remark-rehype": "^11.1.0",
+    "unified": "^11.0.4"
   }
 }

packages/rehype-gnuplot/src/gnuplot.ts

@@ -1,21 +1,33 @@
-import { minify } from "html-minifier";
+// SVGO is an experiment. I'm not sure it can compress a lot, plus it can break some diagrams
+import { optimize, type Config as SvgoConfig } from "svgo";
 
-const minifyOptions = {
-  removeComments: true,
-  collapseWhitespace: true,
+const svgoConfig: SvgoConfig = {
+  plugins: [
+    {
+      name: "preset-default",
+      params: {
+        overrides: {
+          // disable a default plugin
+          removeViewBox: false,
+        },
+      },
+    },
+  ],
 };
 
 /**
  * removes `<?xml version="1.0" encoding="utf-8"  standalone="no"?>`
  * removes `width="..." height="..."` from svg tag
- * minifies SVG with `html-minifier`
+ * minifies SVG with `SVGO`
  * wraps in a figure with class `beoe gnuplot`
- *
- * Can also try SVGO
  */
-export const processGnuplotSvg = (svg: string, className?: string) => {
+export const processGnuplotSvg = (
+  svg: string,
+  className?: string,
+  config?: SvgoConfig
+) => {
   svg = svg.split("\n").slice(1).join("\n");
-  svg = minify(svg, minifyOptions);
+  svg = optimize(svg, config || svgoConfig).data;
   svg = svg.replace(/\s+width="\d+[^"]*"/, "");
   svg = svg.replace(/\s+height="\d+[^"]*"/, "");
   return `<figure class="beoe gnuplot ${className || ""}">${svg}</figure>`;

packages/rehype-gnuplot/test/fixtures/a.md

@@ -1,16 +1,3 @@
 ```gnuplot
-set key fixed left top vertical Right noreverse enhanced autotitle box lt black linewidth 1.000 dashtype solid
-set samples 50, 50
-set title "Simple Plots"
-set title  font ",20" textcolor lt -1 norotate
-set xrange [ * : * ] noreverse writeback
-set x2range [ * : * ] noreverse writeback
-set yrange [ * : * ] noreverse writeback
-set y2range [ * : * ] noreverse writeback
-set zrange [ * : * ] noreverse writeback
-set cbrange [ * : * ] noreverse writeback
-set rrange [ * : * ] noreverse writeback
-set colorbox vertical origin screen 0.9, 0.2 size screen 0.05, 0.6 front  noinvert bdefault
-NO_ANIMATION = 1
-plot [-10:10] sin(x),atan(x),cos(atan(x))
+plot [-10:10] sin(x)
 ```

packages/rehype-gnuplot/test/gnuplot.test.ts

@@ -22,7 +22,7 @@ const svg = `<?xml version="1.0" encoding="utf-8"  standalone="no"?>
 it("removes xml doctype", async () => {
   const result = processGnuplotSvg(svg);
 
-  expect(result).toMatchInlineSnapshot(`"<figure class="beoe gnuplot "><svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Gnuplot</title><desc>Produced by GNUPLOT 5.4 patchlevel 0</desc><g id="gnuplot_canvas"><rect x="0" y="0" width="1000" height="500" fill="#ffffff"/></g></svg></figure>"`);
+  expect(result).toMatchInlineSnapshot(`"<figure class="beoe gnuplot "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 500"><desc>Produced by GNUPLOT 5.4 patchlevel 0</desc><path fill="#fff" d="M0 0h1000v500H0z"/></svg></figure>"`);
 });
 
 it("removes width and height", async () => {

packages/rehype-graphviz/package.json

@@ -34,14 +34,13 @@
   "dependencies": {
     "@beoe/rehype-code-hook": "workspace:*",
     "@hpcc-js/wasm": "^2.16.1",
-    "html-minifier": "^4.0.0"
+    "svgo": "^3.2.0"
   },
   "devDependencies": {
     "@types/hast": "^3.0.4",
-    "@types/html-minifier": "^4.0.5",
-    "unified": "^11.0.4",
     "rehype-stringify": "^10.0.0",
     "remark-parse": "^11.0.0",
-    "remark-rehype": "^11.1.0"
+    "remark-rehype": "^11.1.0",
+    "unified": "^11.0.4"
   }
 }

packages/rehype-graphviz/src/graphviz.ts

@@ -1,26 +1,38 @@
-import { minify } from "html-minifier";
-
-const minifyOptions = {
-  removeComments: true,
-  collapseWhitespace: true,
-};
+// SVGO is an experiment. I'm not sure it can compress a lot, plus it can break some diagrams
+import { optimize, type Config as SvgoConfig } from "svgo";
 
 export type GraphvizSvgOptions = {
   class?: string;
 };
 
+const svgoConfig: SvgoConfig = {
+  plugins: [
+    {
+      name: "preset-default",
+      params: {
+        overrides: {
+          // disable a default plugin
+          removeViewBox: false,
+        },
+      },
+    },
+  ],
+};
+
 /**
  * removes `<?xml version="1.0" encoding="UTF-8" standalone="no"?>`
  * removes `<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"`
  * removes `width="..." height="..."` from svg tag
- * minifies SVG with `html-minifier`
+ * minifies SVG with `SVGO`
  * wraps in a figure with class `beoe graphviz`
- *
- * Can also try SVGO
  */
-export const processGraphvizSvg = (svg: string, className?: string) => {
+export const processGraphvizSvg = (
+  svg: string,
+  className?: string,
+  config?: SvgoConfig
+) => {
   svg = svg.split("\n").slice(6).join("\n");
-  svg = minify(svg, minifyOptions);
+  svg = optimize(svg, config || svgoConfig).data;
   svg = svg.replace(/width="\d+[^"]+"\s+/, "");
   svg = svg.replace(/height="\d+[^"]+"\s+/, "");
   return `<figure class="beoe graphviz ${className || ""}">${svg}</figure>`;

packages/rehype-graphviz/test/fixtures/a.html

@@ -1 +1 @@
-<figure class="beoe graphviz"><svg viewBox="0.00 0.00 79.41 116.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 112)"><title>G</title><polygon fill="white" stroke="none" points="-4,4 -4,-112 75.41,-112 75.41,4 -4,4"></polygon><g id="node1" class="node"><title>Hello</title><ellipse fill="none" stroke="black" cx="35.71" cy="-90" rx="32.49" ry="18"></ellipse><text text-anchor="middle" x="35.71" y="-85.8" font-family="Times,serif" font-size="14.00">Hello</text></g><g id="node2" class="node"><title>World</title><ellipse fill="none" stroke="black" cx="35.71" cy="-18" rx="35.71" ry="18"></ellipse><text text-anchor="middle" x="35.71" y="-13.8" font-family="Times,serif" font-size="14.00">World</text></g><g id="edge1" class="edge"><title>Hello->World</title><path fill="none" stroke="black" d="M35.71,-71.7C35.71,-64.41 35.71,-55.73 35.71,-47.54"></path><polygon fill="black" stroke="black" points="39.21,-47.62 35.71,-37.62 32.21,-47.62 39.21,-47.62"></polygon></g></g></svg></figure>
+<figure class="beoe graphviz"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79.41 116"><g class="graph" transform="translate(4 112)"><path fill="#fff" d="M-4 4v-116h79.41V4z"></path><g class="node"><ellipse cx="35.71" cy="-90" fill="none" stroke="#000" rx="32.49" ry="18"></ellipse><text x="35.71" y="-85.8" font-family="Times,serif" font-size="14" text-anchor="middle">Hello</text></g><g class="node"><ellipse cx="35.71" cy="-18" fill="none" stroke="#000" rx="35.71" ry="18"></ellipse><text x="35.71" y="-13.8" font-family="Times,serif" font-size="14" text-anchor="middle">World</text></g><g class="edge"><path fill="none" stroke="#000" d="M35.71-71.7v24.16"></path><path stroke="#000" d="m39.21-47.62-3.5 10-3.5-10z"></path></g></g></svg></figure>

packages/rehype-graphviz/test/graphviz.test.ts

@@ -21,7 +21,7 @@ it("removes xml doctype", async () => {
   const result = processGraphvizSvg(svg);
 
   expect(result).toMatchInlineSnapshot(
-    `"<figure class="beoe graphviz "><svg viewBox="0.00 0.00 79.41 116.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 112)"><title>G</title><polygon fill="white" stroke="none" points="-4,4 -4,-112 75.41,-112 75.41,4 -4,4"/></g></svg></figure>"`
+    `"<figure class="beoe graphviz "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79.41 116"><g class="graph" transform="translate(4 112)"><path fill="#fff" d="M-4 4v-116h79.41V4z"/></g></svg></figure>"`
   );
 });
 

packages/rehype-mermaid/src/index.ts

@@ -12,6 +12,20 @@ import { h } from "hastscript";
 // SVGO is an experiment. I'm not sure it can compress a lot, plus it can break some diagrams
 import { optimize, type Config as SvgoConfig } from "svgo";
 
+const svgoConfig: SvgoConfig = {
+  plugins: [
+    {
+      name: "preset-default",
+      params: {
+        overrides: {
+          // disable a default plugin
+          removeViewBox: false,
+        },
+      },
+    },
+  ],
+};
+
 export type RehypeMermaidConfig = RenderOptions &
   CreateMermaidRendererOptions & {
     cache?: MapLike;
@@ -112,7 +126,7 @@ export const rehypeMermaid: Plugin<[RehypeMermaidConfig?], Root> = (
 
     if (x.status === "fulfilled") {
       if (svgo)
-        x.value.svg = optimize(x.value.svg, svgo === true ? {} : svgo).data;
+        x.value.svg = optimize(x.value.svg, svgo === true ? svgoConfig : svgo).data;
 
       return x.value;
     } else {