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

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

作者：吴业飞
时间：2019年1月4日

---

前言

本文是我在阅读了张鑫旭大神的文章《未来必热：SVG Sprite技术介绍》后整理出来的实际操作流程，全部为实测代码，按照本教程可以即学即用。为了更好的理解本文，建议先行阅读《未来必热：SVG Sprite技术介绍》

最终目标

在页面上很方便的使用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文件

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

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

    

        
    

复制代码

使用SVG图标

接下来我们只要使用就可以使用我们的svg了

    

        
    

    
    


复制代码

参考文献

【1】《未来必热：SVG Sprite技术介绍》.张鑫旭.www.zhangxinxu.com/wordpress/2…

---

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

转载于:https://juejin.im/post/5c2f34ce6fb9a049ae080902