騰訊ISUX

isux..com

社交用戶體驗(yàn)設(shè)計(jì)

使用SVG提高視覺設(shè)計(jì)的表現(xiàn)力，使設(shè)計(jì)更加豐富多彩。

前言

SVG 概述

隨著瀏覽器對矢量圖形的支持越來越好。 在過去三年的網(wǎng)頁設(shè)計(jì)中，我們可以發(fā)現(xiàn)矢量圖形，也就是SVG的應(yīng)用越來越廣泛，可以大大提高視覺設(shè)計(jì)的表現(xiàn)力和設(shè)計(jì)體驗(yàn)。 本文將談?wù)凷VG在網(wǎng)頁設(shè)計(jì)中的一些應(yīng)用場景，希望能給大家?guī)硪恍﹩l(fā)。

首先簡單介紹一下SVG：

SVG 代表可縮放矢量圖形 ( )。 它由萬維網(wǎng)聯(lián)盟 (W3C) 開發(fā)和維護(hù)。

SVG 相對于 Web 的其他圖像格式具有無可比擬的優(yōu)勢，尤其是現(xiàn)在，因?yàn)樗恍枰紤]屏幕比特率的問題。 無論您的新智能手機(jī)有多密集（以及您的幀速率有多高），矢量仍然會(huì)像新雪一樣清晰。

如今，無論是設(shè)計(jì)工具還是瀏覽器，對 SVG 的支持都越來越好，您可以放心使用，讓您的設(shè)計(jì)更加出彩。

例如，有強(qiáng)大的設(shè)計(jì)工具和Adobe。

瀏覽器也差不多是綠色的，其實(shí)這里指的是聯(lián)通終端。 PC端，還是要注意IE。

總結(jié) SVG 的一些優(yōu)點(diǎn)：

1.與碼率無關(guān)，完美顯示，一張圖適應(yīng)多種規(guī)格

2.強(qiáng)大的設(shè)計(jì)工具支持

3.交互方便，動(dòng)效編譯方便

圖標(biāo)應(yīng)用

ICON是SVG的典型應(yīng)用場景，因?yàn)槭窍蛄筷P(guān)系，所以不需要像以前那樣考慮裁剪各種倍數(shù)的圖片來適配高清設(shè)備，所有設(shè)備直接一張圖片就可以搞定。

下面的demo大家可以體驗(yàn)一下，只需要一張SVG，無論碼率多不正常，都可以完美高清顯示：

圖標(biāo)應(yīng)用

圖標(biāo)換膚

由于 SVG 是以 XML 格式描述的矢量圖形，它帶有許多屬性來定制其性能。 比如填充顏色，使用SVG可以很方便的改變圖形的填充顏色，對于一些需要改變的場景就派上用場了。 例如下面的演示：

掃描體驗(yàn)：

只需要改一行代碼，就可以隨心所欲地改變圖標(biāo)的??顏色。

圖標(biāo)應(yīng)用

ICON動(dòng)漫

所謂動(dòng)畫，就是同一個(gè)模型從一種形狀變成另一種形狀。 近三年來，這些微動(dòng)效果在網(wǎng)頁應(yīng)用中的使用越來越多，尤其是在一些按鈕的交互操作中。 比如播放器的按鈕交互使用了動(dòng)畫：

大家可以掃碼體驗(yàn)這些微動(dòng)畫，在一些按鈕的交互中使用，讓交互更加圓潤。 而不是像以前那樣直接切換圖片。

如何實(shí)現(xiàn)動(dòng)畫，敬請期待下一篇教程。

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

在網(wǎng)絡(luò)世界中，文字占據(jù)了重要的位置。 過去，文字通常通過不同的字體來增強(qiáng)其表現(xiàn)力和美感。

近三年來，隨著W3C標(biāo)準(zhǔn)的不斷發(fā)展，利用CSS和SVG的一些屬性，可以達(dá)到一些等設(shè)計(jì)軟件才能達(dá)到的療效。 下面說一下SVG在文本中的應(yīng)用。 其實(shí)使用CSS也可以達(dá)到一些療效。

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

漸變文字效果

漸變文字，故名思義，就是用漸變色來填充文字。 本來，這些詞的療效只能等待設(shè)計(jì)工具來實(shí)現(xiàn)，太過局限和不靈活。 如果你用SVG，你可以很靈活的使用它，而且用一段代碼就可以搞定（現(xiàn)在你也可以用CSS來使用這個(gè)效果）。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1200 400">  <title>Applying a gradient background to text in SVGtitle> -->  <defs>   <linearGradient id = "filler" x = "0%" y = "100%">    <stop stop-color = "olivedrab" offset = "0%"/>    <stop stop-color = "peru" offset = "20%"/>    <stop stop-color = "goldenrod" offset = "40%"/>    <stop stop-color = "firebrick" offset = "60%"/>    <stop stop-color = "thistle" offset = "80%"/>    <stop stop-color = "sandybrown" offset = "100%"/>   linearGradient>  defs> <text x="100" y="70%" font-size="205" fill="url(#filler)">ISUX Designtext>svg>

只需幾行代碼就可以實(shí)現(xiàn)漸變文字的效果，并且可以自定義文字。

掃描體驗(yàn)：

這里不僅可以填充漸變，還可以用圖片填充文字，達(dá)到你想要的文字效果。

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

動(dòng)態(tài)文字療效

不僅可以用顏色填充，還可以用視頻或者gif動(dòng)圖來填充文字，充分發(fā)揮你的想象力，實(shí)現(xiàn)各種腦洞大開的文字效果。

比如下面這個(gè)燃燒文字的療效就是用gif圖片填充的。

里面是gif圖片填充的動(dòng)態(tài)效果，也可以用視頻填充文字實(shí)現(xiàn)動(dòng)態(tài)效果。 掃碼體驗(yàn)：

SVG遮罩的應(yīng)用

Mask 仍然是各種設(shè)計(jì)工具中的一個(gè)強(qiáng)大工具，利用它可以實(shí)現(xiàn)各種特殊的圖形效果。 以往，為了在網(wǎng)頁上實(shí)現(xiàn)特殊的圖形效果，設(shè)計(jì)師只能先設(shè)計(jì)出效果，然后再裁剪圖片，用圖片在網(wǎng)頁上實(shí)現(xiàn)。

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

以前只能通過切圖來實(shí)現(xiàn)，現(xiàn)在只需要幾行代碼就可以實(shí)現(xiàn)。

SVG蒙版應(yīng)用

動(dòng)態(tài)文字療效

同樣的遮罩也可以應(yīng)用在文字上，實(shí)現(xiàn)一些鏤空透明的文字視覺效果：

掃描體驗(yàn)：

不僅可以實(shí)現(xiàn)一些靜態(tài)的特殊畫面效果，還可以通過圖層和其他元素實(shí)現(xiàn)一些動(dòng)畫效果。

SVG蒙版應(yīng)用

面具動(dòng)漫效果

在 SVG 蒙版的幫助下sketch視覺設(shè)計(jì)教程，我們可以創(chuàng)建一個(gè)類似霓虹燈的文本動(dòng)畫效果，如下所示。

掃描體驗(yàn)：

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

具體療效可以去這里體驗(yàn)↓↓↓

使用層來實(shí)現(xiàn)聚光燈的動(dòng)畫效果也很簡單，如下圖：

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

動(dòng)畫也是SVG的一個(gè)典型應(yīng)用，尤其是近三年用的比較多。 讓我們來看看SVG動(dòng)畫的一些應(yīng)用。

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

面具動(dòng)漫

什么是面具動(dòng)畫？ 只要看看圖片，你就會(huì)知道。

看完圖片是不是覺得似曾相識(shí)？ 這些使用 SVG 實(shí)現(xiàn)的蒙版動(dòng)畫在過去三年中在網(wǎng)絡(luò)上流行起來。 您可以隨時(shí)隨地聽到它的使用，并以各種方式使用它。

比如常見的窗體也可以使用遮罩動(dòng)畫來實(shí)現(xiàn)有趣的交互動(dòng)畫效果：

這些面具動(dòng)畫使用SVG實(shí)現(xiàn)成本非常低，基本上只需要設(shè)計(jì)者導(dǎo)入矢量圖形的SVG格式并添加幾行代碼就可以輕松實(shí)現(xiàn)。

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

卡通片

動(dòng)畫的icon部分已經(jīng)介紹過了，icon的使用只是小試一下。 它的好處遠(yuǎn)不止于此。 例如：

使用SVG，實(shí)現(xiàn)這樣的變形動(dòng)畫是非常容易和簡單的。 剩下的就看你的想象了。

比如我要做蘋果產(chǎn)品之間的進(jìn)化，我可以用SVG來實(shí)現(xiàn)產(chǎn)品之間進(jìn)化的動(dòng)畫。 掃碼體驗(yàn)：

使用SVG，您可以充分發(fā)揮您的想象力，實(shí)現(xiàn)各種有趣的動(dòng)畫。

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

過渡動(dòng)畫

結(jié)合上面提到的動(dòng)畫和遮罩動(dòng)畫，我們可以實(shí)現(xiàn)一些很酷的轉(zhuǎn)場動(dòng)畫，即不同頁面之間的轉(zhuǎn)場效果。

或以下之一：

體驗(yàn)地址↓↓↓

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

過濾動(dòng)漫

說到SVG動(dòng)畫，就不得不提SVG濾鏡動(dòng)畫。 使用 SVG 濾鏡，我們可以實(shí)現(xiàn)一些特別強(qiáng)大的動(dòng)畫效果。

例如，使用 SVG 過濾器可以輕松實(shí)現(xiàn)類似于右側(cè)所示的粘性效果：

或者這些炫目的圖片動(dòng)態(tài)效果也可以通過使用SVG濾鏡輕松實(shí)現(xiàn)：

下面是一些常見的應(yīng)用。 只要發(fā)揮你的想象力，善用SVG濾鏡，你就可以實(shí)現(xiàn)更有趣的動(dòng)畫效果。 您可以查看文章旁邊的參考鏈接以尋找靈感。

總結(jié)

隨著瀏覽器對Web標(biāo)準(zhǔn)的支持越來越好，你現(xiàn)在可以放心大膽地使用SVG了。 本文總結(jié)了SVG的一些典型應(yīng)用場景，如圖標(biāo)、文字效果、動(dòng)畫應(yīng)用等。 當(dāng)你在做視覺設(shè)計(jì)或者一些動(dòng)畫設(shè)計(jì)的時(shí)候，可以結(jié)合具體項(xiàng)目的特點(diǎn)應(yīng)用SVG，也可以翻閱這篇文章尋找靈感。

大家還有什么SVG的玩法sketch視覺設(shè)計(jì)教程，可以在評(píng)論區(qū)留言一起討論。 如有疏忽或不理解之處，還請多多指教！

參考：

您可能還對以下 ISUX 文章感興趣

▽

如有侵權(quán)請聯(lián)系刪除！