vue项目中实现SVG的定制化

在做项目时，常常会用到各式样的图片，但有些图片只是内部的颜色变了，整体的结构没变，这样如果每个样式都用一张比如.png图片的话，一方面会造成上线后包体积过大，进而影响到真实用户的体验，另一方面也是会频繁的找UI要图片，影响工作效率。所以用SVG代替png，具体原因及使用步骤如下：

目录

一：SVG简介

二：SVG与PNG的对比

三：vue项目中实现SVG的定制化

一：SVG简介

SVG是可缩放矢量图形（Scalable Vector Graphics）的缩写，它是一种基于XML的矢量图形格式，可以无损地缩放和变换，不会失真。SVG图像可以在任何分辨率下显示清晰，因此非常适合用于响应式设计和移动设备。另外，SVG图像可以通过CSS和JavaScript进行动态修改和交互，比如动画效果、鼠标悬停等。

二：SVG与PNG的对比

  1. 可缩放性：SVG是可缩放矢量图形，可以无损缩放和变换，不会失真。而PNG是位图格式，缩放会导致像素失真和模糊。

  2. 文件大小：SVG图像通常比PNG图像更小，因为SVG是基于矢量的，可以通过数学公式描述图像，而不需要存储大量的像素点。这使得SVG图像在网络传输和加载时更加高效。

  3. 渲染效果：SVG图像可以使用CSS和JavaScript进行动态修改和交互，并且支持搜索引擎 SEO 。而PNG图像只能通过静态的CSS样式进行修改，无法实现复杂的交互效果。

三：vue项目中实现SVG的定制化

1.查询是否有SVG格式的对应图片，如果没有转步骤2，否则转步骤3

2.找负责此模块的UI同学要svg格式的图片，拿到后不要急着用，用svgo对格式进行优化下

svgo:GitHub - svg/svgo: ⚙️ Node.js tool for optimizing SVG files

这样SVG文件中的内容就会简洁不少，方便处理的同时减小了无用的代码体积

3.对svg文件改造成组件形式，首先在svg文件中用<template>标签进行包裹，将要修改的样式比如颜色等用CSS变量currentColor代替

注意：CSS里你可以在任何需要写颜色的地方使用currentColor这个变量，这个变量的值是当前元素的color值。如果当前元素没有在CSS里显示地指定一个color值，那它的颜色值就遵从CSS规则，从父级元素继承而来。它可以应用于元素的 color、background-color、border 等属性中，也可以作用于 svg 和 canvas

4.其次，在用到图片的vue文件中进行组件的注册，用新注册的SVG组件代替原先的div或者img等标签，比如

<template>
    <Logo class="xxx"></Logo>
</template>

<script>
    import Logo from "xxx"
    ....
    components:{ Logo }
</script>

5.将之前用到该图片的地方进行修改。比如将background-img修改为color：xxx

注意：如果要更改的样式是多色，可能是SVG标签中的fill、stroke等，可以在父元素的CSS中进行设置，如果出现多个标签重名的情况，可以在标签中设置class

  svg g {
      fill: white
  }