Make background-exporter work with multiple <image> instances

backgrounds/background-exporter.html

@@ -11,27 +11,27 @@ 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]");
 
-  const logoHref = imgEl.getAttribute("href") || imgEl.getAttribute("xlink:href");
+  for (const imgEl of imageEls) {
+    const href = imgEl.getAttribute("href") || imgEl.getAttribute("xlink:href");
 
-  // Load logo
-  const logoText = await (await fetch(logoHref)).text();
+    // 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 of logo.svg
+    // Extract inner content
     const logoInner = Array.from(logoSvg.childNodes)
       .filter(n => n.nodeType === 1)
       .map(n => n.outerHTML)
       .join("");
 
-  // Read logo viewBox
+    // Read viewBox
     const vb = logoSvg.getAttribute("viewBox").split(" ").map(Number);
     const vbWidth = vb[2];
     const vbHeight = vb[3];
@@ -46,11 +46,11 @@ async function inlineAndExport() {
     const scaleX = w / vbWidth;
     const scaleY = h / vbHeight;
 
-  // Create <g> with correct transform
+    // Create <g> wrapper
     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>
+    // Preserve width/height
     g.setAttribute("width", imgEl.getAttribute("width"));
     g.setAttribute("height", imgEl.getAttribute("height"));
 
@@ -58,6 +58,7 @@ async function inlineAndExport() {
 
     // Replace <image> with <g>
     imgEl.replaceWith(g);
+  }
 
   // Serialize final SVG
   const finalSVG = new XMLSerializer().serializeToString(svg);