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图片时，你看到的是一行行更具阅读性的代码，你可以清晰地了解图片的构成，而不是位图的一大堆看不懂的乱码。

下面是首页图片的代码

<svg t="1631007335546" class="icon" viewBox="0 0 1199 1024" version="1.1" 
xmlns="http://www.w3.org/2000/svg" p-id="2242" width="200" height="200">
<path d="M599.883366 36.485018 14.397338 622.032998l237.705 0 0 383.981 222.536 0c38.057984-82.68503 101.058048-151.528038 
179.386982-196.925952-0.27095-17.363968-0.420966-36.896051-0.134963-62.398976-90.196992 44.91305-164.726989 116.515021-213.204992 
204.47703L306.957344 951.166101 306.957344 567.178 143.639344 567.178l455.873024-455.873024L1055.391334 567.178035 892.074344 
567.178035l0 383.989L745.790344 951.167035l0 54.848 201.139 0L946.929344 622.033l237.705 0L599.883366 36.485018z" p-id="2243"></path>
</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，封装成组件

<template>
    <svg :class="svgClass" aria-hidden="true">
        <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 {
         1em;
        height: 1em;
        fill: currentColor;
        overflow: hidden;
    }
</style>

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

网址：https://www.iconfont.cn/search/index

 

 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、在页面中使用

<template>
  <div class="hello">
    <svg-icon icon-class="edit"></svg-icon><br/>
  </div>
</template>