在本文中，我们将分析从图形包中导出矢量图标的细微差别。 尽管矢量图标已成功运行了一年以上，但不幸的是，图标的显示仍然不正确：线条粗细会跳动，模糊会出现，圆角会消失，反之亦然-圆角会出现在预期有尖角的地方。
主要有以下三个原因：从图形包中导出和优化图标的功能（甚至是错误），功能和渲染错误（我们将重点介绍通过Chrome浏览器或
Electron Shell进行渲染），由于经验不足而导致设计人员的错误。 尽管在图形包本身中一切看起来都不错（在这种情况下，我们正在考虑使用Sketch，但是到处都有类似的问题）。
通常，在以下情况（及其组合）中会出现图标的变形：
- 细（单像素）元素（变得模糊，线条断裂或单像素线条变得太粗）。
- 填充区域将填充那些在设计上应该为空的区域。
- 在外接显示器上，该图标在Retina显示屏上看起来不错，但非常糟糕。 很明显，非视网膜显示器的质量下降是不可避免的，但是在某些情况下，“像素化”显然超出了善与恶的界限。
对于站点，图标上的小kosyachki并不是特别重要。 每个人都已经习惯了，很少有人愿意花很多资源来解决次级完美主义者的麻烦。 在应用程序中，尤其是那些经常使用的应用程序-也许会更加谨慎地对待它。 尤其是遇到了完美主义者（请参阅文章“
在设计演示中应对异议 ”）。
SVG文件和优化器中的垃圾箱
如果在卸载过程中图标丢失了部分线条，请扭曲，分解为组件-可以在SVG文件中查看。 对于程序员来说这不是问题：格式本身是一个XML文件，具有相当清晰的结构和一组用于呈现内容的命令。 通常，在简单的情况下，使用此代码，您可以了解保存时“图形”包被“保存”的确切内容。 例如，要查看分数值，显然不应在分数值上。 或额外的路径。 或一些垃圾。 手工编辑SVG文件-一个业余职业，他没有前景。 但是通常可以了解源文件到底出了什么问题。
使用经典的Sketch + Zeplin捆绑包时，SVG文件中的“垃圾”问题不仅不会消失，而且还会变得更糟。 关键是Zeplin如何通过内置的优化器运行svg文件代码。 从它生成的代码来看，可能会使用
SVGO 。
顺便说一句，这个库经常是在后期阶段图标损坏的原因，例如，在通过webpack构建项目时（更具体地说，是
image-webpack-loader ，它已经在较低级别上使用了SVGO）。 垃圾可以保留，但重要的元素可以放弃。 如果您突然遇到图标损坏的问题，则可以先尝试删除优化器，然后查看问题是否已解决。
此外，Zeplin的在线版本及其桌面应用程序在卸载时会产生不同的结果。 在优化过程中，根据图标的源代码，可能会丢失大量图标。 并且以不同的版本以不同的方式。 真气。
比较代码（在从Sketch下载的图标下方，甚至更低）从Zeplin的在线版本进行比较。 可以看出，在第二种情况下，缺少了以下代码：
这是它的样子：
第一个图标是直接从Sketch下载的，第二个是从Zeplin的在线版本下载的，第三个是应下载的图标渲染错误
不幸的是，歪斜的图标不仅应归咎于设计人员，图形包或优化器。 根据负责渲染的软件，结果可能会大不相同。 例如，在使Chrome浏览器对单像素线进行抗锯齿时也会出现烦人的错误-该问题
至少在2016年就已经知道，但仍然没有解决方案 （2018年10月）。 太可惜了！
努力追求纯净图标的局限性和生活技巧
然后，我们收集了许多技巧，限制和生活技巧，这些技巧可以完全解决渲染方面的问题，或者至少可以达到令人满意的效果。
1.不要转换图标元素
用图标进行的转换（缩放，沿轴旋转或水平/垂直反射）越多，路径属性（或只是点序列）越多地出现在其代码中。 更多路径-经过浏览器渲染优化后，图标看起来更像歪斜了。
代替“组”图标-类似于第五点2.将元素和文本从矢量转换为轮廓（转换为轮廓）
并将所有包含元素的图层合并为一个（合并形状）
如果将文本分别保留为文本和图层，则点（路径）的主要顺序可能会分为几部分，导出时将由他们自己决定。
3.避孕规则：为每个图标命名-唯一
程序员的一个明显规则。 不幸的是，经验不足或过于
草率的设计师可能会破坏它。 如果一个图标的名称与另一个图标的名称匹配，Sketch可以将它们组合为一个对象。 为了方便起见，请事先考虑一个合理的命名系统。 例如，名称的格式可能为popup-icon-close，其中popup是将使用图标的块，icon是图标本身，close是此图标的含义。 同样，您可以在文件名的末尾添加其大小-例如16x16。
当图标很多并且在几种布局上重复出现时，将每个图标变成一个符号（创建符号）很方便。 如果在符号内调整大小或上色，则对于所有布局上的所有此类图标，这些参数将更改。 最好也在符号内设置这些图标的导出设置。 专业地将符号不仅用于图标，而且还用于所有常见控件：按钮，文本字段和复选框等。
此插件可让您直接从Sketch下载优化图标。 这有助于控制优化过程（而不是让其从Webpack流入优化器）。 如果优化的门框立即可见，则可以在卸载后立即检查图标的源代码，尤其是如果它很复杂并且由几部分组成。 但是在大多数情况下，使用此插件导出时，一切都会顺利进行。
5.手动导出时选择图标，然后将其设置为可导出属性。
否则，在导出过程中可能会再次丢失一部分图标。
6.取消选中后台的“包含在导出中”选项
否则，该图标会与周围的白色背景一起导出。
7.如果所有其他方法均失败：每种尺寸-自己的图标
这是野游戏。 发明了矢量图标以便将其用于不同的大小。 不幸的是，在某些情况下，缩放后会获得vyrviglazny结果。 通常，肥皂边缘需要清晰的线条。 这主要是由于以下事实：在缩放时，某些行会落在小数像素值上。 例如，如果基本图标为16×16，而导数为24×24（具有2的幂，几乎一切都很好，但是中心垂直线除外）。 在这种情况下，您要么会习惯，要么不幸的是，您必须手拿图标来使用每种尺寸。
如果您按照这7条规则制作图标，那么即使通过Zeplin插件，导出也将成功。 但是，即使您获得了图标的漂亮的svg来源，并且图标在浏览器中显示时也不会散开并且不会变形，但这也不能保证在不同密度的屏幕上一切都可以。
假设您在MacBook上检查了所有Retina显示屏。 尝试连接或多或少平均的外接显示器。 1像素的线很可能会变得模糊。 简单的数学运算：如果在4×4像素正方形的中间绘制1像素粗的线，则显示时，该线将落在像素之间并模糊。 如果线的粗细不是由整数指定的，则相同。
有关这些麻烦的更多信息
在这里 。 作为解决问题的一种选择-来自
Bjango的应用程序的图标模板：其魅力在于，它们立即考虑了Android，iOS，macOS，tvOS，watchOS，Windows，Windows Phone等的规范。您至少可以将它们用作参考。
Google设备指标中提供了有关不同设备规格列表的详细信息-您可以找出屏幕尺寸，像素密度，甚至是从用户眼睛看屏幕的大概距离。 有助于解决该问题的另一件事是
有关DPI和PPI的设计人员手册 。 它将帮助您为Android和iOS上的设计师学习更多的技巧和实用技术。
如何：
如何不：
顺便说一下，我们检查了许多站点上和应用程序中平均质量显示上的单像素图标-我们主要看到了“肥皂”。 也就是说，“辞职”解决方案非常受欢迎，因为解决此问题和调整图标是顽固的道路（非常耗时）。 第二个最受欢迎的解决方案是使用至少2个像素的线宽（这是Google在许多地方所做的事情）。 但是，对于在项目上花费大量时间的顽固的完美主义者，适合每种规模的解决方案将给出最清晰的结果。
另外，我们注意到，不仅要检查轮廓渲染，还应该检查填充区域。 尤其是如果图标在“填充的图标+轮廓”对中使用（例如，悬停时）。
导出图标（亲和力，Illustrator等）
由于禁止将对象转换为Sketch会花费大量时间来单调绘制所有元素，因此对于某些设计人员来说，例如在Affinity中绘制图标然后将其上传到Sketch更为方便。
一切都非常简单：
- 在像素网格上渲染亲和力图标！ 都是一样的：这样就不会由于网格中的遗漏而造成边框模糊。
- 在“相似性”中选择图标，然后复制到“草图”。
- 在“草图”中，大小可能会在几个像素内有所不同-然后，应使用“缩放”工具获得所需的大小，并检查线的大小和粗细保持整数。
- 将元素和字体转换为轮廓。 再次检查尺寸和位置。
- 合并图层。
- 设置“使可导出”属性，然后选择画板上的图标。
- 导出-瞧，您拥有一个完美的svg文件，其单个路径的行为非常可预测。
结论
在大多数情况下，由设计人员的特殊渲染，卸载或优化或渲染的细微差别引起的图标上的小变形都不会引起任何抱怨。 最后，大多数图标取自图标包，并按“原样”使用。 但是在某些情况下，微调和拟合是合理的。 例如，如果您要在Electron平台上构建应用程序，并希望在所有平台上实现最大的清晰度。 无论如何，对于设计师来说，使用一种通用的图标风格是有意义的（例如，您可以将
我们的简单清单作为基础）。
祝你好运！