diff --git a/frontend/public/component-svgs/ssd1306.svg b/frontend/public/component-svgs/ssd1306.svg
new file mode 100644
index 00000000..1ced6b70
--- /dev/null
+++ b/frontend/public/component-svgs/ssd1306.svg
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="128" height="64" xmlns="http://www.w3.org/2000/svg">
+      <rect stroke="#BE9B72" fill="#025CAF" x=".5" y=".5" width="148" height="114" rx="13" />
+
+      <g transform="translate(6 6)" fill="#59340A" stroke="#BE9B72" stroke-width="0.6px">
+        <circle cx="130" cy="6" r="5.5" />
+        <circle cx="6" cy="6" r="5.5" />
+        <circle cx="130" cy="96" r="5.5" />
+        <circle cx="6" cy="96" r="5.5" />
+      </g>
+
+      <!-- 128 x 64 screen -->
+      <rect x="11.4" y="26" fill="#1A1A1A" width="128" height="64" />
+
+      <!-- All texts -->
+      <text
+        fill="#FFF"
+        text-anchor="middle"
+        font-size="5"
+        font-weight="300"
+        font-family="monospace"
+      >
+        <tspan x="37" y="8">Data</tspan>
+        <tspan x="56" y="8">SA0</tspan>
+        <tspan x="78" y="8">CS</tspan>
+        <tspan x="97" y="8">Vin</tspan>
+        <tspan x="41" y="23">C1k</tspan>
+        <tspan x="53" y="23">DC</tspan>
+        <tspan x="64" y="23">Rst</tspan>
+        <tspan x="80" y="23">3v3</tspan>
+        <tspan x="99" y="23">Gnd</tspan>
+      </text>
+
+      <!-- Star -->
+      <path
+        fill="#FFF"
+        d="M115.5 10.06l-1.59 2.974-3.453.464 2.495 2.245-.6 3.229 3.148-1.528 3.148 1.528-.6-3.23 2.495-2.244-3.453-.464-1.59-2.974z"
+        stroke="#FFF"
+      />
+
+      <!-- PINS -->
+      <g transform="translate(33 9)" fill="#9D9D9A" stroke-width="0.4">
+        <circle stroke="#262626" cx="70.5" cy="3.5" r="3.5" />
+        <circle stroke="#007ADB" cx="60.5" cy="3.5" r="3.5" />
+        <circle stroke="#9D5B96" cx="50.5" cy="3.5" r="3.5" />
+        <circle stroke="#009E9B" cx="41.5" cy="3.5" r="3.5" />
+        <circle stroke="#E8D977" cx="31.5" cy="3.5" r="3.5" />
+        <circle stroke="#C08540" cx="21.5" cy="3.5" r="3.5" />
+        <circle stroke="#B4AEAB" cx="12.5" cy="3.5" r="3.5" />
+        <circle stroke="#E7DBDB" cx="3.5" cy="3.5" r="3.5" />
+      </g>
+    </svg>
\ No newline at end of file
diff --git a/scripts/generate-component-svgs.cjs b/scripts/generate-component-svgs.cjs
index b84c886c..15ae56ff 100644
--- a/scripts/generate-component-svgs.cjs
+++ b/scripts/generate-component-svgs.cjs
@@ -118,6 +118,26 @@ if (typeof globalThis.customElements === 'undefined') {
   globalThis.customElements = { define: () => {} };
 }
 
+// Stub `ImageData` — used by ssd1306-element's constructor to seed the
+// off-screen canvas. We never invoke `putImageData` (the script only calls
+// renderSVG()), so a minimal shape that doesn't throw is enough.
+if (typeof globalThis.ImageData === 'undefined') {
+  globalThis.ImageData = class ImageData {
+    constructor(widthOrData, height, settings) {
+      if (typeof widthOrData === 'number') {
+        this.width = widthOrData;
+        this.height = height;
+        this.data = new Uint8ClampedArray(widthOrData * height * 4);
+      } else {
+        this.data = widthOrData;
+        this.width = height;
+        this.height = settings;
+      }
+      this.colorSpace = 'srgb';
+    }
+  };
+}
+
 // ── Elements to extract ───────────────────────────────────────────────────────
 // [ tagName, elementFile, defaultProps, useRenderSVG ]
 const ELEMENTS = [
@@ -133,7 +153,8 @@ const ELEMENTS = [
   ['wokwi-dht22',                  'dht22-element',                  {},                                                                         false ],
   ['wokwi-hc-sr04',                'hc-sr04-element',                {},                                                                         false ],
   ['wokwi-mpu6050',                'mpu6050-element',                {},                                                                         false ],
-  ['velxio-bmp280',                 'bmp280-element',                 {},                                                                         false ],
+  // velxio-bmp280 is a velxio-native component — its SVG ships hand-authored
+  // at frontend/public/component-svgs/bmp280.svg, so no extraction is needed.
   ['wokwi-lcd2004',                'lcd2004-element',                {},                                                                         false ],
   ['wokwi-ssd1306',                'ssd1306-element',                { width: 128, height: 64 },                                                 false ],
   ['wokwi-ili9341',                'ili9341-element',                {},                                                                         false ],