应用于 HTML 的图标 SVG code 的优化方法
问题
最近在做项目交互原型设计时尝试将在 Sketch App 中的图标 SVG 代码直接复制粘贴至 HTML 原型中，并通过设置 fill="currentColor" 或 stoke="currentColor" 让图标能直接继承 active, hover, focus 等不同交互状态下的色彩，还可以直接通过 class 来定义图标的大小、空白等多种属性。相对引入图片文件，inline svg 能带来更好的网页加载性能，及更灵活的样式自定义。
然而，使用 Sketch App 右键菜单对 icon 图形 “Copy SVG Code” 后得到的代码”又臭又长”，既有换行锁进，又有版本号、title等非必要信息。稍微复杂的图形的代码更是一大块，粘贴进 HTML 后会影响 HTML 结构的可读性。你需要手动清理那些非必要的代码，修改预设的颜色定义方法，并将过长的 SVG 代码块收起。
解决方法之一
若是使用 Sketch App 等软件设计的图标，怎样才能得到干净快速可用的 SVG code 以嵌入 HTML 使用？
如果是 Mac 用户，可以下载 ImageOptim 这款开源的图片优化 App。你可能听说过 ImageOptim 能够压缩 .png, .jpg 等图片尺寸，但同时它也适用于 SVG 格式图片。
- 在 Sketch App 或其他桌面端图形软件里将相关 icon 图标单个或批量导出为 svg 格式
- 将导出的 .svg 文件拖入 ImageOptim.app 里，svg code 即刻得到优化。
- 将 .svg 文件在 IDE 中打开或使用 textEdit.app 打开，即可得到优化后的 svg 代码
因为是优化代码，所以 ImageOptim 优化 svg 格式文件的速度大大快于优化 .png 或 .jpg 格式的图标文件。
下图是 caret right icon 由 sketch 导出的 SVG code （图左） 和经过 ImageOptim 优化后的 SVG code（图右）的对比：
备选项
如果希望使用在线的 svg 优化工具，可以考虑使用 icomoon App。
尚未试过 Figma Copy SVG code 的功能，只能猜测这款本就基于 Web 的图形设计 app 在导出 SVG code 时会有相比 Sketch 更佳的表现。 但有些项目就是受制于不方便用在线软件呀。
