潘博

（河源職業(yè)技術(shù)學(xué)院，廣東 河源517000）

圖形圖像作為Web 設(shè)計(jì)的主要內(nèi)容，在吸引用戶點(diǎn)擊、提升用戶體驗(yàn)方面發(fā)揮著重要作用。隨著信息技術(shù)的飛速發(fā)展，以及設(shè)計(jì)人員對(duì)Web 產(chǎn)品用戶體驗(yàn)的極致追求，傳統(tǒng)的圖像技術(shù)因其本身的特點(diǎn)，暴露了一些問(wèn)題，如圖像數(shù)據(jù)量大，占用網(wǎng)絡(luò)帶寬資源較大、傳輸速度慢，圖片在不同設(shè)備上的顯示效果有偏差，瀏覽器不支持矢量圖形等。于是一種可縮放矢量圖形SVG 漸漸在網(wǎng)絡(luò)上流行起來(lái)，其矢量化、兼容性好、代碼簡(jiǎn)潔、可做動(dòng)態(tài)效果等特點(diǎn)成為很多UI 設(shè)計(jì)師和前端設(shè)計(jì)師的選擇。

1 SVG 優(yōu)點(diǎn)介紹

圖1 同一SVG 圖形不同寬高尺寸的圖標(biāo)

SVG 是Scalable Vector Graphics 的縮寫(xiě)，中文全稱為“可伸縮矢量圖形”，它是W3C（World Wide Web Consortium 即萬(wàn)維網(wǎng)聯(lián)盟）組織為適應(yīng)互聯(lián)網(wǎng)Web 應(yīng)用的飛速發(fā)展需要而制定的一套基于XML 語(yǔ)言的可縮放矢量圖形語(yǔ)言描述規(guī)范。[1]SVG 嚴(yán)格遵從XML 語(yǔ)法，并用文本格式的描述性語(yǔ)言來(lái)描述圖像內(nèi)容，是一種和圖像分辨率無(wú)關(guān)的矢量圖形格式。

與其它Web 圖像格式相比，SVG 具有如下優(yōu)勢(shì)：

SVG 是矢量圖形，不必考慮屏幕分辨率，在放大或改變尺寸的情況下其圖形質(zhì)量不會(huì)有所損失。而常見(jiàn)的JPG、PNG、Gif等格式圖像是由像素點(diǎn)構(gòu)成的位圖，縮放會(huì)有質(zhì)量損失。SVG體積小，可壓縮性更強(qiáng)，提供了一個(gè)相對(duì)輕量級(jí)的文件，大大提高了圖像的傳輸和下載顯示速率。SVG 具有豐富的表現(xiàn)效果，可以是動(dòng)態(tài)的、可交互性的，可提升用戶體驗(yàn)。SVG 是開(kāi)放的，它基于XML，可被非常多的工具讀取和修改（比如記事本），通過(guò)文本修改，可以即時(shí)改變對(duì)象顏色、調(diào)整描邊寬度、圖像透明度等，還可以使用濾鏡，自身帶有動(dòng)畫(huà)屬性。[2]SVG 能獲得更廣泛的設(shè)計(jì)軟件和硬件支持，跨平臺(tái)，與瀏覽器的兼容性好，幾乎所有主流的瀏覽器不需要插件都可以直接打開(kāi)SVG 文件。

2 SVG 在Web 設(shè)計(jì)中的應(yīng)用

SVG 因其擁有的特點(diǎn)和優(yōu)勢(shì)，在互聯(lián)網(wǎng)特別是移動(dòng)端的應(yīng)用越來(lái)越多，下面逐一進(jìn)行分析。

2.1 SVG 在Web 圖標(biāo)中的應(yīng)用

圖標(biāo)是SVG 一個(gè)典型的應(yīng)用場(chǎng)景。傳統(tǒng)的圖標(biāo)是位圖，需要切成不同大小的圖片來(lái)適配不同設(shè)備的分辨率。而SVG 因?yàn)槭鞘噶繄D形可任意縮放不失真，所以只需一張圖就可以適配所有設(shè)備。[3]如圖1 所示將Illustrator 繪制的矢量圖標(biāo)導(dǎo)出為SVG格式，然后用文本類編輯器打開(kāi)，將SVG 代碼復(fù)制后修改width和height 值，然后保存為html 或嵌入html 中，可得到不同大小且完美顯示的圖標(biāo)。此外SVG 在圖標(biāo)顏色動(dòng)態(tài)變化以及Morphing 動(dòng)畫(huà)（形狀動(dòng)畫(huà)）中也有應(yīng)用。

2.2 SVG 在Web 文字效果中的應(yīng)用

圖2 使用SVG 實(shí)現(xiàn)的漸變文字

在Web 設(shè)計(jì)中文字呈現(xiàn)是非常重要的。文字一般是通過(guò)不同的字體來(lái)提高它的表現(xiàn)力和美感，要添加一些效果則需要靠Photoshop 等設(shè)計(jì)軟件才能實(shí)現(xiàn)。而隨著W3C 標(biāo)準(zhǔn)不斷地發(fā)展，使用SVG 也能實(shí)現(xiàn)一些炫麗的文字特效，達(dá)到文字圖片化的效果。如圖2 所示用漸變的顏色來(lái)填充文字，如果用傳統(tǒng)圖像來(lái)實(shí)現(xiàn)，限制大不靈活。而使用SVG 的話，一句代碼就可以完成，且使用起來(lái)非常靈活。代碼如下：

除了使用顏色填充，還可以使用圖像、Gif 動(dòng)圖甚至視頻來(lái)填充文字，實(shí)現(xiàn)各種腦洞大開(kāi)的文字效果，如圖使用一個(gè)Gif 動(dòng)圖呈現(xiàn)動(dòng)態(tài)火焰字。

圖3 SVG 實(shí)現(xiàn)的火焰字

2.3 SVG 在圖形蒙版中的應(yīng)用

蒙版可以實(shí)現(xiàn)各種特殊的圖像合成效果，一般需要借助于各類專業(yè)的設(shè)計(jì)工具，先設(shè)計(jì)好效果，然后切圖利用圖片在網(wǎng)頁(yè)中實(shí)現(xiàn)。而使用SVG 中的蒙版屬性則可以輕松實(shí)現(xiàn)各種各樣的特殊圖形效果。如圖4 這樣的圖形效果，就是先呈現(xiàn)藍(lán)色和花朵兩個(gè)圖層，然后在藍(lán)色圖層上添加了一個(gè)文字形狀的mask，代碼如下。如果將SVG 蒙版與動(dòng)畫(huà)結(jié)合起來(lái)，可以制作不亞于flash 的蒙版動(dòng)畫(huà)效果。

圖5 使用SVG 圖形實(shí)現(xiàn)的描邊動(dòng)畫(huà)

圖4 SVG 實(shí)現(xiàn)的蒙版效果

2.4 SVG 在Web 動(dòng)畫(huà)中的應(yīng)用

SVG 在Web 動(dòng)畫(huà)設(shè)計(jì)也是一個(gè)典型應(yīng)用，在UI 動(dòng)效中比較常見(jiàn)，如描邊動(dòng)畫(huà)、形變動(dòng)畫(huà)、轉(zhuǎn)場(chǎng)動(dòng)畫(huà)、濾鏡動(dòng)畫(huà)等，限制效果的只剩下想象力。以描邊動(dòng)畫(huà)為例，使用SVG 來(lái)實(shí)現(xiàn)成本很低，只需要設(shè)計(jì)師繪制基本圖形，導(dǎo)出矢量圖形的SVG 格式，再加上幾句代碼就可以輕松實(shí)現(xiàn)。實(shí)現(xiàn)的途徑一是使用CSS，二是使用JavaScript，甚至有專門(mén)制作這種描邊動(dòng)畫(huà)的JS 庫(kù)，如圖5 即為使用JS 庫(kù)vivus 給SVG 圖形添加的一個(gè)描邊動(dòng)畫(huà)。

3 結(jié)論

隨著Web 設(shè)計(jì)中對(duì)用戶體驗(yàn)的不斷增強(qiáng)，瀏覽器對(duì)Web 標(biāo)準(zhǔn)支持的越來(lái)越好，SVG 圖形必然會(huì)得到越來(lái)越多的應(yīng)用。本文研究并歸納了一些SVG 典型的應(yīng)用場(chǎng)景，比如圖標(biāo)、文字效果以及動(dòng)畫(huà)等應(yīng)用。在進(jìn)行視覺(jué)設(shè)計(jì)或Web 設(shè)計(jì)的時(shí)候，可以結(jié)合具體項(xiàng)目的特點(diǎn)來(lái)應(yīng)用SVG，使其成為Web 設(shè)計(jì)中圖形應(yīng)用的一種選擇。