SVG 以矢量無損縮放、XML 輕量傳輸、可被 CSS/JS 動態控制（顏色、描邊、動畫）等優勢成為 Web 圖標主流。本教程以「聖誕襪」為例，演示 AI 中基於 8 px 網格的像素級精確繪製、路徑擴展合併、SVG 導出、IcoMoon 在線生成字體圖標的完整鏈路。

一、認識 SVG 優勢

• 多屏適配無失真；XML 文本傳輸極輕量；可被 CSS/JS 選中控制顏色、描邊、透明度、濾鏡、動畫；可作 Logo、標語、文字等複雜圖形。

二、繪製前規劃

1. 畫板尺寸：800×800 px。
2. 基礎單位：8 px。描邊 16 px，內部線條 8 px，網格間距 8 px。
3. 開啟網格對齊：視圖 › 顯示網格/對齊網格；偏好設定 › 參考線與網格 › 網格線間隔 8 px。

三、核心繪製技法

1. 輪廓：鋼筆/基本形狀描邊 16 pt 繪製襪子外輪廓；不平滑處用「平滑工具」修整。

2. 紋飾（雪花）：拒用圖案填充，全路徑繪製。矩形旋轉 -45° 組合 → 編組 → 複製鏡像 → 再編組 → 頂部加矩形 45° → 再編組 → 旋轉工具 Alt 設中心點 90° 複製 → Ctrl+D 重複 → 中心加矩形 → 成花型 → 編組複製佈局。

3. 格子裝飾：直線工具描邊 8 pt → 描邊面板設虛線 8 pt → 直接畫出等寬格子行，避免路徑重疊問題。

四、SVG 輸出前必做：路徑擴展與合併

1. 全選 › 對象 › 擴展 › 勾選「描邊」與「填充」。

2. Ctrl+Shift+F9 開啟「路徑查找器」 › 點擊「聯集」 → 形成單一封閉填充路徑，無重疊、無描邊殘留。

五、生成字體圖標

1. 存檔為 .svg。
2. 進入 IcoMoon › Import Icons 上傳 SVG › Generate Font › Get Code 獲取 @font-face 代碼與 Unicode 映射，直接用於網頁。