關於瀏覽器圖標解決方案，一直就有很多 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站點上非常適用於圖標解決方案。
本文轉載於:SVG Sprite 入門（SVG圖標解決方案）