refactor(card): add SVG minification to reduce response size (#940)

Author: FajarKim

package-lock.json

@@ -9,11 +9,13 @@
     "@resvg/resvg-js": "^2.6.2",
     "@types/escape-html": "^1.0.4",
     "@types/express": "^5.0.6",
+    "@types/html-minifier-terser": "^7.0.2",
     "@types/node": "^25.5.0",
     "axios": "^1.14.0",
     "dotenv": "^17.3.1",
     "escape-html": "^1.0.3",
     "express": "^5.2.1",
+    "html-minifier-terser": "^7.2.0",
     "millify": "^6.1.0",
     "node-base64-image": "^2.2.0",
     "sharp": "^0.34.5"

package.json

@@ -1,4 +1,5 @@
 import sharp from "sharp";
+import { minify } from "html-minifier-terser";
 import parseBoolean from "@barudakrosul/parse-boolean";
 import type { GetData } from "./getData";
 import type { UiConfig } from "../api/index";
@@ -235,7 +236,7 @@ export default async function card(data: GetData, uiConfig: UiConfig): Promise<s
   // Dynamic SVG height based on the number of items
   const svgHeight = Math.max(220, 45 + visibleItems.length * 25);
 
-  return `
+  const rawSVG = `
     <svg width="535" height="${svgHeight}" direction="${isRtl ? "rtl" : "ltr"}" viewBox="0 0 535 ${svgHeight}" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
       <style>
         ${animationsCSS}
@@ -295,4 +296,19 @@ export default async function card(data: GetData, uiConfig: UiConfig): Promise<s
       </g>
     </svg>
   `;
+
+  // Minify SVG
+  const minifiedSVG = await minify(rawSVG, {
+    collapseWhitespace: true,
+    removeComments: true,
+    removeEmptyAttributes: true,
+    removeRedundantAttributes: true,
+    useShortDoctype: true,
+    removeOptionalTags: false,
+    removeAttributeQuotes: false,
+    minifyCSS: true,
+    minifyJS: false,
+  });
+
+  return minifiedSVG;
 }