SVG 圖形在Web 設計中的應用研究

潘博

（河源職業技術學院，廣東 河源517000）

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

1 SVG 優點介紹

圖1 同一SVG 圖形不同寬高尺寸的圖標

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

與其它Web 圖像格式相比，SVG 具有如下優勢：

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

2 SVG 在Web 設計中的應用

SVG 因其擁有的特點和優勢，在互聯網特別是移動端的應用越來越多，下面逐一進行分析。

2.1 SVG 在Web 圖標中的應用

圖標是SVG 一個典型的應用場景。傳統的圖標是位圖，需要切成不同大小的圖片來適配不同設備的分辨率。而SVG 因為是矢量圖形可任意縮放不失真，所以只需一張圖就可以適配所有設備。[3]如圖1 所示將Illustrator 繪制的矢量圖標導出為SVG格式，然后用文本類編輯器打開，將SVG 代碼復制后修改width和height 值，然后保存為html 或嵌入html 中，可得到不同大小且完美顯示的圖標。此外SVG 在圖標顏色動態變化以及Morphing 動畫（形狀動畫）中也有應用。

2.2 SVG 在Web 文字效果中的應用

圖2 使用SVG 實現的漸變文字

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

除了使用顏色填充，還可以使用圖像、Gif 動圖甚至視頻來填充文字，實現各種腦洞大開的文字效果，如圖使用一個Gif 動圖呈現動態火焰字。

圖3 SVG 實現的火焰字

2.3 SVG 在圖形蒙版中的應用

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

圖5 使用SVG 圖形實現的描邊動畫

圖4 SVG 實現的蒙版效果

2.4 SVG 在Web 動畫中的應用

SVG 在Web 動畫設計也是一個典型應用，在UI 動效中比較常見，如描邊動畫、形變動畫、轉場動畫、濾鏡動畫等，限制效果的只剩下想象力。以描邊動畫為例，使用SVG 來實現成本很低，只需要設計師繪制基本圖形，導出矢量圖形的SVG 格式，再加上幾句代碼就可以輕松實現。實現的途徑一是使用CSS，二是使用JavaScript，甚至有專門制作這種描邊動畫的JS 庫，如圖5 即為使用JS 庫vivus 給SVG 圖形添加的一個描邊動畫。

3 結論

隨著Web 設計中對用戶體驗的不斷增強，瀏覽器對Web 標準支持的越來越好，SVG 圖形必然會得到越來越多的應用。本文研究并歸納了一些SVG 典型的應用場景，比如圖標、文字效果以及動畫等應用。在進行視覺設計或Web 設計的時候，可以結合具體項目的特點來應用SVG，使其成為Web 設計中圖形應用的一種選擇。