漲姿勢！騰訊設計師夸上天的SVG 都有哪些酷炫的玩法？

SVG概述

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

這篇文章就來講講 SVG 在 web設計中的一些應用場景，希望可以給大家帶來一些靈感。

SVG 意為可縮放矢量圖形（Scalable Vector Graphics）。它是由萬維網聯盟（W3C）開發并進行維護的。

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

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

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

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

總結下 SVG 的一些優勢：

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

ICON應用

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

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

1. icon換膚

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

掃碼體驗：

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

2. ICON Morphing動畫

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

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

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

SVG在文字中的應用

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

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

1. 漸變文字效果

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

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

掃碼體驗：

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

2. 動態文字效果

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

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

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

SVG蒙版的應用

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

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

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

1. SVG鏤空文字效果

同樣蒙版也可以應用到文字中，來實現一些鏤空透明的文字視覺效果：

掃碼體驗：

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

2. 蒙版動畫效果

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

掃碼體驗：

還可以結合視頻實現特殊形狀的動態效果：

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

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

SVG動畫應用

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

1. 描邊動畫

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

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

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

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

2. Morphing動畫

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

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

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

借助SVG，可以充分發揮腦洞，來實現各種有意思的 morphing動畫。

3. 轉場動畫

結合上面說的 morphing動畫和描邊動畫，我們可以實現一些酷炫的轉場動畫，即不同頁面之間的轉場效果。

或者是下面這種：

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

4. 濾鏡動畫

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

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

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

這里也是舉了些常見的應用，只要發揮想象力，用好 SVG 濾鏡，可以實現更多有趣的動畫效果。

總結

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

歡迎關注「騰訊ISUX」的公眾號：