在UI设计中，为了达到视觉效果图的完美呈现，视觉设计师、研发人员，往往要耗费大量的时间、经历。其中之一，就是icon的适配。根据屏幕的不同，要输出不同分辨率的icon切图，增加了工作量，也大大影响了效率。今天小编为大家解决字体（SVG）图标设计过程中的困惑与问题，帮助设计师专业地进行字体图标的设计与输出。
为了解决屏幕分辨率对图标影响的问题，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图标相当于跟具体的页面脱节了。引出另一个问题就是，如何保证视觉呈现的一致性？
我们来看字体的设计
设计师在设计字体时，也是和具体页面脱节的。但同一字号的不同文字、符号的搭配，虽大小不一，但并没有违和感。而不同字号的文字、符号放在页面中时，也都很和谐统一。
