Revert to svg on mobile

Author: Tom-Notch

src/components/AdaptiveSvg.tsx

@@ -1,4 +1,4 @@
-import { useSyncExternalStore } from "react";
+import { useCallback, useState, useSyncExternalStore } from "react";
 
 const MD_BREAKPOINT = 768;
 
@@ -33,36 +33,58 @@ interface AdaptiveSvgProps {
   src: string;
   alt?: string;
   className?: string;
+  /** Use <img> instead of <object> on mobile (may cause shadow artifacts). */
+  mobileImg?: boolean;
 }
 
-export function AdaptiveSvg({ src, alt, className }: AdaptiveSvgProps) {
+export function AdaptiveSvg({
+  src,
+  alt,
+  className,
+  mobileImg = false,
+}: AdaptiveSvgProps) {
   const isDesktop = useIsDesktop();
   const url = resolveUrl(src);
+  const useObject = isDesktop || !mobileImg;
+  const [aspectRatio, setAspectRatio] = useState<string>();
+
+  const handleLoad = useCallback(
+    (e: React.SyntheticEvent<HTMLObjectElement>) => {
+      try {
+        const svg = e.currentTarget.contentDocument?.documentElement;
+        if (!svg) return;
+        const vb = svg.getAttribute("viewBox");
+        if (!vb) return;
+        const parts = vb
+          .trim()
+          .split(/[\s,]+/)
+          .map(Number);
+        if (parts.length === 4 && parts[2] > 0 && parts[3] > 0) {
+          setAspectRatio(`${parts[2]} / ${parts[3]}`);
+        }
+      } catch {
+        // cross-origin — ignore
+      }
+    },
+    [],
+  );
 
   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>
+      {useObject ? (
+        <object
+          data={url}
+          type="image/svg+xml"
+          aria-label={alt || src}
+          role="img"
+          className="block h-auto w-full"
+          style={aspectRatio ? { aspectRatio } : undefined}
+          onLoad={handleLoad}
+        >
+          {alt || src}
+        </object>
       ) : (
         <img src={url} alt={alt || ""} className="block h-full w-full" />
       )}