【教程】在页面上使用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 : '0 0 100 100',

xmlns: 'http://www.w3.org/2000/svg'

}

},

mytest: {

// Target-specific file lists and/or options go here.

files: {

'./icon/all.svg': ['./icon/*.svg']

}

},

},

});

grunt.loadNpmTasks('grunt-svgstore');

// 默认被执行的任务列表。

grunt.registerTask('default', ['svgstore']);

};

现在我们在终端运行`grunt`，一切顺利的话在`icon`文件夹下回生成`all.svg`文件，它长这样

<svg viewBox="0 0 100 100"

xmlns="http://www.w3.org/2000/svg">

<defs>

<style type="text/css"/>

<style type="text/css"/>

</defs>

<symbol viewBox="0 0 1024 1024" id="mysvgicon-close">

<title>close</title>

<path d="M512 0C229.216 0 0 229.216 0 512c0 282.768 229.216 512 512 512 282.752 0 512-229.232 512-512C1024 229.216 794.752 0 512 0zM512 992C246.896 992 32 777.088 32 512 32 246.896 246.896 32 512 32c265.072 0 480 214.896 480 480C992 777.088 777.072 992 512 992z" p-id="1536" fill="#464646"/>

<path d="M534.624 512l203.664-203.648c6.24-6.256 6.24-16.384 0-22.624-6.256-6.24-16.384-6.256-22.64 0L512 489.36 308.352 285.728c-6.256-6.256-16.368-6.256-22.624 0s-6.256 16.368 0 22.624L489.36 512 285.728 715.648c-6.256 6.272-6.24 16.384 0 22.64 6.24 6.24 16.368 6.256 22.624 0L512 534.624l203.648 203.664c6.272 6.256 16.384 6.24 22.64 0 6.24-6.256 6.256-16.368 0-22.64L534.624 512z" p-id="1537" fill="#464646"/>

</symbol>

<symbol viewBox="0 0 1024 1024" id="mysvgicon-QQ">

<title>QQ</title>

<path d="M135.72096 579.80928c-31.86688 76.7488-37.09952 149.9648-11.43296 163.584 17.63328 9.49248 45.3632-12.032 71.2704-51.44576 10.3424 42.93632 35.64032 81.73568 71.8848 112.9984-38.0672 14.35136-62.87872 37.82144-62.87872 64.34304 0 43.65824 67.25632 78.93504 150.21056 78.93504 74.8032 0 136.832-28.70784 148.26496-66.4064a426.30656 426.30656 0 0 1 17.87904 0c11.43808 37.69856 73.58976 66.4064 148.39296 66.4064 82.944 0 150.21056-35.39456 150.21056-78.93504 0-26.5216-24.81152-49.99168-62.88384-64.34816 36.2496-31.1296 61.66528-70.05696 71.8848-112.99328 25.9072 39.40864 53.51424 60.81536 71.15264 51.45088 25.66144-13.6192 20.55168-86.9632-11.43808-163.58912-25.04704-60.32896-59.1104-104.72448-85.0176-114.58048 0.36864-3.76832 0.60928-7.7824 0.60928-11.55072 0-23.23456-6.31808-44.88192-17.152-62.39744 0.24576-1.33632 0.24576-2.79552 0.24576-4.13696 0-10.7008-2.55488-20.79744-6.8096-29.43488-6.56896-156.7744-106.42432-281.20576-268.07296-281.20576S250.4192 200.9344 243.968 357.71392a67.56864 67.56864 0 0 0-6.8096 29.43488c0 1.3312 0.12288 2.79552 0.12288 4.13184-10.7008 17.51552-17.02912 39.04512-17.02912 62.39744 0 3.8912 0.12288 7.65952 0.4864 11.55584-25.78432 9.85088-59.96544 54.2464-85.0176 114.57536z" p-id="2038" fill="#798390"/>

</symbol>

</svg>

注意到已经成功合并了两个svg文件

## 在页面上插入合并后的SVG Sprite

我们在页面`<body>`里写个`display:none;`的包裹标签将我们的SVG Sprite放在里面

<body>

<div style="display:none;">

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">

<defs>

<style type="text/css" />

<style type="text/css"/>

</defs>

<symbol viewBox="0 0 1024 1024" id="mysvgicon-close">

<title>close</title>

<path d="M512 0C229.216 0 0 229.216 0 512c0 282.768 229.216 512 512 512 282.752 0 512-229.232 512-512C1024 229.216 794.752 0 512 0zM512 992C246.896 992 32 777.088 32 512 32 246.896 246.896 32 512 32c265.072 0 480 214.896 480 480C992 777.088 777.072 992 512 992z" p-id="1536" fill="#464646"/>

<path d="M534.624 512l203.664-203.648c6.24-6.256 6.24-16.384 0-22.624-6.256-6.24-16.384-6.256-22.64 0L512 489.36 308.352 285.728c-6.256-6.256-16.368-6.256-22.624 0s-6.256 16.368 0 22.624L489.36 512 285.728 715.648c-6.256 6.272-6.24 16.384 0 22.64 6.24 6.24 16.368 6.256 22.624 0L512 534.624l203.648 203.664c6.272 6.256 16.384 6.24 22.64 0 6.24-6.256 6.256-16.368 0-22.64L534.624 512z" p-id="1537" fill="#464646"/>

</symbol>

<symbol viewBox="0 0 1024 1024" id="mysvgicon-QQ">

<title>QQ</title>

<path d="M135.72096 579.80928c-31.86688 76.7488-37.09952 149.9648-11.43296 163.584 17.63328 9.49248 45.3632-12.032 71.2704-51.44576 10.3424 42.93632 35.64032 81.73568 71.8848 112.9984-38.0672 14.35136-62.87872 37.82144-62.87872 64.34304 0 43.65824 67.25632 78.93504 150.21056 78.93504 74.8032 0 136.832-28.70784 148.26496-66.4064a426.30656 426.30656 0 0 1 17.87904 0c11.43808 37.69856 73.58976 66.4064 148.39296 66.4064 82.944 0 150.21056-35.39456 150.21056-78.93504 0-26.5216-24.81152-49.99168-62.88384-64.34816 36.2496-31.1296 61.66528-70.05696 71.8848-112.99328 25.9072 39.40864 53.51424 60.81536 71.15264 51.45088 25.66144-13.6192 20.55168-86.9632-11.43808-163.58912-25.04704-60.32896-59.1104-104.72448-85.0176-114.58048 0.36864-3.76832 0.60928-7.7824 0.60928-11.55072 0-23.23456-6.31808-44.88192-17.152-62.39744 0.24576-1.33632 0.24576-2.79552 0.24576-4.13696 0-10.7008-2.55488-20.79744-6.8096-29.43488-6.56896-156.7744-106.42432-281.20576-268.07296-281.20576S250.4192 200.9344 243.968 357.71392a67.56864 67.56864 0 0 0-6.8096 29.43488c0 1.3312 0.12288 2.79552 0.12288 4.13184-10.7008 17.51552-17.02912 39.04512-17.02912 62.39744 0 3.8912 0.12288 7.65952 0.4864 11.55584-25.78432 9.85088-59.96544 54.2464-85.0176 114.57536z" p-id="2038" fill="#798390"/>

</symbol>

</svg>

</div>

</body>

## 使用SVG图标

接下来我们只要使用`<use>`就可以使用我们的svg了

<body>

<div style="display:none;">

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">

<defs>

<style type="text/css" />

<style type="text/css"/>

</defs>

<symbol viewBox="0 0 1024 1024" id="mysvgicon-close">

<title>close</title>

<path d="M512 0C229.216 0 0 229.216 0 512c0 282.768 229.216 512 512 512 282.752 0 512-229.232 512-512C1024 229.216 794.752 0 512 0zM512 992C246.896 992 32 777.088 32 512 32 246.896 246.896 32 512 32c265.072 0 480 214.896 480 480C992 777.088 777.072 992 512 992z" p-id="1536" fill="#464646"/>

<path d="M534.624 512l203.664-203.648c6.24-6.256 6.24-16.384 0-22.624-6.256-6.24-16.384-6.256-22.64 0L512 489.36 308.352 285.728c-6.256-6.256-16.368-6.256-22.624 0s-6.256 16.368 0 22.624L489.36 512 285.728 715.648c-6.256 6.272-6.24 16.384 0 22.64 6.24 6.24 16.368 6.256 22.624 0L512 534.624l203.648 203.664c6.272 6.256 16.384 6.24 22.64 0 6.24-6.256 6.256-16.368 0-22.64L534.624 512z" p-id="1537" fill="#464646"/>

</symbol>

<symbol viewBox="0 0 1024 1024" id="mysvgicon-QQ">

<title>QQ</title>

<path d="M135.72096 579.80928c-31.86688 76.7488-37.09952 149.9648-11.43296 163.584 17.63328 9.49248 45.3632-12.032 71.2704-51.44576 10.3424 42.93632 35.64032 81.73568 71.8848 112.9984-38.0672 14.35136-62.87872 37.82144-62.87872 64.34304 0 43.65824 67.25632 78.93504 150.21056 78.93504 74.8032 0 136.832-28.70784 148.26496-66.4064a426.30656 426.30656 0 0 1 17.87904 0c11.43808 37.69856 73.58976 66.4064 148.39296 66.4064 82.944 0 150.21056-35.39456 150.21056-78.93504 0-26.5216-24.81152-49.99168-62.88384-64.34816 36.2496-31.1296 61.66528-70.05696 71.8848-112.99328 25.9072 39.40864 53.51424 60.81536 71.15264 51.45088 25.66144-13.6192 20.55168-86.9632-11.43808-163.58912-25.04704-60.32896-59.1104-104.72448-85.0176-114.58048 0.36864-3.76832 0.60928-7.7824 0.60928-11.55072 0-23.23456-6.31808-44.88192-17.152-62.39744 0.24576-1.33632 0.24576-2.79552 0.24576-4.13696 0-10.7008-2.55488-20.79744-6.8096-29.43488-6.56896-156.7744-106.42432-281.20576-268.07296-281.20576S250.4192 200.9344 243.968 357.71392a67.56864 67.56864 0 0 0-6.8096 29.43488c0 1.3312 0.12288 2.79552 0.12288 4.13184-10.7008 17.51552-17.02912 39.04512-17.02912 62.39744 0 3.8912 0.12288 7.65952 0.4864 11.55584-25.78432 9.85088-59.96544 54.2464-85.0176 114.57536z" p-id="2038" fill="#798390"/>

</symbol>

</svg>

</div>

<svg class="closeBtn">

<use xlink:href="#mysvgicon-close"></use>

</svg>

<svg class="qq">

<use xlink:href="#mysvgicon-QQ"></use>

</svg>

</body>

 

# 参考文献

【1】《未来必热：SVG Sprite技术介绍》.张鑫旭.https://www.zhangxinxu.com/wordpress/2014/07/introduce-svg-sprite-technology/

---

版权声明：自由转载-非商用-非衍生-保持署名

标签：教程,Sprite,SVG,svg,grunt,svgstore,icon
来源： https://blog.csdn.net/qq_39684484/article/details/120095510