From 1bb6be50b1b175c64356f075593e673f9e029181 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Thu, 8 Dec 2022 00:14:18 +0100
Subject: [PATCH] feat: placeholder rects for images

---
 src/components/SVGContent.svelte | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/SVGContent.svelte b/src/components/SVGContent.svelte
index f8cd545..422fd3b 100644
--- a/src/components/SVGContent.svelte
+++ b/src/components/SVGContent.svelte
@@ -391,9 +391,9 @@
     return result;
   }
 
-  function processImages(document: SVGElement): SVGImageElement[] {
+  function processImages(svgDocument: SVGElement): SVGImageElement[] {
     const result: SVGImageElement[] = [];
-    Array.from(document.getElementsByTagName("image")).forEach((image) => {
+    Array.from(svgDocument.getElementsByTagName("image")).forEach((image) => {
       const href = image.getAttribute("xlink:href");
       console.debug(`[SVG/IMAGES] Found image #${image.id} (${href}).`);
       const origPath = href.split("/");
@@ -401,6 +401,16 @@
       newHref = newHref.replace(/jpg$/, "webp");
       image.setAttribute("xlink:href", newHref);
       result.push(image);
+
+      const placeholderRect = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "rect"
+      );
+      placeholderRect.setAttribute("fill", "lightgray");
+      ["x", "y", "width", "height"].forEach((attr) => {
+        placeholderRect.setAttribute(attr, image.getAttribute(attr));
+      });
+      image.parentElement.prepend(placeholderRect);
     });
     return result;
   }