SVG概述

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

這篇文章就來(lái)講講 SVG 在 web設(shè)計(jì)中的一些應(yīng)用場(chǎng)景，希望可以給大家?guī)?lái)一些靈感。

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

SVG 對(duì)于 Web 來(lái)說(shuō)有著其它圖片格式無(wú)可比擬的優(yōu)勢(shì)，尤其是現(xiàn)在，因?yàn)樗槐乜紤]屏幕分辨率的問(wèn)題。不論你新入手的智能手機(jī)的像素如何密集（分辨率有多高），矢量始終顯示得如同剛下的雪一樣清晰。

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

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

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

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

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

SVG在icon中的應(yīng)用

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

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

1. icon換膚

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

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

2. ICON Morphing動(dòng)畫

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

可以掃碼來(lái)感受下這種微動(dòng)畫，使用在一些按鈕的交互上，可以使交互更加細(xì)膩。而不是像以前那樣硬生生的直接切換圖片。具體怎么實(shí)現(xiàn) morphing 動(dòng)畫，敬請(qǐng)期待后面的教程。

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

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

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

1. 漸變文字效果

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

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

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

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

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

比如下面這個(gè)火焰在燃燒的文字效果，就是使用 gif圖來(lái)填充的。

上面是 gif圖填充的動(dòng)態(tài)效果，同樣可以使用視頻來(lái)填充文字實(shí)現(xiàn)動(dòng)態(tài)效果。

SVG蒙版的應(yīng)用

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

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

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

1. SVG鏤空文字效果

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

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

2. 蒙版動(dòng)畫效果

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

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

具體效果可以去這里體驗(yàn)：http://dspolitical.com/

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

SVG動(dòng)畫應(yīng)用

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

1. 描邊動(dòng)畫

描邊動(dòng)畫是什么，看個(gè)圖就知道了。

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

比如常見(jiàn)的表單也可以使用描邊動(dòng)畫來(lái)實(shí)現(xiàn)有趣的交互動(dòng)畫效果：

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

2. Morphing動(dòng)畫

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

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

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

3. 轉(zhuǎn)場(chǎng)動(dòng)畫

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

或者是下面這種：

體驗(yàn)地址：https://lmgonzalves.github.io/splash-transition/

4. 濾鏡動(dòng)畫

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

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

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

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

總結(jié)

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

原文作者：公眾號(hào)「騰訊ISUX」