為什麼SVG能在AI時代走紅
整理版優先睇
SVG係AI時代嘅圖文解答——佢係文本，可以版本管理，仲可以直接俾AI生成同修改
作者係一位喺GitHub上維護技術博客（digoal/blog）嘅資深開發者，寫咗幾千篇深度技術文章，全部用Markdown管理。佢發現咁多年嚟，Markdown搞掂曬文字嘅結構化問題，但圖片就一直係痛點——無法版本管理、無法被搜尋引擎索引、遷移平台就失聯。
作者由Markdown嘅成功睇到趨勢：AI時代，格式唔單止係俾人睇，仲要俾機器消化同理解。佢試過Mermaid.js發現簡單圖係可以結構化，但複雜嘅架構圖、藝術感示意圖就搞唔掂。直到SVG出現，佢先發現真正嘅圖文並茂係點——SVG本質係XML文本，AI可以直接生成、修改、理解，而且永遠高清、可以版本控制。
結論就係：格式喺AI時代係一種接口，一種人機都能解析嘅協議。Markdown搞掂文字、Mermaid搞掂簡單圖、SVG搞掂任意圖——呢個進化嘅終點係所有內容都以機器可讀形式存在。
- SVG係文本格式，可以放進Git做版本管理，可以diff、merge、搜尋，圖嘅改動歷史同代碼一樣清晰，呢個係PNG永遠做唔到嘅嘢
- SVG係結構化XML，AI模型可以直接讀取、理解同生成，喺訓練數據入面圖文係一體嘅，唔會割裂，令AI學識圖形語義而唔係凈係學識拼湊圖形API
- SVG係矢量圖，無論放幾大都保持鋭利，4K顯示器、Retina屏幕、打印輸出都唔會出現鋸齒，呢個係PNG喺高分辨率下嘅硬傷
- 作者嘅技術寫作工作流：文字用Markdown、簡單流程用Mermaid、複雜架構圖同插圖交俾AI生成SVG，三者各司其職但共享同一個特性——都係文本、都可版本管理、都對AI友好
- 要活用SVG唔使自己手寫，可以叫AI幫你生成，你再調參數、改顏色、加標注，作者建議試嚇將博客嘅核心示意圖遷移成SVG，長遠回報遠超一張截圖
digoal/blog GitHub倉庫
作者維護嘅技術博客，幾千篇Markdown深度技術文章，部分已遷移SVG示意圖，可以參考佢嘅實踐方式
叫AI幫你生成SVG圖形嘅Prompt
你可以咁樣問AI：「幫我畫一張三層架構圖，數據庫層用綠色、緩存層用橙色、應用層用藍色，每層加節點示意同箭嘴指示數據流向。」AI可以直接輸出SVG代碼，你再按需要調整參數同顏色。
圖片，技術寫作嘅阿喀琉斯之踵
作者喺GitHub上維護着一個博客（digoal/blog），幾千篇深度技術文章全部用Markdown寫成。Markdown改變咗佢嘅寫作方式——標題、代碼塊、列表、加粗，純文本但結構清晰，渲染優雅。更重要嘅係：佢係機器可讀嘅。AI時代，模型要消化海量語料，一篇格式混亂嘅Word文檔，遠遠唔夠一篇結構清晰嘅Markdown咁有營養。
但圖片就一直係痛點。想畫個系統拓撲圖，打開PPT折騰半粒鐘，導出PNG，上傳，插入。第二日需求改咗，圖要改，重來一遍。三個月後文章遷移平台，圖片連結全部掛掉。圖片嘅原罪就係：佢係不可維護嘅二進制黑盒。無法版本管理、無法被搜索引擎索引、無法被AI模型理解和生成。遷移即失聯，協作即混亂。
Mermaid：第一道曙光，但有天花板
大約呢幾年，Mermaid流行咗起來，邏輯好簡單：用文字描述圖，讓工具去渲染圖。例如寫幾行代碼就即刻有流程圖，可以放進Markdown，可以版本管理，可以被Git diff，可以被AI讀懂、生成、修改。Mermaid令到圖第一次真正融入技術寫作嘅工作流。
graph TD
A[用戶請求] --> B{鑑權服務}
B -->|通過| C[業務邏輯]
B -->|拒絕| D[返回401]但Mermaid都有天花板。佢嘅圖形類型係固定嘅——流程圖、時序圖、甘特圖，表達力有限。你能用Mermaid畫一張有藝術感嘅系統架構示意圖嗎？能畫一張帶漸變色、帶註釋氣泡嘅數據分佈圖嗎？答案係：唔得。
SVG：真正嘅圖文並茂
SVG（Scalable Vector Graphics）唔係新嘢，1999年就誕生咗，但佢真正走進普通開發者同內容創作者嘅視野，就係呢兩年嘅事。為乜嘢係而家？因為AI來咗，而SVG恰好係AI最擅長生成嘅圖形格式。SVG嘅本質係XML文本，唔係二進制，唔係像素，全部都係可讀嘅文本。
<svg viewBox="0 0 200 100">
<rect x="10" y="10" width="80" height="60" fill="#5DCAA5" rx="8"/>
<text x="50" y="45" text-anchor="middle" fill="white">系統A</text>
<line x1="90" y1="40" x2="110" y2="40" stroke="#888" marker-end="url(#arrow)"/>
<rect x="110" y="10" width="80" height="60" fill="#D85A30" rx="8"/>
<text x="150" y="45" text-anchor="middle" fill="white">系統B</text>
</svg>呢個意味着乜嘢？意味着AI可以直接生成佢、直接修改佢、直接理解佢。你叫Claude幫你畫一張三層架構圖，數據庫用綠色、緩存用橙色——佢可以直接輸出SVG代碼，渲染出嚟就係你想要嘅圖。呢樣嘢喺PNG時代係不可能嘅，模型能生成圖片描述，但無法「寫出」一張可維護嘅圖。SVG打破咗呢個壁壘。
作者嘅技術寫作工作流
而家，作者嘅技術寫作工作流大概係咁樣：文字內容用Markdown、簡單流程同時序圖用Mermaid、複雜架構圖、示意圖、插圖就交俾AI生成SVG，圖片（截圖同埋真實照片）就只喺不可替代時先至用。三者各司其職，卻共享同一個特性：都係文本，都可版本管理，都對AI友好。
佢嗰幾千篇博客文章，以前插圖要麼冇，要麼係截圖放着將來某日可能失效。而家，佢開始把核心示意圖遷移成SVG——唔係因為SVG幾靚，而係因為佢終於令到圖同文字處於平等嘅地位。圖可以版本管理、可以回滾、可以對比，呢個係以前做唔到嘅嘢。
AI時代，格式即生產力
有一個問題值得深思：點解AI時代會催生對格式嘅更高要求？答案係：因為AI係消費者，亦都係生產者。過去，格式係俾人睇嘅，Word、PPT、PDF，設計嘅核心係人類嘅視覺體驗。而家，內容喺人同機器之間雙向流動，你用Markdown寫文檔，AI嚟理解同引用；AI生成SVG，你嚟渲染同調整。格式變成一種接口，一種兩端都能解析嘅協議。
能被機器理解嘅內容，才能被機器增強。能被機器增強嘅內容，才真正具備AI時代嘅競爭力。
Markdown走紅，因為佢結構化咗文字。Mermaid走紅，因為佢結構化咗簡單圖形。SVG走紅，因為佢把任意圖形都納入呢套邏輯。呢條進化曲線嘅終點係：所有內容，都以機器可讀嘅形式存在。如果你在用截圖做技術文檔嘅配圖，建議試嚇SVG——唔一定要自己手寫，讓AI幫你生成，你嚟調參數、改顏色、加標注。如果你喺維護一個Markdown技術博客，考慮把核心示意圖換成SVG，佢唔會比PNG醜，卻會比PNG長久得多。
點解SVG咁紅
—— AI年代，一場關於「圖文並茂」嘅格式革命
由一個痛點講起
我喺 GitHub 上面打理緊一個博客：digoal/blog，幾千篇深度技術文章，全部用 Markdown 寫。
Markdown 改變咗我嘅寫作方式。標題、代碼塊、列表、粗體……純文字，但係結構清晰，渲染靚。更重要嘅係：佢係機器可讀嘅。
呢樣嘢唔係小事嚟嘅。
進入 AI 年代，模型要消化海量語料，仲要輸出可以解析嘅內容。一篇格式亂晒噉嘅 Word 文件，點都唔及一篇結構清晰嘅 Markdown 咁「有營養」。所以 Markdown 就成為咗技術人嘅標配，成為咗 AI 訓練資料嘅主流格式，甚至變成一種新嘅通用語言。
但係圖片呢，一直都係我嘅痛點。
圖片，技術寫作嘅阿喀琉斯之踵
你試唔試過係噉嘅情况？
寫一篇架構設計文章，想畫個系統拓撲圖，開住 PPT 搞咗半個鐘，匯出 PNG，上傳，插入。第二日需求改咗，圖要執，嚟多一次。三個月後文章搬平台，圖片連結全部失效晒。
呢個就係圖片嘅原罪：佢係一個無法維護嘅二進制黑盒。
無法做版本管理 搜尋引擎無法索引圖片內容 AI 模型理解唔到、生成唔到 搬遷就失聯，协作就混亂
Markdown 搞掂咗文字嘅問題，但係圖片嘅問題就一直擱喺度，像根刺咁。
Mermaid：第一道曙光
大概呢幾年，Mermaid 流行咗起身。
佢嘅邏輯好簡單：用文字描述圖，工具幫你渲染。
graph TD
A[用戶請求] --> B{鑑權服務}
B -->|通過| C[業務邏輯]
B -->|拒絕| D[返回401]
效果係噉:
幾行代碼，一張流程圖。可以放進 Markdown，可以做版本管理，可以用 Git diff，可以被 AI 讀懂、生成、修改。
Mermaid 令到「圖」第一次真正融入技術寫作嘅工作流。佢崛起嘅本質，其實係同一種需求嘅延伸：令內容結構化、可編程、機器友好。
但係 Mermaid 都有天花板。流程圖、時序圖、甘特圖……佢嘅圖形類型係固定嘅，表達力始終有限。你可以用 Mermaid 畫一張有藝術感嘅系統架構示意圖嗎？可以畫一張有漸變色、有註釋氣泡嘅數據分佈圖嗎？
不行。
SVG：真正嘅圖文並茂
SVG（Scalable Vector Graphics）唔係新嘢，佢 1999 年就出現咗。但係佢真正走入普通開發者同內容創作者嘅視線，就係近呢兩年嘅事。
點解係呢個時候？
因為 AI 嚟咗，而 SVG 正好係 AI 最擅長生成嘅圖形格式。
SVG 嘅本質係 XML 文字。佢係噉嘅：
<svg viewBox="0 0 200 100">
<rect x="10" y="10" width="80" height="60" fill="#5DCAA5" rx="8"/>
<text x="50" y="45" text-anchor="middle" fill="white">系統A</text>
<line x1="90" y1="40" x2="110" y2="40" stroke="#888" marker-end="url(#arrow)"/>
<rect x="110" y="10" width="80" height="60" fill="#D85A30" rx="8"/>
<text x="150" y="45" text-anchor="middle" fill="white">系統B</text>
</svg>
效果係噉:
呢就係一張圖。冇二進制，冇像素，全部都係可讀嘅文字。
呢個意味着咩？
即係話AI可以直接生成佢、直接改佢、直接理解佢。 你同Claude講「幫我畫一張三層架構圖，數據庫用綠色，緩存用橙色」——佢可以直接輸出SVG code，render出嚟就係你想要嘅圖。
呢樣喺PNG年代係唔可能嘅。模型可以生成圖片描述，但係就寫唔出一張可以維護嘅圖。SVG打破咗呢個障礙。
SVG靠乜嘢爆紅？三個角度話你知
1. 佢係文字，所以佢可以管理
SVG檔案可以放入Git repo，可以diff，可以merge，可以全文搜。佢係code，同你嘅.py、.go檔案平起平坐。
一張系統架構圖，由版本1.0改到3.0，每次改動都有記錄，可以rollback，可以對比。PNG永遠都俾唔到你呢樣嘢。
2. 佢係結構化嘅，所以AI睇得明
大模型訓練需要圖文對齊嘅語料。Markdown入面嵌入SVG，機器同時得到文字邏輯同圖形結構，兩者係一體嘅，唔係分開嘅。
呢樣唔單止影響訓練數據質量，仲影響AI嘅輸出能力。一個喺大量SVG上訓練過嘅模型，可以理解「節點」、「邊」、「層級」，可以按你嘅語義生成圖形，而唔係净係砌幾個圖形API call。
3. 佢係向量嘅，所以佢永遠清晰
SVG無論放大幾多倍，線條永遠sharp。喺4K芒、Retina芒、打印輸出嗰時，SVG都唔會模糊。而PNG喺高解像度設備上嘅鋸齒感，係好多技術文件嘅長期問題。
我嘅工作流程變咗
而家，我嘅技術寫作工作流程大概係噉嘅：
文字內容：Markdown 簡單流程/時序：Mermaid 複雜架構圖/示意圖/插圖：SVG（叫AI生成，我再執） 圖片（截圖/相片）：淨係喺唔可以取代嘅時候先用
三者各展所長，但係共享同一個特性：都係文字，都可以version control，都對AI友好。
我嗰幾千篇blog文，之前插圖要不冇，要不就係截圖放住，第時隨時可能失效。而家我開始將核心示意圖搬去SVG——唔係因為SVG幾靚，而係因為佢終於令圖同文字處於平等地位。
AI年代，格式即係生產力
有一個問題值得深思：點解AI年代會催生對格式嘅更高要求？
答案係：因為AI既係消費者，亦係生產者。
以前，格式係俾人睇嘅。Word、PPT、PDF，設計嘅核心係人類嘅視覺體驗。
而家，內容喺人同機器之間雙向流動。你用Markdown寫文件，AI嚟理解同引用；AI生成SVG，你嚟render同調整。格式變成一種interface，一種兩邊都解析到嘅protocol。
俾機器理解到嘅內容，先至可以俾機器增強。俾機器增強到嘅內容，先真正具備AI年代嘅競爭力。
Markdown爆紅，因為佢結構化咗文字。Mermaid爆紅 because it 結構化咗簡單圖形。SVG爆紅 because it 將任意圖形都納入呢套邏輯。
呢條係一條清晰嘅進化曲線，終點係：所有內容，都以機器可讀嘅形式存在。
寫喺最後
如果你仲用截圖嚟做技術文檔嘅配圖，建議試下SVG。唔使一定要自己手寫——叫AI幫你生成，你再嚟調參數、改顏色、加標註就得。
如果你喺度維護一個Markdown技術博客，考慮下將核心示意圖換成SVG。佢唔會衰過PNG，但係會比PNG長命好多。
如果你係AI領域嘅從業員，留意下你嘅訓練數據入面，圖文對齊嘅質量點樣。SVG可能係一個被低估嘅數據資產。
圖文並茂，從來唔係淨係排版問題，係內容喺AI時代存活嘅方式。
digoal嘅博客：github.com/digoal/blog ——幾千篇Markdown深度技術文章，持續更新中。
為什麼SVG能走紅
—— AI時代，一場關於"圖文並茂"的格式革命
一切從一個痛點說起
我在 GitHub 上維護着一個博客：digoal/blog，幾千篇深度技術文章，全部用 Markdown 寫成。
Markdown 改變了我的寫作方式。標題、代碼塊、列表、加粗……純文本，卻結構清晰，渲染優雅。更重要的是：它是機器可讀的。
這不是小事。
AI時代，模型要消化海量語料，要輸出可解析的內容。一篇格式混亂的Word文檔，遠不如一篇結構清晰的Markdown來得"營養"。於是乎，Markdown成了技術人的標配，成了AI訓練數據的主流格式，甚至成了一種新的通用語言。
但圖片，一直是我的痛點。
圖片，技術寫作的阿喀琉斯之踵
你有沒有遇到過這種情況？
寫一篇架構設計文章，想畫個系統拓撲圖，打開PPT折騰半小時，導出PNG，上傳，插入。第二天需求改了，圖要改，重來一遍。三個月後文章遷移平台，圖片連結全掛了。
這就是圖片的原罪：它是不可維護的二進制黑盒。
無法版本管理 無法被搜索引擎索引內容 無法被AI模型理解和生成 遷移即失聯，協作即混亂
Markdown解決了文字的問題，但圖片的問題一直懸在那裏，像一根刺。
Mermaid：第一道曙光
大約在這幾年，Mermaid流行了起來。
它的邏輯很簡單：用文字描述圖，讓工具去渲染圖。
graph TD
A[用戶請求] --> B{鑑權服務}
B -->|通過| C[業務邏輯]
B -->|拒絕| D[返回401]
效果如下:
幾行代碼，一張流程圖。可以放進Markdown，可以版本管理，可以被Git diff，可以被AI讀懂、生成、修改。
Mermaid讓"圖"第一次真正融入了技術寫作的工作流。它的崛起，本質上是同一種需求的延伸：讓內容結構化、可編程、機器友好。
但Mermaid也有天花板。流程圖、時序圖、甘特圖……它的圖形類型是固定的，表達力是有限的。你能用Mermaid畫一張系統架構的藝術感示意圖嗎？能畫一張帶漸變色、帶註釋氣泡的數據分佈圖嗎？
不行。
SVG：真正的圖文並茂
SVG（Scalable Vector Graphics）不是新東西，它1999年就誕生了。但它真正走進普通開發者和內容創作者的視野，是最近這兩年的事。
為什麼是現在？
因為AI來了，而SVG恰好是AI最擅長生成的圖形格式。
SVG的本質是XML文本。它長這樣：
<svg viewBox="0 0 200 100">
<rect x="10" y="10" width="80" height="60" fill="#5DCAA5" rx="8"/>
<text x="50" y="45" text-anchor="middle" fill="white">系統A</text>
<line x1="90" y1="40" x2="110" y2="40" stroke="#888" marker-end="url(#arrow)"/>
<rect x="110" y="10" width="80" height="60" fill="#D85A30" rx="8"/>
<text x="150" y="45" text-anchor="middle" fill="white">系統B</text>
</svg>
效果如下:
這就是一張圖。沒有二進制，沒有像素，全是可讀的文本。
這意味着什麼？
意味着AI可以直接生成它、直接修改它、直接理解它。 你告訴Claude"幫我畫一張三層架構圖，數據庫用綠色，緩存用橙色"——它可以直接輸出SVG代碼，渲染出來就是你想要的圖。
這在PNG時代是不可能的。模型能生成圖片描述，但無法"寫出"一張可維護的圖。SVG打破了這個壁壘。
SVG憑什麼走紅？三個維度說清楚
1. 它是文本，所以它可以被管理
SVG文件可以放進Git倉庫，可以被diff，可以被merge，可以被全文搜索。它就是代碼，和你的.py、.go文件平起平坐。
一張系統架構圖，從版本1.0改到版本3.0，每一次改動都有記錄，可以回滾，可以對比。這是PNG永遠給不了你的。
2. 它是結構化的，所以AI能讀懂
大模型訓練需要圖文對齊的語料。Markdown裏嵌入SVG，機器同時拿到了文字邏輯和圖形結構，兩者是一體的，而不是割裂的。
這不僅影響訓練數據質量，也影響AI的輸出能力。一個在大量SVG上訓練過的模型，可以理解"節點"、"邊"、"層級"，可以按你的語義生成圖形，而不只是拼湊幾個圖形API調用。
3. 它是矢量的，所以它永遠清晰
SVG無論放大多少倍，線條永遠鋭利。在4K顯示器上、在Retina屏上、在打印輸出時，SVG都不會變模糊。而PNG在高分辨率設備上的鋸齒感，是很多技術文檔的頑疾。
我的工作流變了
現在，我的技術寫作工作流大概是這樣的：
文字內容：Markdown 簡單流程/時序：Mermaid 複雜架構圖/示意圖/插圖：SVG（讓AI生成，我調整） 圖片（截圖/照片）：只在不可替代時使用
三者各司其職，卻共享同一個特性：都是文本，都可版本管理，都對AI友好。
我的那幾千篇博客文章，以前插圖要麼沒有，要麼是截圖放着將來某天可能失效。現在，我開始把核心示意圖遷移成SVG——不是因為SVG多漂亮，而是因為它終於讓圖和文字處於平等的地位。
AI時代，格式即生產力
有一個問題值得深思：為什麼AI時代會催生對格式的更高要求？
答案是：因為AI既是消費者，也是生產者。
過去，格式是給人看的。Word、PPT、PDF，設計的核心是人類的視覺體驗。
現在，內容在人和機器之間雙向流動。你用Markdown寫文檔，AI來理解和引用；AI生成SVG，你來渲染和調整。格式變成了一種接口，一種兩端都能解析的協議。
能被機器理解的內容，才能被機器增強。能被機器增強的內容，才真正具備AI時代的競爭力。
Markdown走紅，因為它結構化了文字。Mermaid走紅，因為它結構化了簡單圖形。SVG走紅，因為它把任意圖形也納入了這套邏輯。
這是一條清晰的進化曲線，終點是：所有內容，都以機器可讀的形式存在。
寫在最後
如果你還在用截圖做技術文檔的配圖，建議試試SVG。不一定要自己手寫——讓AI幫你生成，你來調參數、改顏色、加標註。
如果你在維護一個Markdown技術博客，考慮把核心示意圖換成SVG。它不會比PNG醜，卻會比PNG長久得多。
如果你是AI領域的從業者，關注一下你的訓練數據裏，圖文對齊的質量怎麼樣。SVG可能是一個被低估的數據資產。
圖文並茂，從來不只是排版問題。它是內容在AI時代存活的方式。
digoal的博客：github.com/digoal/blog ——幾千篇Markdown深度技術文章，持續更新中。