custom frame svg

src/app/globals.css

@@ -27,3 +27,7 @@ body {
     )
     rgb(var(--background-start-rgb));
 }
+
+.tl-frame-heading {
+  display: none;
+}

src/components/live-image.tsx

@@ -1,9 +1,12 @@
 /* eslint-disable @next/next/no-img-element */
 /* eslint-disable react-hooks/rules-of-hooks */
 import {
+  canonicalizeRotation,
   FrameShapeUtil,
+  getDefaultColorTheme,
   getSvgAsImage,
   HTMLContainer,
+  SelectionEdge,
   TLEventMapHandler,
   TLFrameShape,
   TLShape,
@@ -53,6 +56,21 @@ export class LiveImageShapeUtil extends FrameShapeUtil {
     };
   }
 
+  override toSvg(shape: TLFrameShape) {
+    const theme = getDefaultColorTheme({
+      isDarkMode: this.editor.user.getIsDarkMode(),
+    });
+    const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
+
+    const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    rect.setAttribute("width", shape.props.w.toString());
+    rect.setAttribute("height", shape.props.h.toString());
+    rect.setAttribute("fill", theme.solid);
+    g.appendChild(rect);
+
+    return g;
+  }
+
   override component(shape: TLFrameShape) {
     const editor = useEditor();
     const component = super.component(shape);
@@ -150,7 +168,11 @@ export class LiveImageShapeUtil extends FrameShapeUtil {
         }
         imageDigest.current = shapesDigest;
 
-        const svg = await editor.getSvg(shapes, { background: true });
+        const svg = await editor.getSvg([shape], {
+          background: true,
+          padding: 0,
+          darkMode: editor.user.getIsDarkMode(),
+        });
         if (iteration <= finishedIteration.current) return;
 
         if (!svg) {