> ## 文章索引
> 在这里获取全部文章的索引：https://lrd.im/blog/llms.txt
> 这是 lrd.im 的个人博客，记录设计、技术与思考。

# 在 AI 中导出更干净的 SVG 图形！

![封面图](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-02-01-5f6feede2f21/01.jpg)

> 当我们做好一些图标准备导出成 SVG 文件时都要轮廓化描边，但是草率地轮廓化描边经常会产生多余的锚点，我在做相关工作的过程中找到了一些方法，或许可以帮助您导出更干净的 SVG 图形。

## 何为“不太干净”的 SVG 图形？

![两个图标示例（文档图标和法槌图标），轮廓化描边并合并形状后，在路径拐角、端点等位置产生了大量多余锚点（以红圈和粉色点标注），导致 SVG 路径数据冗余不干净。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-02-01-5f6feede2f21/02.png)

![两个深色线条风格图标（铃铛和手机）的路径节点示意图，多个红色圆圈标注出轮廓化描边后产生的多余锚点位置，说明草率轮廓化描边会导致路径不干净。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-02-01-5f6feede2f21/03.png "「不太干净」的 SVG 图形。")

这两个图标在一开始设计的时候都是用 2 像素的描边进行设计，在轮廓化描边以及合并形状之后产生了许多多余的锚点。

如果用 AI 自带的简化（对象-路径-简化）工具，会改变图标原来的形状。

![Adobe Illustrator 中对黄色图标路径使用 "简化" 工具的截图，参数为曲线精度 100%、角度阈值 173°，锚点从 118 减至 86，但图标多处圆角和交叉区域（红圈标注）出现明显形状失真变形。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-02-01-5f6feede2f21/04.png "使用 AI 自带的简化工具会改变原有的形状。（顶层的黄色是使用简化工具之后的效果）")

下面分享两个技巧，帮助设计师导出干净的 SVG 图标。

## 技巧一：将图形摆正

如果我们的图标在创作过程中调整了形状的角度，在轮廓化描边之前请把形状转正，轮廓化描边之后再还原。如下图：

![四步对比示意图：设计稿中骰子图标带有倾斜角度；直接轮廓化描边（错误示范）产生多余锚点；先将图形调正再轮廓化描边，锚点整洁；最后还原角度，得到干净的 SVG 路径。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-02-01-5f6feede2f21/05.png)

请注意大多数情况下都要手动定一个原点再旋转，不能用 AI 默认的中心点，因为中心点会随着形状的旋转而变化，导致无法回到原来的位置。

## 技巧二：减少重叠的路径

### 重叠曲线场景

通常图标都是用各种基础形状之间的布尔运算制作出来的，在轮廓化描边之前请注意减少相互重叠的路径，如下图：

![三步示意图：原始音乐播放器图标设计稿（左）→ 高亮标出蓝色重叠路径（中）→ 删除重叠路径后得到干净路径的结果（右），说明减少重叠路径可避免轮廓化描边后产生多余锚点。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-02-01-5f6feede2f21/06.png "检查您的图标是否有过多的重叠路径")

我们要做的就是选删掉这些重叠的部分，再轮廓化描边就好了。

因为重叠的曲线路径（尤其是曲线路径），不删除直接轮廓化描边的话会出现很多不必要的锚点。

注意：如果您设计的路径端点是圆头端点或者方头端点，请在锚点与路径的交接处也要处理！

![Adobe Illustrator 描边选项面板截图，显示粗细为 2px，端点选项里圆头端点被选中。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-02-01-5f6feede2f21/07.png "圆头端点")

### 路径相交场景

如果用 AI 自带的吸附效果，把锚点跟路径并在一块的时候直接轮廓化锚边很容易会多几个不必要的锚点，如下图所示：

![对比示意图：左侧图标的曲线路径端点与横线路径存在重叠（红圈标注）；右侧图是轮廓化描边后的效果，在相交处产生了多余锚点。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-02-01-5f6feede2f21/08.png "与其他路径重叠的圆头端点的描边，在扩展后会额外出现了多余锚点。")

这个问题有两个解决办法：

第一个方法是把键盘增量调低一点（大概0.5 px）手动把每个锚点向路径远离一个键盘增量；

![四步流程对比图：设计稿中路径端点与圆弧交叉重叠（红圈标注），将端点向内缩一个键盘增量，轮廓化描边，最终合并，可有效减少多余锚点。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-02-01-5f6feede2f21/09.png "用键盘增量来解决，适合水平、垂直或是45°旋转的路径")

第二个方法是轮廓化之后不急着合并，而是先把端点位置的锚点往里面缩一点：

![四步骤对比图：设计稿中圆弧与横线交叉处有多余重叠（红圈标注）；轮廓化描边后锚点增多；删除最突出的锚点后路径简化；最终合并得到干净的图形路径。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-02-01-5f6feede2f21/10.png "删除某些比较突出的锚点，适合圆头端点的路径")

通过解决以上两种场景重叠路径问题，可以对比看到清理多余锚点的效果很明显。其实我们的目的是减少重叠的路径，让一个轮廓不受其他小路径的影响。

![清理前后对比图：左侧图标路径端点处有粉色锚点标记，显示重叠路径产生的多余锚点；右侧清理后锚点消失，路径轮廓更简洁规整。图标为带播放键和音符的圆形徽标。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-02-01-5f6feede2f21/11.png "清理前后对比明显")

## 最后

想要导出更干净的 SVG 图标并不难，只是比较繁琐，而且很枯燥。其实如果平常使用在 APP 设计、网页、BANNER 之类的场景，就算锚点有一点偏差也没关系，因为图案太小了，上看不出来细微的偏差。但是如果想让作品更规整、规范就要把每一处细节处理好。

---

最最后分享一下我近期设计的图标集，诸位有需要可以随意取用。

### 商务 PPT 图标

![作者设计的商务 PPT 图标集预览图，共 96 枚图标，涵盖简约线性与彩色填充两种风格，背景平铺展示了商业、数据分析、科技等主题图标。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-02-01-5f6feede2f21/12.jpg)

下载：[UpLabs](https://www.uplabs.com/posts/business-icon-set-icons) | [EpicPxls](https://www.epicpxls.com/items/business-icon-set) | [CreativeMarket](https://creativemarket.com/CreativePudge/2342439-Business-Icon-Set%28Outline-Filled%29)


### 旅行社交图标

![作者设计的旅行社交图标集预览，共 24 枚，黄色描边风格，涵盖定位、时钟、票券、聊天、标签、火焰、二维码、导航、缆车、摩托、巴士、地铁、轮船、飞机、相机、人物等旅行相关图标，提供 AI、SVG、Sketch 格式免费下载。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2018-02-01-5f6feede2f21/13.jpg)

下载：[UpLabs](https://www.uplabs.com/posts/24-free-social-icon-set) | [EpicPxls](https://www.epicpxls.com/items/24-free-social-icon-set)