SVG
Scalable Vector Graphics 可缩放的矢量图形
起源
在 2003 年一月，SVG 1.1 被确立为 W3C 标准，在过去很长一段时间，网页注重文字和图片的展示，SVG就被遗忘了，随着网页对图形的要求越来越高，SVG又出现在人们的视野中。
关注点
可以从SVG这个名字就能瞄到我们第一个关注点在哪里，没错，就是可缩放的矢量图形，这个还是得从位图和矢量图说起，可以直白来说，位图缩放容易模糊，而矢量图一般不会，因为矢量图记录了位置信息，每次按照大小重新计算图形，而位图只能对像素粗暴的缩放，就会导致我们常见的图片模糊。
SVG不会模糊？
NONONO,由于是矢量图，是人去编写的，所以矢量图质量决定了其缩放效果，具体因素待确定
其余优点
1.支持多色图标
2.可以使用CSS实现动画，不需要再使用gif
4.本身就是DOM规范的一部分，可以像普通DOM一样修改颜色，交互性非常强
提一下权重
SVG有些属性属于DOM属性比如说fill,也可以作为CSS属性，生效的效果是一样的
<path fill=\”#fff\” />
or
<style style=\”fill:#fff\”>
那么问题来了，涉及到样式，就必须有个权重规则，SVG能够作为CSS属性，写到DOM作为属性上的时候，权重仅比继承权重大,理解这点很重要
修改SVG颜色的前提
由于设计师都会在SVG的图形设置fill，我们在外面直接改，fill是只能被继承进去SVG，权重很低，现在有两种改变这种情况的办法：
1.删除SVG标签的fill属性，让其自然继承fill
2.设置SVG标签继承外面的fill
svg path{fill: inherit;}
两种方式区别在与是否侵入SVG源码
设置颜色
固定颜色
固定的颜色可以写死在SVG里面
动态颜色
动态双色
去除对应区域的fill，SVG内部动态色标签使用currentColor，在外面的class改变fill和color即可实现动态双色,比较简单，看下面实例
<svg id=\”jzm-m10\” viewBox=\”0 0 40 40\”>
<g>
<path d=\”M20,23c-2.2,0-4.1-1.3-5-2c0,0.8,0,6,0,6h10c0,0,0-5.6,0-6C24.1,21.7,22.2,23,20,23z\” fill=\”currentColor\”></path>
<g>
<path d=\”M24.5,29h-9c-1.4,0-2.5-1.1-2.5-2.5V19h-0.5c-1.4,0-2.5-1.1-2.5-2.5v-3c0-1.4,1.1-2.5,2.5-2.5h3.6
c0.5,0,0.9,0.3,1,0.8c0.3,1.3,1.5,2.2,2.9,2.2s2.6-0.9,2.9-2.2c0.1-0.4,0.5-0.8,1-0.8h3.6c1.4,0,2.5,1.1,2.5,2.5v3
c0,1.4-1.1,2.5-2.5,2.5H27v7.5C27,27.9,25.9,29,24.5,29z M12.5,13c-0.3,0-0.5,0.2-0.5,0.5v3c0,0.3,0.2,0.5,0.5,0.5H14
c0.6,0,1,0.4,1,1v8.5c0,0.3,0.2,0.5,0.5,0.5h9c0.3,0,0.5-0.2,0.5-0.5V18c0-0.6,0.4-1,1-1h1.5c0.3,0,0.5-0.2,0.5-0.5v-3
c0-0.3-0.2-0.5-0.5-0.5h-2.9c-0.8,1.8-2.6,3-4.6,3s-3.8-1.2-4.6-3H12.5z\”></path>
</g>
</g>
</svg>
如上图在第一个path fill值给为currentColor,然后第二个path去除fill
默认样式
.svg {
fill: #77809F;
color: #dae0f8;
}
hover样式
.svg:hover {
fill: #fff;
color: #5874d8
}
动态多色
动态多色的难点在于需要同时更改多个状态,不能写死，嗯？不能写死不就是需要一个变量，然后外面改变这个变量他就跟着变就可以了，CSS原生的变量，不过因为支持IE11比较弱，暂时就不会出场了，实现套路与双色一样，把变量currentColor换成CSS变量，然后通过外部CSS改变这个变量指即可实现动态双色
目前存在的问题
如果使用了SVGdefs定义的渐变色，不要让symbol display none,否则渐变色没有生效
SVG需要去除title属性，否则会出现提示
更多关于前端SVG开发的小技巧请查看下面的相关链接
您可能感兴趣的文章:Vue3中级指南之如何在vite中使用svg图标详解教你在vue项目中使用svg图标的方法vue中使用svg画路径图的详细介绍vue项目中进行svg组件封装及配置方法步骤图文详解如何在vue3+vite项目中使用svg前端使用svg图片改色实现示例
