Adaptive svg loading

Tom-Notch · Tom-Notch · commit 54b83b59783f · 2026-04-02T00:41:01.000-04:00
diff --git a/public/DeepLab_v3.svg b/public/DeepLab_v3.svg
@@ -4,8 +4,8 @@
 <svg
    version="1.1"
    id="svg1"
-   width="960"
-   height="480"
+   width="100%"
+   height="100%"
    viewBox="0 0 960 480"
    sodipodi:docname="DeepLab_v3.pdf"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
diff --git a/public/Equivariance_vs_Invariance.svg b/public/Equivariance_vs_Invariance.svg
@@ -4,8 +4,8 @@
 <svg
    version="1.1"
    id="svg1"
-   width="864"
-   height="624"
+   width="100%"
+   height="100%"
    viewBox="0 0 864 624"
    sodipodi:docname="Equivariance_vs_Invariance.pdf"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
diff --git a/public/Tailored_Planar_Model.svg b/public/Tailored_Planar_Model.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" width="630" height="486" viewBox="0 0 630 486">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" width="100%" height="100%" viewBox="0 0 630 486">
 <defs>
 <clipPath id="clip_1">
 <path transform="matrix(1,0,0,-1,0,486)" d="M0 .000091553H630V486.0001H0Z" clip-rule="evenodd"/>
diff --git a/public/UNet.svg b/public/UNet.svg
@@ -4,8 +4,8 @@
 <svg
    version="1.1"
    id="svg1"
-   width="1680"
-   height="576"
+   width="100%"
+   height="100%"
    viewBox="0 0 1680 576"
    sodipodi:docname="UNet.pdf"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
diff --git a/public/YOLOv11.svg b/public/YOLOv11.svg
@@ -4,8 +4,8 @@
 <svg
    version="1.1"
    id="svg1"
-   width="1680"
-   height="480"
+   width="100%"
+   height="100%"
    viewBox="0 0 1680 480"
    sodipodi:docname="YOLOv11.pdf"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
diff --git a/public/fisheye_projection.svg b/public/fisheye_projection.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="230.294pt" height="235.130pt" viewBox="92.676 21.789 230.294 235.130" xmlns="http://www.w3.org/2000/svg" version="1.1">
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="92.676 21.789 230.294 235.130" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <metadata>
   <rdf:RDF xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
    <cc:Work>
diff --git a/public/framework.svg b/public/framework.svg
diff --git a/public/network_benchmark.svg b/public/network_benchmark.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="478.030094pt" height="247.656662pt" viewBox="0 0 478.030094 247.656662" xmlns="http://www.w3.org/2000/svg" version="1.1">
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 478.030094 247.656662" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <metadata>
   <rdf:RDF xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
    <cc:Work>
diff --git a/public/pinhole_projection.svg b/public/pinhole_projection.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="185.531pt" height="147.583pt" viewBox="110.023 83.452 185.531 147.583" xmlns="http://www.w3.org/2000/svg" version="1.1">
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="110.023 83.452 185.531 147.583" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <metadata>
   <rdf:RDF xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
    <cc:Work>
diff --git a/public/sampling_benchmark.svg b/public/sampling_benchmark.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="489.896641pt" height="291.57225pt" viewBox="0 0 489.896641 291.57225" xmlns="http://www.w3.org/2000/svg" version="1.1">
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 489.896641 291.57225" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <metadata>
   <rdf:RDF xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
    <cc:Work>
diff --git a/public/single_layer_benchmark.svg b/public/single_layer_benchmark.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="482.238094pt" height="283.73848pt" viewBox="0 0 482.238094 283.73848" xmlns="http://www.w3.org/2000/svg" version="1.1">
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 482.238094 283.73848" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <metadata>
   <rdf:RDF xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
    <cc:Work>
diff --git a/public/spherical_convolution.svg b/public/spherical_convolution.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="164.982pt" height="170.997pt" viewBox="96.113 79.507 164.982 170.997" xmlns="http://www.w3.org/2000/svg" version="1.1">
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="96.113 79.507 164.982 170.997" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <metadata>
   <rdf:RDF xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
    <cc:Work>
diff --git a/src/components/AdaptiveSvg.tsx b/src/components/AdaptiveSvg.tsx
@@ -0,0 +1,71 @@
+import { useSyncExternalStore } from "react";
+
+const MD_BREAKPOINT = 768;
+
+function subscribeDesktop(cb: () => void) {
+  const mql = window.matchMedia(`(min-width: ${MD_BREAKPOINT}px)`);
+  mql.addEventListener("change", cb);
+  return () => mql.removeEventListener("change", cb);
+}
+
+function getDesktopSnapshot() {
+  return window.innerWidth >= MD_BREAKPOINT;
+}
+
+function getServerDesktopSnapshot() {
+  return true;
+}
+
+export function useIsDesktop() {
+  return useSyncExternalStore(
+    subscribeDesktop,
+    getDesktopSnapshot,
+    getServerDesktopSnapshot,
+  );
+}
+
+function resolveUrl(src: string) {
+  const base = import.meta.env.BASE_URL ?? "/";
+  return `${base.endsWith("/") ? base : base + "/"}${src}`;
+}
+
+interface AdaptiveSvgProps {
+  src: string;
+  alt?: string;
+  className?: string;
+}
+
+export function AdaptiveSvg({ src, alt, className }: AdaptiveSvgProps) {
+  const isDesktop = useIsDesktop();
+  const url = resolveUrl(src);
+
+  return (
+    <div
+      className={`dark:hue-rotate-180 dark:invert${className ? ` ${className}` : ""}`}
+    >
+      {isDesktop ? (
+        <div className="relative w-full">
+          {/* Hidden <img> provides correct intrinsic sizing from the SVG viewBox,
+              since <object> can't derive its own height from SVG content. */}
+          <img
+            src={url}
+            alt=""
+            aria-hidden="true"
+            className="invisible block h-auto w-full"
+          />
+          <object
+            data={url}
+            type="image/svg+xml"
+            aria-label={alt || src}
+            role="img"
+            className="absolute inset-0 block h-full w-full"
+          >
+            {alt || src}
+          </object>
+        </div>
+      ) : (
+        <img src={url} alt={alt || ""} className="block h-full w-full" />
+      )}
+    </div>
+  );
+}
diff --git a/src/components/InlineSvg.astro b/src/components/InlineSvg.astro
@@ -1,6 +1,5 @@
 ---
-import fs from "node:fs";
-import path from "node:path";
+import { AdaptiveSvg } from "./AdaptiveSvg.tsx";
 
 interface Props {
   src: string;
@@ -9,40 +8,6 @@ interface Props {
 }
 
 const { src, alt, class: className } = Astro.props;
-
-const filePath = path.resolve("public", src);
-let raw = fs.readFileSync(filePath, "utf-8");
-
-// Strip embedded <style> blocks
-raw = raw.replace(/<style[^>]*>.*?<\/style>/gis, "");
-
-// Strip fixed width/height so the SVG scales via viewBox + CSS
-raw = raw
-  .replace(/(<svg[^>]*?)\s+width="[^"]*"/i, "$1")
-  .replace(/(<svg[^>]*?)\s+height="[^"]*"/i, "$1");
-
-// Namespace every id and its references so multiple SVGs never collide
-const namespace = src.replace(/[^a-zA-Z0-9]/g, "-");
-const ids = new Set<string>();
-raw.replace(/\bid="([^"]+)"/g, (_, id: string) => {
-  ids.add(id);
-  return "";
-});
-for (const id of ids) {
-  const nsId = `${namespace}-${id}`;
-  raw = raw
-    .replaceAll(`id="${id}"`, `id="${nsId}"`)
-    .replaceAll(`="#${id}"`, `="#${nsId}"`)
-    .replaceAll(`url(#${id})`, `url(#${nsId})`);
-}
 ---
 
-<div
-  class:list={[
-    "overflow-hidden dark:hue-rotate-180 dark:invert [&_svg]:block [&_svg]:h-auto [&_svg]:w-full",
-    className,
-  ]}
-  role="img"
-  aria-label={alt ?? src}
-  set:html={raw}
-/>
+<AdaptiveSvg client:load src={src} alt={alt} className={className} />
diff --git a/src/components/InteractiveFramework.tsx b/src/components/InteractiveFramework.tsx
diff --git a/src/components/MotivationFigures.tsx b/src/components/MotivationFigures.tsx
diff --git a/src/components/SubFigures.astro b/src/components/SubFigures.astro
