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 中进行使用了。