SVG在界面設計中的應用現(xiàn)狀及趨勢

文/張紀越

1 引言

近年來，隨著移動互聯(lián)網(wǎng)的不斷發(fā)展，移動設備的屏幕精度不斷改善，多種機型及其分辨率的差異帶來了H5頁面適配等問題。HTML5技術在界面設計制作中愈加普遍，在傳統(tǒng)PC端網(wǎng)頁、手機APP界面、微信公眾號推文、小程序等平臺得到了充分實踐與發(fā)展，但前端開發(fā)的圖片適配依然以適配多套分辨率的切圖為主，SVG圖形雖有矢量性、縮放無損等諸多優(yōu)點，但其應用并不廣泛。因此，研究SVG的應用和趨勢對界面設計技術層面的發(fā)展具有重要意義。

2 SVG特點及優(yōu)勢

SVG是Scalable Vector Graphics（可縮放矢量圖形）的縮寫，可直接使用瀏覽器打開，也可以通過 embed 或 frame 標簽嵌入到頁面中。IE9+，F(xiàn)ire Fox，Chrome，Opera，Safari等主流瀏覽器都支持 SVG。SVG作為圖片格式，UI設計師可以通過Adobe Illustrator等矢量繪圖軟件繪制并將圖形對象保存為.svg格式的圖片；作為用XML定義的語言，前端設計人員可以通過submit等代碼編輯器來打開和編輯。

SVG相對于JPEG、PNG和GIF等其他圖片格式具有如下優(yōu)勢：

（1）相比其它位圖，SVG圖像文件更小，可壓縮性更強。

（2）圖像文件可讀，易于修改和編輯。

（3）與現(xiàn)有技術可以互動融合，如通過SMIL生成動態(tài)圖形。

（4）SVG 圖形格式可以方便的創(chuàng)建文字索引，實現(xiàn)基于內(nèi)容的圖像搜索，利于搜索引擎SEO。

（5）SVG 圖形格式支持多種濾鏡和特殊效果，在不改變圖像內(nèi)容的前提下可以實現(xiàn)位圖格式中類似文字陰影的效果。

圖1

（6）無障礙，可實現(xiàn)無障礙讀屏軟件讀取。

3 應用現(xiàn)狀

3.1 SVG與icon

icon是SVG的一個典型應用場景，因為SVG矢量性的特點，不需要切各種倍數(shù)的圖適配高清設備，一張圖就可在各種分辨率下清晰銳利顯示。

通過改變代碼屬性可直接改變SVG的填充顏色，以適應不同的焦點狀態(tài)，由于SVG是一種XML格式描述的矢量圖形，自帶很多屬性可定制它的表現(xiàn)效果。在導航欄icon狀態(tài)的切換及收藏夾、喜愛、點贊等交互功能方面，可通過改變icon填充色的方式制造焦點，給用戶操作反饋。

SVG形變動畫可運用于icon的微交互，即通過SVG Morphing動畫（從一個形狀變到另一個形狀）切換icon圖形，實現(xiàn)有趣的動畫效果。如圖1所示的下拉刷新實例，在用戶的下拉過程中，箭頭將會變成一個彈性轉動的圓圈表示數(shù)據(jù)正在加載，加載完后變成對勾，表示加載完畢。此類應用避免了直接切換圖片，讓交互更加細膩流暢，向用戶傳遞該動作的狀態(tài)過程和反饋結果。

SVG矢量、易修改、支持多色的特性，推動了icon平臺的發(fā)展。Iconfont.cn是阿里巴巴體驗團隊打造的矢量圖標管理、交流平臺，功能強大且內(nèi)容十分豐富。眾多用戶把優(yōu)秀的icon設計共享在平臺，可由一個圖標，追溯至所屬作者及所屬圖標庫，便于找到相關風格配套圖標。平臺提供SVG、AI、PNG格式的icon下載，支持在線修改圖標顏色，并在改版后支持多色矢量圖標，在線可對多色圖標分路徑改色，保存下載歷史、顏色（記憶用戶選擇的圖標色彩，方便重復選擇）。多彩矢量圖標可以以svg格式直接在iOS和安卓平臺上支持，也可以直接在支持ie9+,及現(xiàn)代瀏覽器的網(wǎng)站上應用彩色圖標。

3.2 SVG動畫

圖2

SVG與現(xiàn)有技術可以互動融合，SVG 技術本身的動態(tài)部分（包括時序控制和動畫）基于 SMIL 標準。另外，SVG 文件還可嵌入 JavaScript腳本來控制SVG對象。

SMIL（同步多媒體集成語言）能利用 SVG 內(nèi)部元素的設置來驅動動畫，《網(wǎng)易云音樂陪你溫暖同行》（網(wǎng)易云音樂 2017年終總結）中就用到了 SVG 動畫。如圖2，由上至下分別為行星沿軌跡轉動，音符漸隱和花瓣飄落動畫，這三組動畫都是周期很長的循環(huán)動畫，其中動畫的頁面占比不小，需要保證一定的清晰度。如果按照傳統(tǒng)做法做成GIF或者PNG序列幀會體積龐大或播放卡頓，而如果使用SVG來實現(xiàn)，清晰流暢的動畫僅需要很小的體積，不用特意為流暢循環(huán)妥協(xié)播放效果。

使用SVG的路徑path標簽，配合strokedasharray和stroke-dashoffset 屬性，SVG可以簡單生成描邊動畫。在可視化H5制作工具iH5平臺，用戶無需編程基礎，根據(jù)上傳SVG圖形可自動生成“描繪出現(xiàn)”、“擦除消失”（即描邊動畫的正向與反向播放）等動畫效果，且可設置延時播放、描邊速度、描繪方向和描繪時長。

上文提到的Morphing動畫也可用于SVG圖片切換。SVG Morphing主要是對path元素中的d屬性的數(shù)據(jù)進行變化。iH5平臺提供了對SVG Morphing的支持，SVG圖片在SVG容器下可以制作變形動畫（SVG之間的切換的變形動畫效果）。并可以設置變形時長、逆時針、順時針等變形效果和線性、曲線等動畫類型。結合描邊動畫和Morphing動畫，可以實現(xiàn)一些頁面間絢麗的轉場和交互效果。

3.3 SVG與交互圖表

基于SVG矢量性和高兼容性的特征，SVG可動態(tài)生成縮放自如且具有交互功能的圖表，嵌入網(wǎng)頁中，并顯示給終端用戶。

來自百度EFE數(shù)據(jù)可視化團隊的ECharts，是一個使用 JavaScript 實現(xiàn)的開源可視化庫，底層依賴輕量級的矢量圖形庫ZRender，提供直觀，交互豐富，可高度個性化定制的數(shù)據(jù)可視化圖表。其支持以 Canvas、SVG（4.0+）、VML 的形式渲染圖表，其中SVG渲染可大幅降低移動端渲染的內(nèi)存占用。

SVG在GIS方面也得到了廣泛的應用。如幫助實現(xiàn)煤礦WebGIS在移動智能終端的可視化：在前端頁面顯示方面采用一張圖分層顯示設計思想。以不失真的SVG礦圖為靜態(tài)底圖，需要變化的元素采用HTML5中的Canvas實現(xiàn)動態(tài)繪圖，并且在不影響渲染結果的情況下優(yōu)化SVG代碼與頁面顯示速度。

4 發(fā)展趨勢

微信平臺在更新迭代中逐步優(yōu)化對SVG的支持，提升推文的圖文結合和視覺交互水平。在19年5月8日的版本更新中，通過將整個畫布內(nèi)容分配到圖庫中，為創(chuàng)意提供了新的可行空間。比如圖文內(nèi)二次進入SVG；形成沉浸式交互；將鏈接引用到中，制成前端開發(fā)常用的紋理設計等。可以看出微信團隊認可SVG交互圖文在行業(yè)內(nèi)的重要價值，并正在著力不斷優(yōu)化這類高端圖文的用戶體驗。

SVG是響應式網(wǎng)站發(fā)展的未來趨勢。著名開源代碼平臺github.com已全棧使用SVG，頁面中的圖片和icon可自適應各種分辨率大小，SVG圖形調(diào)整寬度時不需要刷新，符合響應式設計的需要。

現(xiàn)代瀏覽器對svg渲染的支持與優(yōu)化相當不錯，SVG幫助設計師從更多維度展現(xiàn)設計想法。在越來越注重視覺表達的互聯(lián)網(wǎng)時代，扁平化設計趨勢的流行和第三方動效庫的涌現(xiàn)，給SVG這種古老的圖形格式增添了新的生命力，相信SVG的前景一片光明，會成為未來界面設計的主流發(fā)展趨勢。

5 結語

SVG作為基于XML的文本化網(wǎng)絡矢量圖像格式，具有其他圖像格式所能無可比擬的優(yōu)勢和發(fā)展前景。本文總結了SVG的一些典型應用場景，列舉了iH5、Echarts、微信等平臺對SVG的創(chuàng)新型應用實例，討論了SVG對界面設計領域的推動作用。