docs: replace PNG image with SVG format

hrntknr · hrntknr · commit 91abcf2c9f4c · 2025-08-18T10:26:39.000Z
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # MCP Auth Proxy
 
-![Secure your MCP server with OAuth 2.1 — in a minute](./mcp-auth-proxy.png)
+![Secure your MCP server with OAuth 2.1 — in a minute](./mcp-auth-proxy.svg)
 
 If this project saves you time, please give it a star — it really helps visibility.
 
diff --git a/mcp-auth-proxy.png b/mcp-auth-proxy.png
diff --git a/mcp-auth-proxy.svg b/mcp-auth-proxy.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="640" viewBox="0 0 1280 640">
+  <defs>
+    <!-- Subtle diagonal gradient (top-left blue → bottom-right purple) -->
+    <linearGradient id="bgGrad" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#0B1220"/>
+      <stop offset="55%" stop-color="#121826"/>
+      <stop offset="100%" stop-color="#2B1E3A"/>
+    </linearGradient>
+    <style>
+      .title { fill: #F3F4F6; font-family: Inter, 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-weight: 800; }
+      .title-line1 { font-size: 128px; letter-spacing: 0.5px; }
+      .title-line2 { font-size: 128px; letter-spacing: 0.5px; }
+      .tagline { fill: #E5E7EB; font-family: Inter, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-weight: 600; font-size: 40px; }
+      .features { fill: #E5E7EB; font-family: Inter, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-weight: 500; font-size: 32px; }
+      .icon { fill: none; stroke: #F3F4F6; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
+    </style>
+  </defs>
+
+  <!-- Background -->
+  <rect x="0" y="0" width="1280" height="640" fill="url(#bgGrad)"/>
+
+  <!-- Increased padding: left=140, top start around 140 -->
+  <text class="title title-line1" x="140" y="210">MCP Auth</text>
+
+  <!-- Shield/keyhole icon, slightly smaller and with generous right padding -->
+  <g class="icon" transform="translate(1040,125) scale(0.9)">
+    <path d="M 80 10 L 140 34 L 140 94 C 140 132 113 170 80 182 C 47 170 20 132 20 94 L 20 34 Z"/>
+    <circle cx="80" cy="66" r="18"/>
+    <path d="M 80 84 L 80 112"/>
+  </g>
+
+  <text class="title title-line2" x="140" y="360">Proxy</text>
+
+  <!-- Tagline (two lines) with more spacing -->
+  <text class="tagline" x="140" y="470">Secure your MCP server with</text>
+  <text class="tagline" x="140" y="520">OAuth 2.1 — in a minute</text>
+
+  <!-- Feature bullets -->
+  <text class="features" x="140" y="572">Google/GitHub/Password login · Auto Certificate · Single binary</text>
+</svg>
