chore(meta): add meta-meta compatibility chart svg local to this site (#1694)

drmingdrmer · web-flow · commit f15cfa3f0c50 · 2025-03-14T10:29:13.000+08:00
diff --git a/docs/en/guides/10-deploy/02-upgrade/10-compatibility.md b/docs/en/guides/10-deploy/02-upgrade/10-compatibility.md
@@ -145,7 +145,7 @@ For example, Current Version is 1.2.306 upgrade to 1.2.312:
 | [1.2.655, +∞)       | [1.2.288, +∞)            |
 
 
-![Image](https://github.com/user-attachments/assets/f63d80ee-f646-4d6a-9bec-be607e47088d)
+![](@site/static/img/deploy/compat-meta-meta-1-2-655.svg)
 
 - `1.2.53` Incompatible, rolling upgrade is allowed without snapshot transmitting.
   Snapshot format changed thus during rolling upgrading,
diff --git a/static/img/deploy/compat-meta-meta-1-2-655.svg b/static/img/deploy/compat-meta-meta-1-2-655.svg
@@ -0,0 +1,117 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
+    <style>
+        text {
+            font-family: Arial, sans-serif;
+            font-size: 12px;
+        }
+        .title {
+            font-size: 18px;
+            font-weight: bold;
+        }
+        .axis-label {
+            font-size: 14px;
+            font-weight: bold;
+        }
+        .version-label {
+            font-size: 10px;
+        }
+        .compat-region {
+            fill: #4CAF50;
+            fill-opacity: 0.5;
+        }
+        .grid-line {
+            stroke: #e0e0e0;
+            stroke-width: 1;
+        }
+        .axis-line {
+            stroke: #000000;
+            stroke-width: 2;
+        }
+    </style>
+
+    <!-- Title -->
+    <text x="400" y="30" text-anchor="middle" class="title">Databend-Meta Version Compatibility Chart</text>
+
+    <!-- Axis labels -->
+    <text x="400" y="580" text-anchor="middle" class="axis-label">Meta Version</text>
+    <text x="30" y="300" text-anchor="middle" transform="rotate(-90,30,300)" class="axis-label">Compatible With</text>
+
+    <!-- Coordinate system -->
+    <g transform="translate(100,50)">
+        <!-- Axes -->
+        <line x1="0" y1="0" x2="650" y2="0" class="axis-line" />
+        <line x1="0" y1="0" x2="0" y2="480" class="axis-line" />
+        <line x1="0" y1="480" x2="650" y2="480" class="axis-line" />
+        <line x1="650" y1="0" x2="650" y2="480" class="axis-line" />
+
+        <!-- Version markers on x-axis -->
+        <!-- We'll use these version points: 0.9.41, 1.2.212, 1.2.288, 1.2.479, 1.2.655, 1.3.0 (representing +∞) -->
+        <!-- Map to positions: 0, 150, 200, 300, 450, 600 -->
+        
+        <line x1="0" y1="480" x2="0" y2="490" class="axis-line" />
+        <text x="0" y="505" text-anchor="middle" class="version-label">0.9.41</text>
+        
+        <line x1="150" y1="480" x2="150" y2="490" class="axis-line" />
+        <text x="150" y="505" text-anchor="middle" class="version-label">1.2.212</text>
+        
+        <line x1="200" y1="480" x2="200" y2="490" class="axis-line" />
+        <text x="200" y="505" text-anchor="middle" class="version-label">1.2.288</text>
+        
+        <line x1="300" y1="480" x2="300" y2="490" class="axis-line" />
+        <text x="300" y="505" text-anchor="middle" class="version-label">1.2.479</text>
+        
+        <line x1="450" y1="480" x2="450" y2="490" class="axis-line" />
+        <text x="450" y="505" text-anchor="middle" class="version-label">1.2.655</text>
+        
+        <line x1="600" y1="480" x2="600" y2="490" class="axis-line" />
+        <text x="600" y="505" text-anchor="middle" class="version-label">+∞</text>
+
+        <!-- Version markers on y-axis -->
+        <line x1="0" y1="0" x2="-10" y2="0" class="axis-line" />
+        <text x="-15" y="5" text-anchor="end" class="version-label">+∞</text>
+        
+        <line x1="0" y1="30" x2="-10" y2="30" class="axis-line" />
+        <text x="-15" y="35" text-anchor="end" class="version-label">1.2.655</text>
+        
+        <line x1="0" y1="180" x2="-10" y2="180" class="axis-line" />
+        <text x="-15" y="185" text-anchor="end" class="version-label">1.2.479</text>
+        
+        <line x1="0" y1="280" x2="-10" y2="280" class="axis-line" />
+        <text x="-15" y="285" text-anchor="end" class="version-label">1.2.288</text>
+        
+        <line x1="0" y1="330" x2="-10" y2="330" class="axis-line" />
+        <text x="-15" y="335" text-anchor="end" class="version-label">1.2.212</text>
+        
+        <line x1="0" y1="480" x2="-10" y2="480" class="axis-line" />
+        <text x="-15" y="485" text-anchor="end" class="version-label">0.9.41</text>
+
+        <!-- Compatibility regions (green areas) -->
+        <!-- Region 1: [0.9.41, 1.2.212) compatible with [0.9.41, 1.2.212) -->
+        <polygon points="0,330 150,330 150,480 0,480" class="compat-region" />
+        
+        <!-- Region 2: [1.2.212, 1.2.479) compatible with [0.9.41, 1.2.479) -->
+        <polygon points="150,180 300,180 300,480 150,480" class="compat-region" />
+        
+        <!-- Region 3: [1.2.479, 1.2.655) compatible with [1.2.288, 1.2.655) -->
+        <polygon points="300,30 450,30 450,280 300,280" class="compat-region" />
+        
+        <!-- Region 4: [1.2.655, +∞) compatible with [1.2.288, +∞) -->
+        <polygon points="450,0 600,0 600,280 450,280" class="compat-region" />
+
+        <!-- Grid lines -->
+        <line x1="0" y1="30" x2="650" y2="30" class="grid-line" />
+        <line x1="0" y1="180" x2="650" y2="180" class="grid-line" />
+        <line x1="0" y1="280" x2="650" y2="280" class="grid-line" />
+        <line x1="0" y1="330" x2="650" y2="330" class="grid-line" />
+        
+        <line x1="150" y1="0" x2="150" y2="480" class="grid-line" />
+        <line x1="200" y1="0" x2="200" y2="480" class="grid-line" />
+        <line x1="300" y1="0" x2="300" y2="480" class="grid-line" />
+        <line x1="450" y1="0" x2="450" y2="480" class="grid-line" />
+        
+        <!-- Legend -->
+        <rect x="500" y="50" width="20" height="20" class="compat-region" />
+        <text x="530" y="65" class="version-label">Compatible Versions</text>
+    </g>
+</svg> 
