弄一下工作室
課程專屬講義
請輸入課程密碼
Gemini 零代碼 AI 實戰課
CH3-1
返回課程目錄
PART 3 · 讓數據「動」起來的視覺魔法
3.1

什麼是 SVG 互動圖?為什麼你需要它,而不是一張 JPG 截圖

每次開會,你是不是從 Excel 截一張圖貼進 PowerPoint?那張圖放大就糊、沒辦法互動、數字一改就要重截。SVG 圖表讓你一勞永逸——永遠清晰、可以 hover 看細節、動畫讓數據說話。

學完這節,你會
理解 SVG 和一般圖片的根本差異,以及在商業簡報中的優勢
認識辦公室最常用的四種互動圖表類型
掌握讓 AI 生成 SVG 互動圖時最關鍵的 Prompt 要素
(01)

JPG 截圖的三個天花板

你花了半小時在 Excel 裡做好一張圖,截圖、貼進簡報、傳給老闆——然後老闆說「這個數字能點開看明細嗎?」你只能回答:「那只是一張圖。」

圖片格式(JPG / PNG)在商業圖表的使用上有幾個根本限制,而這些限制在用 SVG 做互動圖後都可以解決:

❌ JPG / PNG 靜態圖片
·放大就模糊,投影時像素化
·數字改了就要重新截圖
·只能「看」,不能「點」
·細節看不清楚,無法 zoom in
·無法展示動態趨勢
✦ SVG 互動圖表
·無限縮放永遠清晰,印刷品質
·直接修改數字,圖表即時更新
·hover 顯示詳細資料、點擊展開
·任何尺寸都完美顯示
·進場動畫讓簡報更有衝擊力
實際應用場景:把你的互動圖表 HTML 檔案在簡報時直接開在瀏覽器——比 PowerPoint 的靜態圖更有說服力,老闆問細節你可以直接 hover 給他看,而不是說「這個我等一下查給你」。

(02)

SVG 是什麼?用一句話理解

SVG 是「Scalable Vector Graphics(可縮放向量圖形)」的縮寫。和 JPG 靠像素點構成不同,SVG 用數學描述圖形——所以放多大都不會糊。

更重要的是:SVG 是文字格式,可以直接放在 HTML 裡,然後用 CSS 控制樣式、用 JavaScript 加入互動。這表示你可以讓圖表的每一個元素都「活起來」:

互動示範 · 移到圖形上試試看 ↑ 可以 hover 互動
Q1–Q4 營收(示意) Q1 Q2 Q3 Q4 目標

上面的長條圖是真實的 SVG——每個長條有進場動畫,滑鼠移上去會顯示詳細資料。這就是 SVG 互動圖和靜態截圖的差距。


(03)

辦公室最常用的四種圖表

以下是最容易產生說服力、也最常出現在商業報告中的四種互動圖表類型:

🔀
流程 / 路徑圖
節點與連線組成,展示步驟、決策樹、專案流程。hover 顯示每個節點的說明。
適合:專案計劃、SOP 流程、決策說明
📊
銷售 / 轉換漏斗
由上而下的漸縮形狀,展示各階段數量與轉換率。動畫讓流失感更直觀。
適合:行銷報告、業務追蹤、電商分析
📈
折線 / 長條圖
傳統圖表的升級版:hover 顯示精確數值,可切換時間維度,支援目標線對比。
適合:業績報告、趨勢分析、預算追蹤
🗓
時間軸 / 甘特圖
橫向時間軸搭配任務條,展示專案進度。可拖曳調整、點擊看任務詳情。
適合:專案管理、產品路線圖、上市計劃

(04)

告訴 AI 做 SVG 圖的五個關鍵要素

製作 SVG 互動圖的 Prompt,除了黃金公式的四元素之外,還需要額外說明以下五個面向,AI 才能輸出品質穩定的互動圖表:

01
圖表類型與資料結構
說明要做什麼圖,以及資料的形狀——是幾個節點?幾條資料?橫軸是時間還是類別?
「製作一個有 5 個節點的流程圖,節點之間用箭頭連接,資料從左到右排列」
02
互動行為
明確說出每個互動動作要做什麼——不說的話 AI 可能做出完全靜態的圖。
「滑鼠移到節點上時顯示 tooltip 說明卡,移開時隱藏;點擊節點時高亮該節點及其連線」
03
進場動畫
說明圖表元素是否要有進場動畫、動畫的方向和時序。
「頁面載入時,長條圖從底部往上生長(height 從 0 動畫到最終值),各欄依序延遲 0.1s」
04
資料可編輯性
說明圖表的數字是寫死在程式碼裡,還是讓使用者在頁面上自行修改。
「圖表上方提供輸入框,使用者可直接修改每個階段的數值,圖表即時更新」
05
色彩與風格
SVG 的色彩系統獨立於 HTML,要另外說明使用哪些顏色、整體風格調性。
「主色使用深綠 #2e7d32,強調色橘 #e65100,背景白色,整體風格簡潔現代」
最重要的一條限制:在 Prompt 裡一定要加上「不引入任何外部圖表套件(如 D3.js、Chart.js),只使用原生 SVG 和 JavaScript」。外部套件在沒有網路的環境下無法載入,你的工具就會壞掉。