SVG 設計

SVG 設計 是做什麼的？

葉節點技能（Leaf skill），屬於設計類別；可透過其領域或名稱呼叫。

從圖形在品牌或介面中的角色開始。為該場景選擇其構圖、輪廓、比例、字型和色彩，並在既有視覺方向存在時予以保留。然後將設計表達為乾淨、簡潔的 SVG 標記。每個元素和屬性都應有其存在的價值。

此技能負責標誌、圖示集、品牌資產以及裝飾性或表現性的網頁圖形。依用途選擇：登陸頁面的標誌和裝飾性主視覺藝術品屬於此處；解釋產品運作方式的圖表則屬於 editorial-svg-diagrams。頁面構成和介面佈局屬於 frontend-design。

一個小標誌的決策

說明性簡報： 製作一個在網站頁首和緊湊的應用程式圖示中仍可辨識的山形標誌。從外部輪廓和一個獨特的山脊鏤空開始；省略那些縮小後會消失的細雪線。在加入顏色或細節之前，先在兩種實際尺寸下檢查標誌，並針對每個預期的使用表面進行檢查。如果這些用途需要不同的細節層級，請製作一個明確的小尺寸變體，而不是縮小一個無法辨識的標記。

在進行大量構圖或視覺審查之前，請評估模型的視覺能力以及對渲染後使用尺寸和表面的存取能力。如果 Puppeteer 可用，請使用其當前的階段/模型路由，以獲得更適合的作者或獨立審查者，傳遞簡報、既定方向和目標尺寸。重複使用現有的委派擁有者；一個小的、合適的編輯可以直接進行。設計師自己的檢查並非獨立驗收。缺少能力或渲染存取權限會使該檢查保持開放；有效的 SVG 本身並不能建立一個好的設計。

主題路由

任務	載入參考文件
弧形旗幟組合、常見路徑形狀	references/path-patterns.md
標誌設計、字體排版、留白	references/logo-techniques.md
圖示設計、網格系統、像素對齊	references/icon-design.md
漸層、遮罩、裁剪、濾鏡、變形（設計決策）	references/advanced-techniques.md
動畫（CSS 關鍵影格、交錯、GPU、緩動、SVG 特有）	references/animation.md
最佳化、精靈圖、SVGO 設定	references/optimization.md
可及性、瀏覽器陷阱	references/accessibility-and-pitfalls.md
編輯工作流程、布林運算、合併 SVG	references/editing-workflow.md

SVG 骨架

對於描邊的 UI 圖示，從此結構開始：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <!-- 內容 -->
</svg>

調整 viewBox 以符合設計畫布。省略 width/height 屬性，讓 SVG 隨其容器縮放（僅在需要固定大小時才加入它們）。

對於標誌和網頁藝術品，根據構圖選擇畫布、填色和描邊，而不是繼承圖示的預設值。

畫布尺寸慣例

尺寸	使用案例	備註
0 0 16 16	微型圖示、網站圖示（favicon）	Heroicons micro, GitHub Octicons
0 0 20 20	小型 UI 圖示、表單元素	Heroicons mini
0 0 24 24	標準圖示（最常見）	Lucide, Heroicons outline, Material
0 0 32 32	中型圖示、導航	Phosphor 內部使用 256x256
0 0 48 48	大型顯示圖示	應用程式圖示、插圖
自訂	標誌、插圖	符合自然的寬高比

對於標準 UI 圖示，除非周圍的圖示系統使用其他網格，否則預設為 24x24。標誌和網頁圖形使用適合其構圖的畫布。

形狀 vs 路徑決策

使用形狀原語時機...	使用 <path> 時機...
形狀是基本幾何形式	形狀具有曲線、複雜輪廓
可讀性很重要（圓形看起來應該像 <circle>）	你需要最小化元素數量
你需要動畫化個別屬性（r, cx, cy）	將多個形狀合併為一個元素
形狀將被程式化地修改	從設計工具匯出（路徑是通用的）

樣式預設值

將這些設定在根 <svg> 元素上，以避免在子元素上重複：

屬性	圖示預設值	標誌預設值	原因
fill	none	視情況而定	圖示通常是描邊的，標誌是填色的
stroke	currentColor	none 或 currentColor	繼承父層的文字顏色
stroke-width	2（在 24x24 上）	視情況而定	在圖示間保持一致的粗細
stroke-linecap	round	round 或 butt	圓角端點在小尺寸下看起來更乾淨
stroke-linejoin	round	round 或 miter	防止連接處出現尖銳的突起

currentColor 是你的好朋友。 它讓 SVG 繼承父元素當前的任何顏色，使圖示無需額外 CSS 即可設定主題。

相對於 ViewBox 的描邊寬度

stroke-width 是 viewBox 單位，而非像素。始終相對於你的畫布尺寸進行設定：

viewBox	典型的 stroke-width	視覺結果
16x16	1.5	~9.4% 的畫布
24x24	2	~8.3% 的畫布
32x32	2-2.5	~6.3-7.8% 的畫布
48x48	3	~6.3% 的畫布
256x256	16	~6.3% 的畫布

何時將形狀轉換為路徑

在以下情況轉換：

• 將多個形狀合併為單一複合路徑（布林運算）
• 你需要該形狀作為更大路徑構圖的一部分
• 分發到僅支援 <path> 的環境
• 為最小化 DOM 元素進行最佳化

在以下情況保持為形狀：

• 程式碼可讀性很重要（<circle> 是自我說明的）
• 你需要動畫化特定屬性（在圓形上動畫 r 比動畫路徑資料更乾淨）
• SVG 將被程式化地修改

圓角矩形轉路徑範本

這裡的弧線參數很容易推導錯誤。請以此作為參考：

<!-- <rect x="2" y="2" width="20" height="20" rx="3" /> 變成： -->
<path d="M 5 2 h 14 a 3 3 0 0 1 3 3 v 14 a 3 3 0 0 1 -3 3 h -14 a 3 3 0 0 1 -3 -3 v -14 a 3 3 0 0 1 3 -3 Z" />

fill-rule: evenodd vs nonzero

當你有帶孔的複合形狀時，使用 evenodd。它更簡單，因為你不需要擔心路徑方向：

<!-- 使用 evenodd 的甜甜圈（方向不重要） -->
<path fill-rule="evenodd" d="
  M 12 2 A 10 10 0 1 1 12 22 A 10 10 0 1 1 12 2 Z
  M 12 7 A 5 5 0 1 1 12 17 A 5 5 0 1 1 12 7 Z
" fill="black" />

使用 nonzero（預設）時，內圓必須以相反方向環繞才能產生孔洞。

標誌設計流程

在建立標誌（非圖示）時，請遵循此流程：

0. 僅解決簡報中的重大落差。 重複使用提供的品牌方向、名稱、受眾、使用案例和參考資料。如果一個缺失的選擇會從根本上改變設計，請使用當前主機支援的互動方式提出一個簡短的問題。對於次要選擇，使用合理的可逆預設值；切勿假設特定的提問工具或要求進行情緒板訪談。

1. 探索多種隱喻，而非單一隱喻的多種佈局。 概念的多樣性比佈局變化更重要。請遵循 references/logo-techniques.md 中的完整構思流程，其中涵蓋了領域特定的腦力激盪、類別多樣性要求以及避免陳腔濫調。

2. 保證結構多樣性。 每個標誌組合必須涵蓋多種 類別 的方法，而不僅僅是同一風格內的多種隱喻。在呈現 5 個以上選項時，至少包括每欄中的一個：字體排版/文字商標方法、象徵性圖示、抽象幾何標記，以及字母形式結合隱喻的混合體。請參閱 references/logo-techniques.md 中的類別多樣性表格。

3. 透過可用的主機進行預覽。 當漸進式比較有幫助時，使用此技能的 assets/preview.html 以及 references/editing-workflow.md 中的結構。透過當前主機支援的檢視器顯示或檢查預覽畫面；不要假設瀏覽器、shell 指令或前景視窗是可用的。如果沒有檢視器能渲染它，請說明此限制，並在支援的情況下提供 SVG 檔案和渲染後的預覽。切勿聲稱未經觀察的預覽已通過視覺驗證。

4. 對於彩色標誌，始終建立一個 -dark.svg 變體。 在白底上看起來很棒的海軍藍邊緣（#1E3A5F）在深色背景上會消失。深色變體需要較淺的邊緣（#4B8BBE）、較淺的環（#3B6B8A）和米白色的中心（#E2E8F0）。

5. 在開始繪製前規劃垂直預算。 在 32x32 的畫布上有 3 個堆疊元素時，你大約有 30 個可用單位。首先草擬垂直分佈（例如，盒子=12，間隙=2，圖層=5，間隙=2，圖層=5），以避免在 viewBox 邊緣被裁剪。

反模式

不要這樣做	應該這樣做
不使用 viewBox 就硬編碼 width="24" height="24"	始終使用 viewBox；僅在需要時才加入 width/height
在 <g> 群組上設定 fill="none"	在個別元素或根 <svg> 上設定 fill
在 SVG 內部使用 px 單位	SVG 座標是無單位的；它們對應到 viewBox
包含編輯器元資料（<sodipodi:*>、<inkscape:*>）	清除所有編輯器殘留物
在分發的 SVG 中使用 <text> 作為標誌文字商標	將文字轉換為路徑以確保可攜性
將變形嵌套三層深	將變形扁平化為路徑座標
使用 xlink:href	使用 href（xlink 已棄用）
在獨立 SVG 檔案中忘記 xmlns	始終包含 xmlns="http://www.w3.org/2000/svg"
圖示的小數精度超過 2-3 位	圖示四捨五入到 2 位小數，複雜藝術品最多 3 位

交叉參考

• 周圍的網站或介面設計不是此技能的工作。將其交還給要求圖形的人，附帶圖形的角色和尺寸限制，同時遵循已建立的排版、色彩和視覺層次，或專案現有的設計系統。
• 如果 editorial-svg-diagrams 可用，請將其用於解釋概念、關係、流程或系統的圖形。否則，將此技能的輸出專注於品牌和介面圖形，並在請求的結果依賴於圖表能力時，說明該能力不可用。