SVG Sprite 入門（SVG圖標解決方案）

關於瀏覽器圖標解決方案，一直就有不少 CSS Sprite,Icon Font,CSS Icon以及SVG.相對而言svg矢量圖標以及支持瀏覽器自身解析的優勢，不少團隊都已經在使用了。這篇文章主要說明svg圖標的使用和製做。

• 演示地址

• 代碼

SVG Sprite

傳統的作法

使用AI或者合併SVG圖像，而後用background-postion;

打開AI，新建一個30 * 60(px)的畫布，設置好網格和參考線.

用AI打開svg文件，而後複製路徑到畫布上調整大小

其餘就和css-sprite沒有差別了

.icon-bg{
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(./res/svg-sprite-background.svg);
    background-size:100% 100%;
    vertical-align: middle;
}
.icon-facebook-logo{
    background-position: 0 0;
}
.icon-earth{
    background-position: 0 -30px;
}
.icon-like{
    background-position: 0 -60px;
}

html 中使用

<p class="btn-group">
    <a href="#" class="btn btn-default"><span class="icon-bg icon-facebook-logo"></span></a>
    <a href="#" class="btn btn-default"><span class="icon-bg icon-earth"></span></a>
    <a href="#" class="btn btn-success"><span class="icon-bg icon-like2"></span></a>
</p>

效果以下：

使用photoshop進行合併

可能不少圖標是圖形形狀。

• 打開Photoshop 新建一個30 60 (px)的畫布，咱們計劃30px 30px,設置好網格或者參考線

• 用AI打開SVG文件，而後Ctrl+C 複製路徑，而後複製到photoshop文檔中，選擇圖層形狀，而後再進行調整

• 選擇 '文件' ->'導出' -> '路徑到illustrator'

• 保存爲SVG

效果以下：

若是這樣作，這彷佛浪費了SVG的不少特性.

SVG Sprite的另一種實現思路 <symbol> +　<use>

SVG <symbol>在svg中主要適用於定義可複用的符號，而這些定義在symbol元素的形狀將不會被展現出來，而是經過use元素引用來顯示。

在SVG中<use>能夠在任何地方複用svg文件中定定義的的形，包括<g>和 <symbol>已經<defs>。

在使用 use 時，它必需要有一個id，這樣 use 經過xlink:href的值找到該形狀的引用。注意，必定要在前面加一個#，這樣才能引用ID成功。

<svg width="300" height="300">
      <defs>
        <g id="shape">
            <rect x="50" y="50" width="50" height="50" />
            <circle cx="50" cy="50" r="50" />
        </g>
      </defs>

      <use xlink:href="#shape" x="50" y="50" />
      <use xlink:href="#shape" x="200" y="50" />
</svg>

在使用 use 時，它必需要有一個id,這樣 use 經過xlink:href的值找到該形狀的引用.注意，必定要在前面加一個#，這樣才能引用ID成功。

首先咱們使用PS+AI生成帶有symbol的 SVG。

前面步驟與生成背景的圖相似

• 打開Symbols面板，在Window菜單欄中，或Shift+Ctrl+F11啓用。而後，選中單個元素，點擊添加。
  

• 給符號命名，該名稱即爲引用的ID
  

• 保存爲SVG時，實際上生成的SVG代碼並不是咱們要使用的，太過臃腫，能夠到 http://www.zhangxinxu.com/sp/svg.html 進行處理下，方便使用查看DEMO3處理後的代碼

• 在Html 裏將SVG 放入，並隱藏;

<svg style="display:none;">
    <symbol id="earth" ... </path></symbol>
</svg>

使用：

<svg class="icon icon-facebook"><use xlink:href="#facebook"></use></svg>

效果以下：

能夠經過CSS去控制填充(fill)或者描邊的顏色(stroke)

.icon-blue{
        fill:#1ba1e2;
}

使用 icomoon 製做SVG Sprite [推薦]

icommon不只能夠生成icon fonts還能夠生成SVG Sprite.

文件下載完成解壓能夠獲得的文件夾裏面會有demo.html 能夠直接打開源碼參考使用.

使用svgstore生成SVG Sprite

svgstore是 grunt的一個插件，用於自動獲取文件中的SVG文件並自動合併。

npm install grunt-svgstore --save-dev

安裝成功後，能夠在 node_modules中看到grunt-svgstore文件夾

能夠新建一個項目，svg-demo1

在文件中新建一個 src 文件夾，並把須要合併的svg文件中放進去

而後新建package.json

{
  "name": "svg-store",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-svgstore": "~0.5.0"
  }
}

而後新建Gruntfile.js,裏面配置選項大體以下：

module.exports = function(grunt) {
    // 配置
    grunt.initConfig({
        svgstore: {
            options: {
              prefix : 'icon-', 
              svg: { 
                viewBox : '0 0 100 100',
                xmlns: 'http://www.w3.org/2000/svg'
              },
              includedemo:true,
            },
            default : {
              files: {
                'dest/dest-svg.svg': ['src/*.svg'],
              },
            }

        }
    });
    // 載入grunt-svgstore
    grunt.loadNpmTasks('grunt-svgstore');
    // 註冊任務
    grunt.registerTask('default', ['svgstore']);
};

接下來輸入命令npm install;

自動加載依賴項目,再輸入命令:

grunt

這個時候能夠看到一個合併的dest-svg.svg文件和一個dest-svg-demo.html文件，打開網頁文件，你能夠快速的使用這些svg icon了.

一些常見的配置說明:

options.includedemo // 是否生成一個demo的html文件 通常仍是寫上比較好 
options.cleanup  //是否支持css 控制圖標的fill和stroke屬性等，能夠傳入一個數組實現自定義 ['fill','stroke-width' ...]
options.svg // 添加svg的一些屬性在生成的svg文件中 viewBox: '0,0,100,100'

更多選項:參考這裏

小結

藉助第三方工具咱們能夠快速的製做svg sprite,相對其餘方案，svg更加靈活，可控制，矢量顯示等優勢，在移動端以及部分pc站點上很是適用於圖標解決方案。

擴展閱讀: http://events.jackpu.com/svg/demo.html