使用SVG中的Symbol元素制作Icon

前言

隨着大屏幕分辨率的普及以及各種移動設備層出不窮的移動互聯網時代的到來，我們在網站設計時更應該關心內容在各種設備上的閱讀性和顯示效果。我們都希望能在任何時間，任何設備上都能清楚的，高效的傳遞信息給用戶。

而隨着各種高清視網膜屏幕的出現，現在web設計也需要考慮各種高清屏幕的顯示效果，同樣前端在代碼實現的時候也需要根據屏幕的不同來輸出不同分辨率的圖片。為了使我們的網頁能夠適配視網膜屏幕上的高分辨率，在前端開發中一般需要准備兩套不同尺寸的圖片來應對，一套在普通屏幕上顯示；一套在高清屏幕上顯示。

為了解決屏幕分辨率對圖標影響的問題，字體圖標即icon font順勢而生。字體圖標是一種全新的設計方式。更重要的是相比圖片而言，使用字體來制作圖標可以不受於屏幕分辨率的影響，這對於現在各種分辨率屏幕的移動互聯網時代，比起用圖片來說確實有很大的優勢。所以現在在web開發中，使用字體來制作icon應用的也越來越多。

難道我們只有這一種選擇么？No，追根溯源，其實字體圖標也是一種基於矢量圖形的一種技術封裝而已。這篇文章我們就來看看使用正宗的矢量圖形SVG來制作icon的應用，看過之后相信你會有一種“拈花微笑,飛葉傷人”的感覺。

SVG優勢

隨着高清屏幕的普及，相比使用png等位圖而言，使用SVG等矢量圖形是一種全新的設計方式。更重要的是相比位圖而言，SVG有着無可比擬的優勢。這里我總結一下SVG具體的一些優勢：

1. SVG是矢量圖形文件，可以隨意改變大小，而不影響圖標質量。
2. 可以用CSS樣式來自由定義圖標顏色，比如顏色/尺寸等效果。
3. 所有的SVG可以全部在一個文件中，節省HTTP請求 。
4. 使用SMIL、CSS或者是javascript可以制作充滿靈性的交互動畫效果。
5. 由於SVG也是一種XML節點的文件，所以可以使用gzip的方式把文件壓縮到很小。

其中使用SVG來制作動畫更是令人神往，由於SVG是一種類似DOM節點組成的文本文檔，所以我們可以很精細的控制SVG圖形的每一個部分，並且可以使用CSS3或者是javascript來制作動畫效果。下面我們就來看一個使用SVG制作的動畫，如下圖所示：

想看它在web上的真實效果么，請掃描下面的二維碼：

 

開始之前，可以先下載基本的html和svg代碼，下載地址

使用方法

在web開發中，SVG主要有下面幾種使用方法：

1. 使用img和object標簽直接引用svg。這種方法的缺點主要在於要求每個圖標都單獨保存成一個SVG文件，使用時也是單獨請求的，增加了HTTP請求。
2. Inline SVG，直接把SVG寫入 HTML 中，這種方法簡單直接，而且具有非常好的可調性。Inline SVG 作為HTML文檔的一部分，不需要單獨請求。臨時需要修改某個圖標的形狀也比較方便。但是Inline SVG使用上比較繁瑣，需要在頁面中插入一大塊SVG代碼不適合手寫，圖標復用起來也比較麻煩。
3. SVG Sprite。這里所說的Sprite技術，沒錯，類似於CSS中的Sprite技術。圖標圖形整合在一起，實際呈現的時候准確顯示特定圖標。其實基礎的SVG Sprite也只是將原來的位圖改成了SVG而已。
4.  最后就是本文的主角啦。使用svg中的<symbol>元素來制作icon。

現在，我們着重介紹的是使用svg中的<symbol>元素來制作icon，在上面說到的SVG Sprite中，我們需要使用相對位置來控制哪個圖標被顯示出來，但是SVG本身的定義是允許你可以使用<use>的方式直接引用SVG中的某一部分。

那么<symbol>元素是什么呢？按字面意思的話是符號的意思，如果把一個SVG文件比喻成一個書櫃的話，那么<symbol>則就表示書櫃中一本本不同類別的書籍。這些一本本不同類別的書本就是我們要使用的<symbol>圖標。

下面的代碼就是將多個SVG圖標整合成一個SVG文件之后的樣子，可以看到代碼中有不同類別的<symbol>元素，它們就是我們要引用的圖標：

每個Symbol設置一個id作為引用時的名字。使用id引用這個SVG中的Icon有兩種方法。

第一種，將上述SVG作為body的第一個元素插入在HTML中， 此后，在需要顯示某個 Icon 的地方插入下面的代碼即可：

第二種是，是使用完整路徑引用Icon。 也就是：

這種方法不需要像Sprite那樣繁瑣的設置圖片的位移。使用id命名圖標並使用時直接使用id引用既直觀又簡單。

自動化合並工具

問題來啦，如果碰到很多的圖標，難道我們都要手動去合並為一個SVG嗎？當然不用。

這里介紹一個專門用於處理SVG Symbols用的glup插件gulp-svg-symbols。

下面我們就來以一個實例一步一步來使用下這個插件。

首先新建一個文件夾，目錄結構如下圖所示：

svg文件夾是用來存放svg格式文件的。

當然首先是你得有glup環境，至於glup環境的安裝這里就不再闡述了，詳細的安裝使用教程可以去這篇文章看看。

然后在你的項目目錄下運行下面的命令安裝插件：

最后在你的項目目錄新建一個**gulpfile.js**文件，寫入下面的代碼：

ok。基本的環境搭好啦，正所謂，巧婦難為無米之炊。上哪找svg圖標去呢？ 這里推薦去icomoon.io 這個專門提供矢量圖標網站下載矢量圖像，重要的是它提供SVG格式的圖形下載。

我們這里就以icomoon.io為例，首先是點擊你需要下載的圖形，選中它，然后點擊下載按鈕：

點擊下載svg：

然后按照我們上面的配置文件，我們把下載好的svg圖標放到svg文件夾中。

一切准備就緒，在你的項目目錄中，運行gulp sprites命令：

運行命令之后，它會在你的目錄中生成一個svg文件，用你常用的代碼編輯器打開svg文件，可以看到svg圖標都被合並到一個文件中。並且根據對應SVG文件的名稱生成了ID，如下圖所示：

那怎么使用呢它們呢？直接在html文件中使用，並且可以直接使用css來定義寬高、填充顏色等屬性。如下代碼所示：

不過由於瀏覽器安全策略限制的原因，我們不能在本地直接打開html文件來預覽我們引用的svg文件，需要以服務器的形式來打開，用gulp也很容易搞定一個簡單的服務器環境。首先我們需要安裝gulp-connect這個模塊，運行下面的命令：

然后修改下gulpfile.js文件中的配置項：

運行gulp webserver命令，打開localhost:8080，就可以看到我們引入的svg圖標了：

 

源代碼下載

為了更能直接體現使用SVG來作為圖形格式的優勢，我分別把上面的三個圖標放大到十種不同的尺寸，具體結果請毫不猶豫拿起你的手機，掃描下面的二維碼。會發現依然清晰可見：

總結

綜上所述，使用SVG Symbols的方式來制作圖標比使用字體圖標有着無可比擬的優勢。更重要的是SVG中的每一個path元素都可以單獨控制，這可以給我們帶來什么呢？點擊下面的圖片你就知道使用SVG來制作圖形元素帶來的魅力啦。

我覺的在移動端完全可以普及使用了，主流的安卓和蘋果的瀏覽器都支持SVG。

參考文章：

Gulp as a Development Web Server
SVG symbol a Good Choice for Icons
Inline SVG vs Icon Fonts
replace-icon-fonts-with-svg

 

原文出處： 騰訊ISUX