SVG概述

隨著瀏覽器對矢量圖形的支持越來越好。在這兩年的 web設(shè)計中，可以發(fā)現(xiàn)矢量圖形即 SVG 應(yīng)用的越來越廣泛，使用 SVG 可以大大地提升視覺設(shè)計的表現(xiàn)力和設(shè)計體驗。

這篇文章就來講講 SVG 在 web設(shè)計中的一些應(yīng)用場景，希望可以給大家?guī)硪恍╈`感。

SVG 意為可縮放矢量圖形（Scalable Vector Graphics）。它是由萬維網(wǎng)聯(lián)盟（W3C）開發(fā)并進行維護的。

SVG 對于 Web 來說有著其它圖片格式無可比擬的優(yōu)勢，尤其是現(xiàn)在，因為它不必考慮屏幕分辨率的問題。不論你新入手的智能手機的像素如何密集（分辨率有多高），矢量始終顯示得如同剛下的雪一樣清晰。

時至今日，無論是設(shè)計工具還是瀏覽器對 SVG 的支持越來越好，可以放心大膽地使用它來使設(shè)計更出彩。

比如設(shè)計工具就有強大的 Sketch 和 Adobe Illustrator。

瀏覽器幾乎也是一片綠的，當(dāng)然這里指的移動端。PC端的話，還是要注意下 IE。

總結(jié)下 SVG 的一些優(yōu)勢：

• 跟分辨率無關(guān)，完美顯示，一圖可以適配各種尺寸；
• 強大的設(shè)計工具支持；
• 方便交互，方便編寫動效。

ICON應(yīng)用

ICON 是 SVG 的一個典型應(yīng)用場景，由于它是矢量圖形的關(guān)系，所以不需要考慮像以前一樣要切各種倍數(shù)的圖來適配高清設(shè)備，直接一張圖就可以搞定所有的設(shè)備。

可以體驗下下面這個 demo，只需要一個 SVG，無論多么變態(tài)的分辨率都可以完美地高清顯示：

1. icon換膚

由于 SVG 是一種 XML格式來描述的矢量圖形，自帶了很多的屬性來定制它的表現(xiàn)。比如填充顏色，使用 SVG 可以很方便改變圖形的填充顏色，這對于一些需要換膚的場景就派上用場了。比如下面這個demo：

掃碼體驗：

僅僅只需要改變一句代碼，就可以隨心所欲地改變icon的顏色。

2. ICON Morphing動畫

所謂 Morphing 動畫是表示，同一個模型，從一個形狀變到另一個形狀。這兩年來，這種微動效在 web 應(yīng)用的越來越多，特別是一些按鈕的交互操作上，比如 youtube 上播放器的按鈕交互就使用了 morphing 動畫：

可以掃碼來感受下這種微動畫，使用在一些按鈕的交互上，可以使交互更加細膩。而不是像以前那樣硬生生的直接切換圖片。

具體怎么實現(xiàn) morphing 動畫，敬請期待后面的教程。

SVG在文字中的應(yīng)用

在web世界中，文字占據(jù)了一個重要的位置。在之前，文字一般是通過不同的字體來提高它的表現(xiàn)力和美感。

最近這兩年隨著 W3C標準不斷地發(fā)展，通過 CSS 和 SVG 的一些屬性，可以實現(xiàn)以前只能靠 Photoshop 等設(shè)計軟件才能實現(xiàn)的效果。下面就來說說 SVG 在文字中的應(yīng)用，當(dāng)然有些效果使用 CSS 也能實現(xiàn)。

1. 漸變文字效果

漸變文字，顧名思義就是使用漸變的顏色來填充文字。以前這種文字的效果只能靠 photoshop 等設(shè)計工具來實現(xiàn)，限制大，不靈活。而使用 SVG 的話，則可以非常的靈活使用它，一句代碼就可以搞定（現(xiàn)在使用CSS也可以使用這個效果）。

簡單幾行代碼就可以搞定漸變文字的效果，文字可以自定義。

掃碼體驗：

這里不只是可以填充漸變，也可以使用圖片來填充文字，來實現(xiàn)你想要的文字效果。

2. 動態(tài)文字效果

除了顏色的填充，還可以使用視頻或者是 gif動圖來填充文字，可以實現(xiàn)各種腦洞大開的文字效果。

比如下面這個火焰在燃燒的文字效果，就是使用 gif圖來填充的。

上面是 gif圖填充的動態(tài)效果，同樣可以使用視頻來填充文字實現(xiàn)動態(tài)效果。掃碼來體驗下：

SVG蒙版的應(yīng)用

蒙版，一直是各種設(shè)計工具中一個強大的功能，利用它可以實現(xiàn)各種特殊的圖形效果。以前，要想在 web 中實現(xiàn)特殊的圖形效果，只能靠設(shè)計師先設(shè)計好效果，然后切圖利用圖片在網(wǎng)頁中實現(xiàn)。

而使用 SVG 中的蒙版屬性則可以輕松實現(xiàn)各種各樣的特殊圖形效果。比如下面這樣的圖形效果：

以前只能靠切圖來實現(xiàn)，而現(xiàn)在也只需要幾行代碼就可以實現(xiàn)。

1. SVG鏤空文字效果

同樣蒙版也可以應(yīng)用到文字中，來實現(xiàn)一些鏤空透明的文字視覺效果：

掃碼體驗：

除了實現(xiàn)一些靜態(tài)的特殊圖片效果，使用蒙版配合其它的元素還可以實現(xiàn)一些動畫效果。

2. 蒙版動畫效果

利用SVG蒙版，我們可以制作下面這樣類似霓虹燈的文字動畫效果。

掃碼體驗：

還可以結(jié)合視頻實現(xiàn)特殊形狀的動態(tài)效果：

具體效果可以去這里體驗：http://dspolitical.com/

使用蒙版實現(xiàn)下面這樣的聚光燈的動畫效果，也非常簡單：

SVG動畫應(yīng)用

動畫也是 SVG 的一個典型應(yīng)用，特別是最近這兩年，應(yīng)用的特別多。下面就來看看 SVG 動畫的一些應(yīng)用。

1. 描邊動畫

描邊動畫是什么，看個圖就知道了。

看完圖是不是感覺熟悉，這種使用 SVG 來實現(xiàn)的描邊動畫，這兩年在 web 上大行其道。隨時隨地都可以看見它的使用，以及變著各種法子來使用。

比如常見的表單也可以使用描邊動畫來實現(xiàn)有趣的交互動畫效果：

這種描邊動畫使用SVG來實現(xiàn)成本極低，基本上只需要設(shè)計師是導(dǎo)出矢量圖形的 SVG 格式再加上幾句代碼就可以輕松實現(xiàn)。

2. Morphing動畫

morphing 動畫在上面 icon 那部分已經(jīng)介紹過了，在 icon 上使用只是小試牛刀。它的用處遠不止如此。比如：

有了 SVG，實現(xiàn)這樣的形變動畫，都變得非常的輕松簡單。剩下的就是你的想象力了。

比如，我想做蘋果公司產(chǎn)品之間的一個演變，就可以使用 SVG 來實現(xiàn)產(chǎn)品之間的演變的動畫，掃碼體驗下：

借助SVG，可以充分發(fā)揮腦洞，來實現(xiàn)各種有意思的 morphing動畫。

3. 轉(zhuǎn)場動畫

結(jié)合上面說的 morphing動畫和描邊動畫，我們可以實現(xiàn)一些酷炫的轉(zhuǎn)場動畫，即不同頁面之間的轉(zhuǎn)場效果。

或者是下面這種：

體驗地址：https://lmgonzalves.github.io/splash-transition/

4. 濾鏡動畫

說到 SVG動畫，那 SVG濾鏡動畫是不得不提的了，使用 SVG 的濾鏡，我們可以實現(xiàn)一些非常強大的動畫效果。

比如，類似下圖所示的 gooey效果，使用 SVG 濾鏡就可以輕松實現(xiàn)：

或者是這種炫酷的圖片動效，使用 SVG 濾鏡輕輕松松可以實現(xiàn)：

這里也是舉了些常見的應(yīng)用，只要發(fā)揮想象力，用好 SVG 濾鏡，可以實現(xiàn)更多有趣的動畫效果。

總結(jié)

隨著瀏覽器對 web標準支持的越來越好，現(xiàn)在完全可以放心大膽的使用 SVG。本文總結(jié)一些 SVG典型的應(yīng)用場景，比如icon、文字效果以及動畫等應(yīng)用。大家在進行視覺設(shè)計或者一些動畫設(shè)計的時候，可以結(jié)合具體項目的特點來應(yīng)用 SVG，也可以翻翻本文，來找找靈感。

歡迎關(guān)注「騰訊ISUX」的公眾號：