Replace og:image PNG with SVG (#575)

bvaughn · web-flow · commit fb488afba092 · 2026-01-03T12:21:13.000-05:00
diff --git a/index.html b/index.html
@@ -27,7 +27,7 @@
     />
     <meta
       property="og:image"
-      content="https://react-resizable-panels.vercel.app/og.png"
+      content="https://react-resizable-panels.vercel.app/og.svg"
     />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
diff --git a/public/og.png b/public/og.png
diff --git a/public/og.svg b/public/og.svg
@@ -1,41 +1 @@
-<svg viewBox="0 0 1200 630" width="600" height="315" xmlns="http://www.w3.org/2000/svg">
-  <rect fill="oklch(62.7% 0.265 303.9)" width="1200" height="630"></rect>
-  <g transform="translate(80,135)">
-    <g transform="scale(18)">
-      <circle cx="10" cy="10" r="3" fill="#000"></circle>
-      <g stroke="#000" stroke-width="2" fill="none">
-        <ellipse
-          cx="10"
-          cy="10"
-          rx="11"
-          ry="5"
-          transform="rotate(45, 10, 10)"
-        ></ellipse>
-        <ellipse
-          cx="10"
-          cy="10"
-          rx="11"
-          ry="5"
-          transform="rotate(-45, 10, 10)"
-        ></ellipse>
-      </g>
-    </g>
-  </g>
-  <g
-    fill="#fff"
-    font-size="140"
-    font-family="system-ui"
-    font-weight="bold"
-    transform="translate(0, 157.5)"
-  >
-    <text alignment-baseline="middle" dx="525" dy="0em">
-      react
-    </text>
-    <text alignment-baseline="middle" dx="525" dy="1.1em">
-      resizable
-    </text>
-    <text alignment-baseline="middle" dx="525" dy="2.2em">
-      panels
-    </text>
-  </g>
-</svg>
+<svg viewBox="0 0 1200 630" width="600" height="315" xmlns="http://www.w3.org/2000/svg"><linearGradient id="linearGradient"><stop offset="0%" stop-color="oklch(62.7% 0.265 303.9)"></stop><stop offset="100%" stop-color="oklch(49.6% 0.265 301.924)"></stop></linearGradient><rect fill="url('#linearGradient')" width="1200" height="630"></rect><g transform="translate(80,135)"><g transform="scale(18)"><circle cx="10" cy="10" r="3" fill="#000"></circle><g stroke="#000" stroke-width="2" fill="none"><ellipse cx="10" cy="10" rx="11" ry="5" transform="rotate(45, 10, 10)"></ellipse><ellipse cx="10" cy="10" rx="11" ry="5" transform="rotate(-45, 10, 10)"></ellipse></g></g></g><g fill="#fff" font-size="140" font-family="system-ui" font-weight="bold" transform="translate(0, 157.5)"><text alignment-baseline="middle" dx="525" dy="0em">react</text><text alignment-baseline="middle" dx="525" dy="1.1em">resizable</text><text alignment-baseline="middle" dx="525" dy="2.2em">panels</text></g></svg>
