大家好，我是讯享网，很高兴认识大家。



在UI设计中，为了达到视觉效果图的完美呈现，视觉设计师、研发人员，往往要耗费大量的时间、经历。其中之一，就是icon的适配。根据屏幕的不同，要输出不同分辨率的icon切图，增加了工作量，也大大影响了效率。

 

为了解决屏幕分辨率对图标影响的问题，SVG格式的icon出现了，这大大减轻了前端的负担。同时，也对设计师有了新的要求，提供SVG格式的图标。

 

网络上有很多关于SVG的介绍，但基本是针对于开发人员的讲解，对于视觉设计师来说，往往看的云里雾里。所以今天我们就从视觉设计的角度，对SVG图标进行深度解析。

一、什么是SVG

 

简单的说，SVG就是一种矢量图形格式。不像其他一些基于矢量的文件会占用比较大的资源和空间，SVG是纯代码的形式。这意味着它方便，更轻量。

 

SVG有哪些优势呢？

 

1、任意放缩

因为是矢量图形，用户可以任意缩放图像，而不会破坏清晰度与细节等。

 

2、文件较小

矢量图像是用点和线来描述物体，所以与位图（如GIF、JPG、PNG）相比，SVG文件要小很多，并且质量高。

 

3、超强显示

因为是矢量图像，SVG图像在屏幕上总是边缘清晰，显示效果极佳。

 

4、易于编辑

支持 CSS 样式：和普通字体一样，可以利用 CSS 来定义大小、颜色、阴影、hover 状态、透明度、渐变等等…

 

二、SVG图标的运用

 

上面我们讲了SVG的很多优势

 

既然SVG那么优秀，那技术人员是不是可以直接拿来开发使用？

 

我们一起看下图

讯享网

通过查看前端代码可以看出，单个SVG格式的图标代码已经很长了，这就导致在实际研发中不方便维护。

 

为了解决上面问题，诸如Iconfont之类的平台应运而生。

 

IconFont是什么？

 

Iconfont主要相当于一个字体图标的处理平台。使用SVG代替字体文件，进行转换和封装，优化为webfont格式。使原本冗长的代码轻量化，便于开发使用。

 

同时，他也为用户提供在线图标搜索、图标分捡下载、在线储存、矢量格式转换、个人图标库管理及项目图标管理等基础功能。

 

三、SVG图标的制作

 

我们平时制作图标，主要用Ai、PS、Sketch。

这三种软件，都能支持 SVG 格式导出，但 PS和Sketch 对 SVG 的导出支持的还不是很完善，有时会出现一些奇怪的现象，如图形的路径混乱了，图标倾斜了等不可预知的情况，因此如果想要处理或者生成 SVG 的文件，目前 Ai 仍是较好的选择。

如何定义尺寸？

 

我们知道，平时制作图标，都是基于像素作为尺寸参照。16/24/32/……会有一个大小参照。同一个产品/界面，这里我用16，那里或许就需要用32，其他地方或者又用到别的尺寸……总之，我们会根据页面/场景进行定义。

但是SVG图标，同一图形，视觉设计师只需提供一个SVG格式图标，技术同学通过平台下载就可以随意调用、调整尺寸以及调配颜色。

 

这种方式高效便捷，但对于很多视觉同学，却往往会有这样的困惑：制作过程中如何定义尺寸？因为SVG图标相当于跟具体的页面脱节了。引出另一个问题就是，如何保证视觉呈现的一致性？

 

我们来看字体的设计

设计师在设计字体时，也是和具体页面脱节的。但同一字号的不同文字、符号的搭配，虽大小不一，但并没有违和感。而不同字号的文字、符号放在页面中时，也都很和谐统一。

 

这是因为在设计字体的过程中，引入了基准框这一概念。

通过制定基准框，为字体矢量图标提供大小的参考。

 

但是，基准框只是为图标大小提供参考。诸如比例、线宽、长度、圆角等等，我们并没有办法控制和规范化。

 

所以我们进一步引入栅格。

 

在基准框的基础上，制定栅格。通过栅格来控制图标组成元素的比例关系。

图标设计的时候我们用栅格来模拟像素，一个格子就是一个像素，横纵各16个像素，模拟的就是16px大小的图标。

 

通过栅格，能达到怎样的优化效果呢？

 

我们来了解一下文字的渲染策略。看组图：

我们发现，平滑纯色的字体放大之后出现了锯齿，还有各种奇怪的颜色。这是为什么呢？

 

因为在数字形态中，字体被设计成矢量的图像。当文本在屏幕上显示时，需要将图形栅格化。就造成了现实与理想的差距。渲染策略，就是为了确保屏幕显示的字体友好易读。

 

不同的操作系统、浏览器采用的渲染策略也不相同，所呈现的精细程度也所差别。所以我们更希望饱满地显示一个像素。尽量避免由于屏幕显示的栅格化而带来的粗糙感。

从上组图中，我们可以看出：左侧图形在制作时，因为考虑了栅格问题，边都规范的落在栅格线上，右侧未考虑像素栅格的问题，而随意摆放。在实际16×16大小的显示中，很明显感觉到左侧的小图标比右侧的小图标要清晰很多。

 

这就是因为图标在渲染过程中出现的偏差，本来要显示两个像素的，却占用了3个像素格，导致了不同渲染的处理，以至于右侧小图标模糊且变粗了。

所以在制作图标的时候我们需要引入栅格，去模拟像素点，然后避免图标的线或边不要乱落的情况。

 

其他注意事项：

 

1、闭合。图形路径需要封闭，不能出现未闭合图形。

2、合并。如果有两个以上图形，或者布尔关系的图形，请对图形合并并扩展。

3、填色。完成设计的图形需要填充相关的颜色，建议用纯色（不支持渐变）。

4、轮廓化。将描边转化为闭合图形，选择要转换的描边，对象-路径-轮廓化描边。

四、基于Iconfont的设计规范

 

因为我们平时工作主要会借助iconfont这个平台，所以我们在制作图标的时候，一方面会遵循iconfont的一些图标制作规范，另一方面，如何去建立成套的icon图标体系，我们需要在一些方面进行思考，定义。

 

1、网格与尺寸

 

阿里巴巴矢量图标库在制定基准框的时候考虑到图标展现的标准尺寸：16X16、32X32、64X64、128X128；特设置了一个可以整除他们的尺寸：1024X1024px。在此基础上，进一步定义栅格及有效区域。

在16X16的栅格中绘制，那么16像素2的n倍都能应用，这样图标的边框就不会落在半个像素上，避免出现虚边、加粗等现象。

 

设计过程中预留 64px 的出血位，避免溢出。这样的预留也是与字体设计的规律保持一致的。

 

2、定义视觉基准线

 

根据几种常见的几何形状建立形状基准线。

 

为什么要这样做？这就涉及到了视觉偏差的问题。

由于视错觉带来的感知偏差，我们需要建立常见的形状基准做为向导，来达到各种形状样式的视觉统一感。

 

怎么建立？其实也是基于栅格，定义参考线。

省事的方法，就是我们根据antdesign的这组基准规范来制作图标。因为同是基于1024画板，遵循上面的基准线就很可以了。

 

3、角度

 

在图标设计中，当遇到角度的问题，有人会随意地定义，也有很多人会喜欢使用60°、90°。但这一方面缺乏规范性，一方面也难以满足实际的设计需求。在设计规范与视觉呈现上都相对缺乏。

在角度的设置上，我们需要有统一的规范。

 

举个栗子。可以从常规思路入手。图标区域的中心点为圆心，分成24等分，每一等分为15度。角度采用15倍数原则，从小到大以 15的规律递增。常用的规格是4种，分别为 30、75、90、120。

当然，也可以采用其他规则……比如antdesign就是收到美式战斗机F-14的启发，将常用角度定在约76度。

无论如何，在角度的设置上，遵循一定的倍数关系。

 

4、线条

 

一致的笔画宽度，是用线的基础。笔画具有内部平直，外部圆角的特点。

笔触轮廓和网格对齐，特殊情况下笔触轮廓与1/2处对齐，使之在使用过程中有较高的清晰度，看起来更加简洁工整。

5、圆角

 

当只设定一种圆角值无法满足设计需求时，我们需要设定多个圆角值。圆角的设置采取一定的倍数关系，如8的倍数。

以上图为例，最左边的，是四方的闭合图标样式，我们给他设定一种圆角；然后第2个，相对不规则的，我们设定一种；第三种开放性的，第四种大圆角……通过一些规则的建立，规范圆角的设置。

 

6、笔画末端

 

笔画末端是我们往往容易忽略的细节。但实际上末端如何处理，也需要进行规范定义。

上面是常见的末端处理方式：末端平直、末端圆角、末端圆头。在具体执行中用哪种？怎么用？并没有好坏之分，根据需求规范定义即可。

 

比如说：如果我们采用末端平直，那其实我们在设计图标的时候，也不适合用圆角了，不然视觉呈现不统一。另一方面，末端平直给人坚硬的视觉感受，在设计的时候也要考虑到情感的传递。末端圆角过渡自然，也非常细节。但在制作上会相对费功夫一些，基本上需要逐个设置，并且还要兼顾对齐栅格。末端圆头好操作，末端的处理也相对柔和……总之，具体在执行的过程中，都需要多方面考虑。

 

6、视觉校正

 

极端情况下必要的校正能够增加图标的清晰度与视觉美感。所以纵然我们在设计过程中制定了一系列的规范，但规范是死的，设计是活的，必要时，也需要打破规范，以求整体上的统一。

 

结语

 

以上就是从视觉设计师的角度，对SVG图标的解析。希望能对大家有帮助。SVG图标的制作，简单，又不简单。怎样真正掌握？还是需要大家在实践中不断思考，加深理解，真正消化为自己的知识。

 

有什么困惑或者问题，欢迎大家随时找我沟通~

参考文献：

·《再不知道字体图标就落伍啦！字体图标制作详解》

·《字体渲染背后不得不说的故事》

·  iconfont图标绘制规范

谢谢阅读

感谢支持

记得点个赞哦

∨