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属性，生效的效果是一样的

>
or


那么问题来了，涉及到样式，就必须有个权重规则，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即可实现动态双色,比较简单，看下面实例

如上图在第一个path fill值给为currentColor,然后第二个path去除fill

默认样式
.svg {
fill: #77809F;
color: #dae0f8;
}

hover样式
.svg:hover {
fill: #fff;
color: #5874d8
}


动态多色

动态多色的难点在于需要同时更改多个状态,不能写死，嗯？不能写死不就是需要一个变量，然后外面改变这个变量他就跟着变就可以了，CSS原生的变量，不过因为支持IE11比较弱，暂时就不会出场了，实现套路与双色一样，把变量currentColor换成CSS变量，然后通过外部CSS改变这个变量指即可实现动态双色

目前存在的问题

1. 如果使用了SVGdefs定义的渐变色，不要让symbol display none,否则渐变色没有生效




2. SVG需要去除title属性，否则会出现提示

d