svg的使⽤
⼀、为什么要⽤SVG图⽚？SVG是⼀种可缩放⽮量图形（英语：Scalable Vector Graphics，SVG）是基于可扩展标记语⾔（XML），⽤于描述⼆维⽮量图形的图形格式。SVG由W3C制定，是⼀个开放标准。
简单的理解，它是图形的另⼀种格式例如它和常见的图⽚格式.png、.jpg、.gif等是⼀类。对于⽹页设计师来说，svg图⽚在很⼤程度上为他们的⼯作提供了相⽐其他格式图⽚的绝对性便利。1、伸缩⾃如 依旧清晰
与其他图⽚格式不同，SVG格式的图⽚是⼀种⽮量图形，⽤⽮量点和路径来定义图⽚，并不是传统的像素点的叠加。它所拥有的优势是它不会因为图⽚的伸缩⽽改变图⽚的清晰度，因为这⼀整张图⽚都是以相对点来储存数据的。它所记录的是图⽚上每个点的相对位置，⽽不是⼀个个的拥有rgb颜⾊的点，⽆论放⼤或缩⼩，它的显⽰效果是⼀样的。
我们可以看⼀下位图与svg图⽚同样放⼤时的显⽰效果，位图的图像有明显的颗粒感。2、图⽚更⼩ 响应更快
如上⽂所讲的⼀样，因为⽮量图是使⽤相对点来保存数据的，⽽位图则是⽆数个像素点组成，越⼤越清晰的位图所占⽤的数据⼤⼩就会越⼤，⽽svg的图⽚则不会有这种结果。所以，相⽐于同尺⼨的JPG、JPEG、PNG等传统格式，svg格式的图⽚的⽂件⼤⼩会更⼩，因⽽拥有更快的响应速度。
⼀个⽹页的响应速度肯定是⽹页设计的重要考量因素之⼀，为了给⽤户更好的体验，svg图⽚的选择便成了我们的⾸选。3、更⾼的可编辑性
因为svg图⽚是基于XML语⾔编辑⽽成的，天⽣拥有更贴合HTML的属性，可以⾃由的在HTML、CSS中引⽤。
当我们打开SVG图⽚时，你看到的是⼀⾏⾏更具阅读性的代码，你可以清晰地了解图⽚的构成，⽽不是位图的⼀⼤堆看不懂的乱码。下⾯是⾸页图⽚的代码
同时，由于XML的属性，SVG图⽚上显⽰的⽂字是可以选取、复制的，不像位图⼀样仅仅是⼀张图，不具备在线编辑的可能。
⽽且，你可以通过CSS、JavaScript来为SVG图⽚设计动画，这是位图所⽆法实现的功能。只需⼏⾏代码，就可以为你的SVG图⽚添加你想要的动画效果，这在很多的页⾯设计中可以看到，能够为⽤户提供更好的交互体验。
⼆、SVG的使⽤1、创建⼀个vue 2.x项⽬2、安装插件
cnpm install svg-sprite-loader --save-dev
3、封装svgIcon组件
在componemts⾥新建svgIcon⽂件夹，新建index.vue，封装成组件
4、在src下新建icons⽂件夹，此⽂件夹下新建svg⽂件夹。其中svg⽂件夹存放所有的svg⽂件5、在icons下新建index.js，内容如下：
import Vue from 'vue'
import SvgIcon from '@/components/svgIcon' Vue.component('svg-icon', SvgIcon)
const requireAll = requireContext => requireContext.keys().map(requireContext)const req = require.context('./svg', false, /\\.svg$/)requireAll(req)
6、打开阿⾥图标库，下载svg
7、新建vue.config.js，内容如下
const path = require('path')function resolve(dir) {
return path.join(__dirname, '.', dir)}
module.exports = {
chainWebpack: config => {
config.module.rules.delete(\"svg\"); //重点:删除默认配置中处理svg, config.module
.rule('svg-sprite-loader') .test(/\\.svg$/) .include
.add(resolve('src/icons')) //处理svg⽬录 .end()
.use('svg-sprite-loader') .loader('svg-sprite-loader') .options({
symbolId: 'icon-[name]' }) },}
8、在main.js⾥引⼊
import './icons'
9、在页⾯中使⽤