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屬性，否則會出現提示
d