使用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