SVG设计如何为商家带来价值

SVG作为一种图像文件格式，开发商可以直接用代码来描绘图像，并呈现出良好的视觉效果，而且客户还可以随时通过HTML来进行修改。那么您知道SVG设计制作是如何为商家带来价值的吗？

一、在了解价值之前，先了解一下它与传统图片格式有哪些区别

1、良好的可读性，有利于SEO与无障碍

由于SVG采用的是XML语法，图形的里面的文本内容可以直接被浏览器，搜索引擎SEO和无障碍读屏软件读取，具体用法如下代码设置title与desc标签即可：

2、具备兼容现有图片的能力，而且还支持矢量

SVG提供的功能集涵盖了嵌套转换、裁剪路径、Alpha通道、滤镜效果等能力，它还具备了传统图片没有的矢量功能，在任何高清设备都很高清。

二、与icon font之前的区别

2. icon font只能支持单色

icon font做为字体无法支持多色图形，这就对设计造成了许多限制，因此这也成为了icon font的一个瓶颈。

1. 渲染方式不同

icon font采用的是字体渲染，icon font在一倍屏幕下渲染效果并不好，在细节部分锯齿还是很明显的，SVG上面我说过它是图形所以在浏览器中使用的是图形渲染，所以SVG却没有这种问题。

3. ion font可读性不好

icon font主要在页面用Unicode符号调用对应的图标，这种方式不管是浏览器，搜索引擎和对无障碍方面的能力都没有SVG好。

三、SVG设计制作成本与运营维护成本

目前制作SVG设计软件有：Adobe Illustrator、Visio以及CorelDRAW等，用AI画图对设计师是否会产生额外成本，我还专门咨询了组内几个设计师：“用PS画一个图形和用AI画一个图形的所需时间是一样”（来自我组峰哥，华D哥，登哥，丹哥原话），AI做好后直接导出成SVG格式给前端同学即可使用。相比制作字体包要步骤简单许多。

在维护性方面：做SVG设计对设计师之前的工作量也有一定的提升，过去他们同一个图不同尺寸在PS输出都需要调整一次图形，因为如果直接等比例缩放图形尺寸，会出现图片有锯齿。但是用SVG以后，不同尺寸的控制都有前端同学直接调整SVG宽高参数就能实现不同尺寸切换，且不会有锯齿。

四、SVG设计的性能测试

性能应该是大家最关注的为题了，为了测试的可靠性，我在icomoon挑选了 __491个__ 免费ICON，分别生成了svg图标和icon font在Chrome Timeline做了测试，测试内容分别对demo页面491图标的 __Loading、Rendering、Painting__ 这三个指标做了测试。

通过上述内容，我们了解到SVG既能满足现有图片功能需求，还能以矢量图的形式展现在用户的面前，而且在性能维护和开发成本上，SVG设计制作都要icon font好很多，如果您有这方面的需求，我们可以为您提供SVG定制设计服务！

相关阅读：

《旅游业微信朋友圈海报设计要点》