高解析度螢幕普及下，SVG 圖標因可縮放、可編輯 CSS 樣式成為前端首選。但許多設計師發現匯出的 SVG 在網頁呈現時邊緣模糊、甚至形狀變形。本文來自京東設計中心實戰經驗，提供四個關鍵設定，從 AI 來源端徹底解決像素對齊問題。

問題根因

AI 是矢量工具，路徑本身無鋸齒。但 SVG 匯出時會根據畫板像素網格進行光柵化採樣。若路徑錨點落在像素網格的「次分隔線」（如 0.5px、0.3px）而非整數像素位置，瀏覽器渲染時就會產生反鋸齒模糊或形狀偏移。

四步驟精準設定

1. 單位設為像素：編輯＞偏好設定＞單位，將通用、描邊、文字單位全改為「像素」。
2. 鍵盤增量 0.1px：同視窗下「鍵盤增量」設為 0.1 px，方便以方向鍵微調錨點至整數座標。
3. 網格系統配合：編輯＞偏好設定＞參考線與網格，「網格線間距」1 px，「次分隔數」10（即最小單位 0.1px）。
4. 開啟像素預覽與對齊：檢視＞像素預覽（Alt+Ctrl+Y）與檢視＞對齊至像素網格（Shift+Ctrl+'），並在檢視＞顯示網格（Ctrl+'）開啟視覺輔助。

驗證與交付建議

• 完成繪製後，將畫面放大至 6400% 檢查每個錨點是否緊貼像素網格交叉點。
• 所有圖標統一畫板尺寸（如 32×32px 或 24×24px），並將關鍵路徑錨點對齊整數座標。
• 匯出 SVG 時勾選「回應式」（Responsive）並取消「包含畫板」，由前端控制顯示尺寸。
• 團隊協作時建議制定《SVG 圖標製作規範》，統一網格、命名與匯出設定。

掌握這套流程，設計師即可產出銳利無殘影的 SVG 圖標，減少與前端關於「為什麼圖標模糊」的溝通成本，提升專案交付品質。