使用gulp工具生成svgsprites

簡介

SVG即可縮放矢量圖形 (Scalable Vector Graphics)的簡稱, 是一種用來描述二維矢量圖形的XML標記語言. SVG圖形不依賴於分辨率, 因此圖形不會因為放大而顯示出明顯的鋸齒邊緣.使用svg格式我們可以直接用代碼來描繪圖像，可以用任何文字處理工具打開svg圖像，通過改變部分代碼來使圖像具有交互功能，並可以隨時插入到HTML中通過浏覽器來浏覽。

優點：

1. 縮放無損還原
2. 可設置顏色,大小,使用較靈活
3. 可利用CSS實現動畫
4. 減少HTTP請求

缺點：

1. SVG在繪制的性能上比PNG要差
2. 復雜的圖形或漸變可能顯示不全
3. 兼容性稍差

svg sprites

CSS sprites我們都很熟悉,將多個圖標合在一個圖片文件上,然後通過CSS設置背景圖片的坐標來顯示對應的部分.CSS sprites技術較成熟,兼容性好。但是缺點就是不夠靈活,圖標都是切死的,而且放大縮小會顯示鋸齒。所以如果需求裡有圖標是可變化的,可以嘗試使用SVG圖。如果有多個SVG圖,可使用gulp-svg-symbols工具自動生成svg sprites圖。

1.直接將SVG的代碼添加在html中:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
    <path fill="#000000" d="M16 9.226l-8-6.21-8 6.21v-2.532l8-6.21 8 6.21zM14 9v6h-4v-4h-4v4h-4v-6l6-4.5z"></path>
</svg>

此時SVG圖像會直接在頁面上顯示。

2.SVG Sprites

SVG屬性中, 可以利用(symbol)來定義一個圖形模板對象, 並利用(use)將其實例化.只有symbol元素的實例（亦即，一個引用了symbol的 元素）才能呈現。

<svg>
    <symbol id="001-home" viewBox="0 0 16 16">
        <path fill="#000000" d="M16 9.226l-8-6.21-8 6.21v-2.532l8-6.21 8 6.21zM14 9v6h-4v-4h-4v4h-4v-6l6-4.5z"/>
    </symbol>
    <symbol id="002-home2" viewBox="0 0 16 16">
        <path fill="#000000" d="M8 0.5l-8 8 1.5 1.5 1.5-1.5v6.5h4v-3h2v3h4v-6.5l1.5 1.5 1.5-1.5-8-8zM8 7c-0.552 0-1-0.448-1-1s0.448-1 1-1c0.552 0 1 0.448 1 1s-0.448 1-1 1z"/>
    </symbol>
    <symbol id="003-home3" viewBox="0 0 16 16">
        <path fill="#000000" d="M16 9.5l-3-3v-4.5h-2v2.5l-3-3-8 8v0.5h2v5h5v-3h2v3h5v-5h2z"/>
    </symbol>
</svg>


<svg><use xlink:href="#001-home"/></svg>
<svg><use xlink:href="#002-home2"/></svg> 

自動化合並

1.全局,本地安裝gulp

npm install -g gulp
npm install gulp gulp-cli --save

2.本地安裝gulp-svg-symbols

npm install gulp-svg-symbols --save

3.在目錄下新建gulpfile.js,定義構建任務

var gulp = require('gulp');
var svgSymbols = require('gulp-svg-symbols');

gulp.task('svgsprites',function () {
   return gulp.src('./src/svg/*.svg')
       .pipe(svgSymbols())
       .pipe(gulp.dest('./src/svgsprites'))
});

4.開始構建

gulp svgsprites