【教程】在页面上使用SVG(SVG Sprite)

# 【教程】在页面上使用SVG(SVG Sprite)

作者：吴业飞

时间：2019年1月4日

---

# 前言

本文是我在阅读了张鑫旭大神的文章《未来必热：SVG Sprite技术介绍》后整理出来的实际操作流程，全部为实测代码，按照本教程可以即学即用。为了更好的理解本文，建议先行阅读[《未来必热：SVG Sprite技术介绍》](https://www.zhangxinxu.com/wordpress/2014/07/introduce-svg-sprite-technology/)

# 最终目标

在页面上很方便的使用SVG图标

# 步骤分解

## 获取SVG图标

网上有很多可以下载SVG图标的网站，找到我们需要的ICON后，将它们放在一个文件夹下（此教程中是`icon`文件夹），方便我们之后将这个文件夹下的所有SVG图标合并成SVG Sprite

## 合并SVG图标(SVG Sprite)

我们使用grunt的插件`grunt-svgstore`来合并svg,具体步骤如下：

我们的初始项目目录是这样的

+icon

-close.svg

-QQ.svg

+svgDemo.html

一个用于演示的`html`文件，一个放`svg`的`icon`文件夹，就是这么简单。

接下来我们初始化项目，因为我用的编辑器是VScode,所以`ctrl + ~`呼出终端，在终端输入`npm init`。现在我们的项目目录是这样的

+icon

-close.svg

-QQ.svg

svgDemo.html

package-lock.json

package.json

然后我们安装`grunt`和用于合并svg的插件`grunt-svgstore`，终端输入`npm install grunt --save-dev`

`npm install grunt-svgstore --save-dev`，安装完后，我的`package.json`里的版本号是

{

"name": "svgdemo",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

},

"author": "Alan",

"license": "ISC",

"devDependencies": {

"grunt": "^1.0.3",

"grunt-svgstore": "^2.0.0"

}

}

我们在根目录下新建`Gruntfile.js`文件，如下配置

module.exports = function (grunt) {

// Project configuration.

grunt.initConfig({

pkg: grunt.file.readJSON('package.json'),

svgstore: {

options: {

prefix : 'mysvgicon-', // This will prefix each ID

svg: { // will add and overide the the default xmlns="http://www.w3.org/2000/svg" attribute to the resulting SVG

viewBox : &#