From 7d72d2540a9a066913ccf81d6f04f54dfb4e8825 Mon Sep 17 00:00:00 2001
From: Frank Zechert <frank@zechert.net>
Date: Sun, 10 May 2026 02:22:17 +0200
Subject: [PATCH] Make background-exporter work with multiple <image> instances

---
 backgrounds/background-exporter.html | 93 ++++++++++++++--------------
 1 file changed, 47 insertions(+), 46 deletions(-)

diff --git a/backgrounds/background-exporter.html b/backgrounds/background-exporter.html
index 9b22bea..df8c48d 100644
--- a/backgrounds/background-exporter.html
+++ b/backgrounds/background-exporter.html
@@ -11,54 +11,55 @@ async function inlineAndExport() {
   const bgDoc = parser.parseFromString(bgText, "image/svg+xml");
   const svg = bgDoc.documentElement;
 
-  // Find the <image> referencing the logo (first one)
-  const imgEl = svg.querySelector("image[href], image[xlink\\:href]");
-  if (!imgEl) {
-    console.error("No <image> element found in background.svg");
-    return;
+  // Find ALL <image> elements
+  const imageEls = svg.querySelectorAll("image[href], image[xlink\\:href]");
+
+  for (const imgEl of imageEls) {
+    const href = imgEl.getAttribute("href") || imgEl.getAttribute("xlink:href");
+
+    // Only inline SVG images (skip PNG/JPG/etc.)
+    if (!href.endsWith(".svg")) continue;
+
+    // Load the referenced SVG
+    const logoText = await (await fetch(href)).text();
+    const logoDoc = parser.parseFromString(logoText, "image/svg+xml");
+    const logoSvg = logoDoc.documentElement;
+
+    // Extract inner content
+    const logoInner = Array.from(logoSvg.childNodes)
+      .filter(n => n.nodeType === 1)
+      .map(n => n.outerHTML)
+      .join("");
+
+    // Read viewBox
+    const vb = logoSvg.getAttribute("viewBox").split(" ").map(Number);
+    const vbWidth = vb[2];
+    const vbHeight = vb[3];
+
+    // Read <image> geometry
+    const x = parseFloat(imgEl.getAttribute("x") || 0);
+    const y = parseFloat(imgEl.getAttribute("y") || 0);
+    const w = parseFloat(imgEl.getAttribute("width"));
+    const h = parseFloat(imgEl.getAttribute("height"));
+
+    // Compute scale
+    const scaleX = w / vbWidth;
+    const scaleY = h / vbHeight;
+
+    // Create <g> wrapper
+    const g = bgDoc.createElementNS("http://www.w3.org/2000/svg", "g");
+    g.setAttribute("transform", `translate(${x},${y}) scale(${scaleX},${scaleY})`);
+
+    // Preserve width/height
+    g.setAttribute("width", imgEl.getAttribute("width"));
+    g.setAttribute("height", imgEl.getAttribute("height"));
+
+    g.innerHTML = logoInner;
+
+    // Replace <image> with <g>
+    imgEl.replaceWith(g);
   }
 
-  const logoHref = imgEl.getAttribute("href") || imgEl.getAttribute("xlink:href");
-
-  // Load logo
-  const logoText = await (await fetch(logoHref)).text();
-  const logoDoc = parser.parseFromString(logoText, "image/svg+xml");
-  const logoSvg = logoDoc.documentElement;
-
-  // Extract inner content of logo.svg
-  const logoInner = Array.from(logoSvg.childNodes)
-    .filter(n => n.nodeType === 1)
-    .map(n => n.outerHTML)
-    .join("");
-
-  // Read logo viewBox
-  const vb = logoSvg.getAttribute("viewBox").split(" ").map(Number);
-  const vbWidth = vb[2];
-  const vbHeight = vb[3];
-
-  // Read <image> geometry
-  const x = parseFloat(imgEl.getAttribute("x") || 0);
-  const y = parseFloat(imgEl.getAttribute("y") || 0);
-  const w = parseFloat(imgEl.getAttribute("width"));
-  const h = parseFloat(imgEl.getAttribute("height"));
-
-  // Compute scale
-  const scaleX = w / vbWidth;
-  const scaleY = h / vbHeight;
-
-  // Create <g> with correct transform
-  const g = bgDoc.createElementNS("http://www.w3.org/2000/svg", "g");
-  g.setAttribute("transform", `translate(${x},${y}) scale(${scaleX},${scaleY})`);
-
-  // ⭐ NEW: preserve width/height from the original <image>
-  g.setAttribute("width", imgEl.getAttribute("width"));
-  g.setAttribute("height", imgEl.getAttribute("height"));
-
-  g.innerHTML = logoInner;
-
-  // Replace <image> with <g>
-  imgEl.replaceWith(g);
-
   // Serialize final SVG
   const finalSVG = new XMLSerializer().serializeToString(svg);
   const svg64 = btoa(unescape(encodeURIComponent(finalSVG)));