为什么要在项目中使用svg技术，在vue项目中怎么使用svg技术首先我们来看看为什么要使用这个技术一切不是为了满足需求

首先我们来看看为什么要使用这个技术

一切不是为了满足需求的技术都是耍流氓（脱离了业务和性能谈技术没有意义）

1、先从文件大小的角度看

svg的大小是png的1/17（内容不一致比例肯定是不同的，这里只是举例）更别说是jpg了，这有助于将加载时间降至最低，从而帮助您提供更好的用户体验 (UX)。更快的页面速度对于网站 SEO也更好。

2、清晰度

SVG 文件可以无限扩展。您可以增加 SVG 文件的大小并根据需要多次调整它们的大小而不会失去清晰度 - 与光栅图像相比，这是一个巨大的好处，如果它们的大小不合适，光栅图像可能会变得模糊或看起来有颗粒感。

以上这两个是我用到过的优点下面这些是收集过来的（手动狗头）

3、多功能性

不仅可以在编辑阶段多次调整 SVG 文件的大小而不会失去清晰度，而且生成在任何设备上看起来都不错的响应式SVG 文件相对简单，即使查看器放大网页也是如此。SVG 文件的多功能性使其成为徽标和简单信息图表的绝佳选择。您还可以将 SVG 文件用于动画，它们对于设计具有独特配色方案和渐变的字体特别有用。

4. 可访问性和包容性

SVG 文件在可访问性和包容性方面提供了多种好处。设计人员可以在 SVG 文件本身的图形中添加描述视觉元素的结构数据，这可以帮助使用某些辅助技术的人更好地理解图像中包含的内容。或者，光栅文件仅依靠元数据（即替代文本）来向屏幕阅读器和类似的辅助设备描述图形的内容。

可扩展性对用户和创作者都有好处。视力低下的人可以放大 SVG 文件，而文件不会变得模糊。继续尝试放大下面的图像（这是一个 SVG 文件）。

SVG 文件还为设计人员和开发人员提供了可访问性和包容性的好处，因为有多种创建和编辑它们的方法。您可以使用 Adobe Illustrator 等设计工具在不知道如何编码的情况下编辑 SVG 文件。您还可以直接在纯文本编辑器中编辑 XML 代码，并轻松地将 SVG 合并到您的HTML 或 CSS中。您可以在 W3C 网站上找到有关 SVG 文件的辅助功能的更多信息。

1. svg-sprite-loader

安装loader处理svg文件

npm install svg-sprite-loader --save

2. 在src中新建文件夹icons

icons/svg 存放svg图标
icons/index.js 全局注册svg组件，导入所有svg图标

// icons/index.js
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon/index.vue'// svg component
// register globally
Vue.component('SvgIcon', SvgIcon)
const req = require.context('./svg', false, /.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

3. 创建svg组件

// src/components/ScgIcon/index.vue
<template>
  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>

export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    iconName () {
      return `#icon-${this.iconClass}`
    },
    svgClass () {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    }
  }
}
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

4. 在vue.config.js中使用loader

首先找到原有的svg规则，将src/icons文件夹排除（exclude），添加一个新的规则icons，让其规则包含（include）src/icons文件夹，并使用svg-sprite-loader处理这些文件，会给这些文件生成一个 icon-[name]唯一标识，name为svg文件名

const path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  devServer: {
    port: 8080,
    open: true
  },
  chainWebpack (config) {
    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  }
}

5. 在main.js中导入icons/index.js

// main.js
import '@/icons/index' // svg

6. 在页面中使用组件

<SvgIcon iconClass="eye-open"></SvgIcon>

直接使用svg文件名作为iconClass

使用教程参考这里

为什么要在项目中使用svg技术，在vue项目中怎么使用svg技术