SVG 圖標的優勢
FileMaker 自 14 版開始支持 SVG 格式的圖標。在之前的版本，只能使用 png 等圖片格式的圖標。SVG 的全稱是 Scalable Vector Graphics，也就是可縮放的矢量圖形。
SVG 圖標主要有 2 大優勢：
1. 圖標放大且在高清屏幕上顯示不模糊
2. 可以通過不同條件動態設置圖標顏色
第一個優勢在 Mac 和 iPhone 上特別明顯。圖片格式的圖標在這些操作系統下運行，大多會出現毛邊和鋸齒，山寨感非常強。而換用 SVG 的圖標，則會非常銳利。
第二個優勢對於完善交互體驗非常重要。以我們正在開發的系統中的一個彈出菜單為例：因為有了圖標自動變色，所以我們可以讓菜單選項正常狀態顯示黑色、鼠標滑過時顯示藍色、而由於權限限制不可用時顯示淺灰色。這在沒有 SVG 時，是非常麻煩的事情。
SVG 圖標資源及圖標管理
為了讓我們的系統風格現代且統一，所以建議從一整套圖標中選用。這種成套的圖標可以讓設計師繪製，也可以去網上找收費或免費的圖標。我們在開發的時候，一般會使用阿里巴巴的 iconfont (www.iconfont.cn) 去尋找想要的 SVG 圖標。
圖標下載之後，我們還是使用 IconJar (macOS) 來管理這些圖標，以備後續使用。IconJar 的功能還算強大，可以拖拽添加圖標，也可以將圖標導出成多種格式。
添加 SVG 圖標至 FileMaker
找到了我們需要的圖標套件，就要通過按鈕設置面板添加到 FileMaker 中以便使用。但是，在添加之前還需要對 SVG 進行一些修改。
因為 FileMaker 通過一個高級別元素 Class = "fm_fill" 來控制圖標顏色，所以除了 AI 等工具生成的 SVG 才可以直接上傳，其他都需要在顏色填充代碼旁邊手動添加 Class = "fm_fill"。並且，為了跟按鈕設置面板中的自帶圖標風格一樣，也建議將圖標顏色做一些調整，但這不是必須的。
當然，每次都要手動添加 fm-fill 這個元素，略顯麻煩。我們可以使用 Geist Interactive 推出的免費 SVG 轉換工具 (www.fmsvg.com) 來自動修改 SVG 圖標。它會給 SVG 圖標添加 fm-fill 元素及將圖標顏色設置為灰色（#CCC）。轉換之後，我們就可以添加到 FileMaker 中進行使用了。
閱讀更多 飛沫課 的文章
