SVG在界面设计中的应用现状及趋势

文/张纪越

1 引言

近年来，随着移动互联网的不断发展，移动设备的屏幕精度不断改善，多种机型及其分辨率的差异带来了H5页面适配等问题。HTML5技术在界面设计制作中愈加普遍，在传统PC端网页、手机APP界面、微信公众号推文、小程序等平台得到了充分实践与发展，但前端开发的图片适配依然以适配多套分辨率的切图为主，SVG图形虽有矢量性、缩放无损等诸多优点，但其应用并不广泛。因此，研究SVG的应用和趋势对界面设计技术层面的发展具有重要意义。

2 SVG特点及优势

SVG是Scalable Vector Graphics（可缩放矢量图形）的缩写，可直接使用浏览器打开，也可以通过 embed 或 frame 标签嵌入到页面中。IE9+，Fire Fox，Chrome，Opera，Safari等主流浏览器都支持 SVG。SVG作为图片格式，UI设计师可以通过Adobe Illustrator等矢量绘图软件绘制并将图形对象保存为.svg格式的图片；作为用XML定义的语言，前端设计人员可以通过submit等代码编辑器来打开和编辑。

SVG相对于JPEG、PNG和GIF等其他图片格式具有如下优势：

（1）相比其它位图，SVG图像文件更小，可压缩性更强。

（2）图像文件可读，易于修改和编辑。

（3）与现有技术可以互动融合，如通过SMIL生成动态图形。

（4）SVG 图形格式可以方便的创建文字索引，实现基于内容的图像搜索，利于搜索引擎SEO。

（5）SVG 图形格式支持多种滤镜和特殊效果，在不改变图像内容的前提下可以实现位图格式中类似文字阴影的效果。

图1

（6）无障碍，可实现无障碍读屏软件读取。

3 应用现状

3.1 SVG与icon

icon是SVG的一个典型应用场景，因为SVG矢量性的特点，不需要切各种倍数的图适配高清设备，一张图就可在各种分辨率下清晰锐利显示。

通过改变代码属性可直接改变SVG的填充颜色，以适应不同的焦点状态，由于SVG是一种XML格式描述的矢量图形，自带很多属性可定制它的表现效果。在导航栏icon状态的切换及收藏夹、喜爱、点赞等交互功能方面，可通过改变icon填充色的方式制造焦点，给用户操作反馈。

SVG形变动画可运用于icon的微交互，即通过SVG Morphing动画（从一个形状变到另一个形状）切换icon图形，实现有趣的动画效果。如图1所示的下拉刷新实例，在用户的下拉过程中，箭头将会变成一个弹性转动的圆圈表示数据正在加载，加载完后变成对勾，表示加载完毕。此类应用避免了直接切换图片，让交互更加细腻流畅，向用户传递该动作的状态过程和反馈结果。

SVG矢量、易修改、支持多色的特性，推动了icon平台的发展。Iconfont.cn是阿里巴巴体验团队打造的矢量图标管理、交流平台，功能强大且内容十分丰富。众多用户把优秀的icon设计共享在平台，可由一个图标，追溯至所属作者及所属图标库，便于找到相关风格配套图标。平台提供SVG、AI、PNG格式的icon下载，支持在线修改图标颜色，并在改版后支持多色矢量图标，在线可对多色图标分路径改色，保存下载历史、颜色（记忆用户选择的图标色彩，方便重复选择）。多彩矢量图标可以以svg格式直接在iOS和安卓平台上支持，也可以直接在支持ie9+,及现代浏览器的网站上应用彩色图标。

3.2 SVG动画

图2

SVG与现有技术可以互动融合，SVG 技术本身的动态部分（包括时序控制和动画）基于 SMIL 标准。另外，SVG 文件还可嵌入 JavaScript脚本来控制SVG对象。

SMIL（同步多媒体集成语言）能利用 SVG 内部元素的设置来驱动动画，《网易云音乐陪你温暖同行》（网易云音乐 2017年终总结）中就用到了 SVG 动画。如图2，由上至下分别为行星沿轨迹转动，音符渐隐和花瓣飘落动画，这三组动画都是周期很长的循环动画，其中动画的页面占比不小，需要保证一定的清晰度。如果按照传统做法做成GIF或者PNG序列帧会体积庞大或播放卡顿，而如果使用SVG来实现，清晰流畅的动画仅需要很小的体积，不用特意为流畅循环妥协播放效果。

使用SVG的路径path标签，配合strokedasharray和stroke-dashoffset 属性，SVG可以简单生成描边动画。在可视化H5制作工具iH5平台，用户无需编程基础，根据上传SVG图形可自动生成“描绘出现”、“擦除消失”（即描边动画的正向与反向播放）等动画效果，且可设置延时播放、描边速度、描绘方向和描绘时长。

上文提到的Morphing动画也可用于SVG图片切换。SVG Morphing主要是对path元素中的d属性的数据进行变化。iH5平台提供了对SVG Morphing的支持，SVG图片在SVG容器下可以制作变形动画（SVG之间的切换的变形动画效果）。并可以设置变形时长、逆时针、顺时针等变形效果和线性、曲线等动画类型。结合描边动画和Morphing动画，可以实现一些页面间绚丽的转场和交互效果。

3.3 SVG与交互图表

基于SVG矢量性和高兼容性的特征，SVG可动态生成缩放自如且具有交互功能的图表，嵌入网页中，并显示给终端用户。

来自百度EFE数据可视化团队的ECharts，是一个使用 JavaScript 实现的开源可视化库，底层依赖轻量级的矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。其支持以 Canvas、SVG（4.0+）、VML 的形式渲染图表，其中SVG渲染可大幅降低移动端渲染的内存占用。

SVG在GIS方面也得到了广泛的应用。如帮助实现煤矿WebGIS在移动智能终端的可视化：在前端页面显示方面采用一张图分层显示设计思想。以不失真的SVG矿图为静态底图，需要变化的元素采用HTML5中的Canvas实现动态绘图，并且在不影响渲染结果的情况下优化SVG代码与页面显示速度。

4 发展趋势

微信平台在更新迭代中逐步优化对SVG的支持，提升推文的图文结合和视觉交互水平。在19年5月8日的版本更新中，通过将整个画布内容分配到图库中，为创意提供了新的可行空间。比如图文内二次进入SVG；形成沉浸式交互；将链接引用到中，制成前端开发常用的纹理设计等。可以看出微信团队认可SVG交互图文在行业内的重要价值，并正在着力不断优化这类高端图文的用户体验。

SVG是响应式网站发展的未来趋势。著名开源代码平台github.com已全栈使用SVG，页面中的图片和icon可自适应各种分辨率大小，SVG图形调整宽度时不需要刷新，符合响应式设计的需要。

现代浏览器对svg渲染的支持与优化相当不错，SVG帮助设计师从更多维度展现设计想法。在越来越注重视觉表达的互联网时代，扁平化设计趋势的流行和第三方动效库的涌现，给SVG这种古老的图形格式增添了新的生命力，相信SVG的前景一片光明，会成为未来界面设计的主流发展趋势。

5 结语

SVG作为基于XML的文本化网络矢量图像格式，具有其他图像格式所能无可比拟的优势和发展前景。本文总结了SVG的一些典型应用场景，列举了iH5、Echarts、微信等平台对SVG的创新型应用实例，讨论了SVG对界面设计领域的推动作用。