步驟一：建立基礎形狀#

首先，我們需要準備兩個關鍵元素：

1. 外框主體：作為基礎的形狀（矩形、圓形或自訂路徑）
2. 鏤空區塊：需要從主體中移除的形狀

1
💡 小技巧：建議先繪製外框，再複製調整成鏤空形狀，
2
   這樣可以確保兩者的相對位置準確。

步驟二：執行布林運算#

1. 選取兩個形狀：同時選擇外框主體和鏤空區塊
2. 找到布林工具：在上方工具列中找到布林運算選項
3. 執行 Subtract Selection：點擊減去運算按鈕

此時，重疊區域會被自動移除，形成完美的鏤空效果。

步驟三：路徑優化#

為了確保 SVG 輸出的品質，建議執行以下優化：

1. Flatten 平面化：將複合路徑轉換為單一向量
2. 檢查節點：確保路徑節點簡潔且合理
3. 測試輸出：預覽 SVG 是否符合預期

步驟四：匯出設定#

匯出 SVG 時的重要設定：

• 格式選擇：SVG
• 尺寸設定：根據應用需求調整
• 優化選項：啟用路徑優化

多重鏤空效果#

當需要在一個形狀中創造多個空洞時：

1. 逐步操作：一次處理一個鏤空區域
2. 群組管理：適當使用群組來組織複雜結構
3. 圖層順序：注意圖層堆疊對布林運算的影響

複雜形狀處理#

對於不規則形狀的鏤空：

1. Union 合併：先將多個外框形狀合併
2. 分步執行：將複雜操作分解為簡單步驟
3. 路徑檢查：確保每個步驟後的路徑完整性

其他布林運算應用#

除了 Subtract Selection，還可以運用：

• Exclude Selection：創造互斥區域效果
• Intersect Selection：保留重疊部分
• Union Selection：合併多個形狀

Logo 設計應用#

在品牌設計中，鏤空效果能夠：

• 創造視覺層次感
• 增強品牌識別度
• 適應不同背景色彩

網頁設計應用#

用於網頁元素時：

• 減少檔案大小
• 提供更好的瀏覽器相容性
• 支援 CSS 動畫效果

實體製作應用#

準備加工檔案時：

• 確保路徑閉合
• 檢查最小線寬要求
• 驗證加工可行性

問題一：鏤空後邊框消失#

原因：布林運算會影響描邊屬性 解決：先轉換描邊為路徑，再執行布林運算

問題二：複雜路徑節點過多#

原因：多次布林運算累積節點 解決：定期使用 Simplify 工具優化路徑

問題三：SVG 輸出異常#

原因：路徑包含隱藏錯誤 解決：使用 Flatten 後檢查路徑完整性

設計階段#

1. 預先規劃：在開始前規劃好鏤空位置和尺寸
2. 保留備份：執行布林運算前複製原始物件
3. 命名規範：為複雜項目建立清晰的圖層命名

執行階段#

1. 逐步檢查：每完成一個步驟就檢查結果
2. 適度使用：避免過度複雜的布林運算組合
3. 性能考量：注意複雜路徑對檔案大小的影響

輸出階段#

1. 格式選擇：根據用途選擇適當的輸出格式
2. 尺寸優化：確保輸出尺寸符合使用需求
3. 相容性測試：在目標平台測試 SVG 顯示效果

Figma 外掛推薦#

• SVG Export：增強的 SVG 輸出選項
• Boolean Operation Helper：布林運算輔助工具
• Path Optimizer：路徑優化外掛

工作流程優化#

建立標準化的操作流程：

1. 創建設計範本
2. 設定常用的布林運算快捷鍵
3. 建立品質檢查清單