关于SVG

摘要：以前前端时代做按钮，图标背景图用，后来主流现在各种流体结构，高分屏的需求，大行其道，无论是体积还是灵活性还是品质都远胜。

以前前端IE6时代做按钮， 图标背景图用gif, png， 后来主流png, 现在各种流体结构，高分屏的需求， svg大行其道， 无论是体积还是灵活性还是品质都远胜png。

1.直接使用 " alt="">

IE/Edge的显示

3.使用 "); }

IE显示：

C.svg 文件的decode代码（工具链接在最后列表）
适用: Chrome, Firefox, Edge, IE

CSS:

.svg-test-decode { background-image: url("data:image/svg+xml,%3Csvg%20%0A%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%0A%20width%3D%2217px%22%20height%3D%2217px%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20%20fill%3D%22rgb(147%2C%20147%2C%20147)%22%0A%20d%3D%22M3.277%2C3.954%20C3.514%2C3.953%203.794%2C3.933%203.995%2C3.979%20C4.476%2C4.091%204.802%2C4.442%204.870%2C4.974%20C4.892%2C5.151%204.861%2C5.336%204.813%2C5.467%20C4.758%2C5.615%204.683%2C5.736%204.591%2C5.846%20C4.427%2C6.041%204.189%2C6.174%203.876%2C6.217%20C3.691%2C6.243%203.472%2C6.223%203.277%2C6.223%20C3.277%2C8.975%203.277%2C11.726%203.277%2C14.477%20C3.277%2C14.899%203.277%2C15.321%203.277%2C15.742%20C3.277%2C15.969%203.296%2C16.233%203.245%2C16.413%20C3.161%2C16.709%202.949%2C16.894%202.644%2C16.966%20C2.574%2C16.982%202.481%2C17.000%202.390%2C16.989%20C1.952%2C16.938%201.677%2C16.730%201.606%2C16.310%20C1.572%2C16.113%201.595%2C15.824%201.595%2C15.604%20C1.595%2C15.176%201.595%2C14.748%201.595%2C14.321%20C1.595%2C11.622%201.595%2C8.922%201.595%2C6.223%20C1.360%2C6.225%201.080%2C6.245%200.881%2C6.199%20C0.397%2C6.087%200.070%2C5.738%200.002%2C5.202%20C-0.022%2C5.021%200.012%2C4.836%200.060%2C4.705%20C0.115%2C4.556%200.193%2C4.436%200.286%2C4.325%20C0.448%2C4.132%200.688%2C4.001%200.999%2C3.960%20C1.184%2C3.935%201.401%2C3.954%201.595%2C3.954%20C1.595%2C3.129%201.595%2C2.304%201.595%2C1.480%20C1.595%2C1.053%201.554%2C0.601%201.728%2C0.348%20C1.850%2C0.172%202.027%2C0.055%202.278%2C0.008%20C2.326%2C-0.001%202.391%2C-0.012%202.449%2C-0.005%20C2.815%2C0.037%203.025%2C0.136%203.174%2C0.396%20C3.318%2C0.649%203.277%2C1.127%203.277%2C1.524%20C3.277%2C2.334%203.277%2C3.144%203.277%2C3.954%20ZM9.340%2C7.357%20C9.578%2C7.356%209.858%2C7.336%2010.058%2C7.383%20C10.533%2C7.493%2010.856%2C7.837%2010.931%2C8.355%20C10.957%2C8.537%2010.926%2C8.735%2010.876%2C8.871%20C10.821%2C9.023%2010.743%2C9.144%2010.648%2C9.256%20C10.488%2C9.448%2010.249%2C9.579%209.942%2C9.621%20C9.756%2C9.647%209.536%2C9.627%209.340%2C9.627%20C9.340%2C11.472%209.340%2C13.319%209.340%2C15.165%20C9.340%2C15.398%209.340%2C15.630%209.340%2C15.863%20C9.340%2C16.002%209.351%2C16.155%209.333%2C16.283%20C9.291%2C16.582%209.147%2C16.760%208.931%2C16.883%20C8.817%2C16.948%208.641%2C17.011%208.452%2C16.989%20C8.024%2C16.939%207.750%2C16.738%207.672%2C16.335%20C7.643%2C16.182%207.659%2C15.979%207.659%2C15.806%20C7.659%2C15.521%207.659%2C15.236%207.659%2C14.951%20C7.659%2C13.176%207.659%2C11.402%207.659%2C9.627%20C7.420%2C9.628%207.138%2C9.648%206.938%2C9.602%20C6.382%2C9.472%205.855%2C8.840%206.124%2C8.108%20C6.179%2C7.959%206.257%2C7.839%206.349%2C7.729%20C6.507%2C7.541%206.743%2C7.409%207.042%2C7.366%20C7.230%2C7.338%207.458%2C7.357%207.659%2C7.357%20C7.659%2C5.594%207.659%2C3.830%207.659%2C2.066%20C7.659%2C1.768%207.659%2C1.471%207.659%2C1.173%20C7.659%2C1.008%207.644%2C0.818%207.669%2C0.670%20C7.728%2C0.325%207.940%2C0.117%208.250%2C0.027%20C8.320%2C0.007%208.393%2C0.005%208.476%2C-0.005%20C8.651%2C-0.025%208.823%2C0.040%208.930%2C0.101%20C9.149%2C0.226%209.292%2C0.405%209.334%2C0.711%20C9.336%2C0.847%209.338%2C0.982%209.340%2C1.116%20C9.340%2C1.345%209.340%2C1.574%209.340%2C1.802%20C9.340%2C3.654%209.340%2C5.506%209.340%2C7.357%20ZM15.401%2C10.761%20C15.634%2C10.760%2015.910%2C10.738%2016.108%2C10.784%20C16.593%2C10.895%2016.922%2C11.238%2016.994%2C11.768%20C17.019%2C11.950%2016.987%2C12.142%2016.938%2C12.275%20C16.883%2C12.426%2016.805%2C12.547%2016.712%2C12.658%20C16.548%2C12.853%2016.309%2C12.983%2015.995%2C13.026%20C15.798%2C13.027%2015.600%2C13.029%2015.402%2C13.030%20C15.402%2C13.030%2015.401%2C13.031%2015.401%2C13.031%20C15.401%2C13.830%2015.401%2C14.630%2015.401%2C15.428%20C15.401%2C16.165%2015.479%2C16.635%2014.976%2C16.893%20C14.861%2C16.951%2014.696%2C17.011%2014.511%2C16.989%20C14.085%2C16.939%2013.812%2C16.736%2013.734%2C16.336%20C13.711%2C16.217%2013.721%2C16.061%2013.721%2C15.923%20C13.721%2C15.680%2013.721%2C15.437%2013.721%2C15.195%20C13.721%2C14.474%2013.721%2C13.752%2013.721%2C13.031%20C13.720%2C13.031%2013.720%2C13.030%2013.720%2C13.030%20C13.455%2C13.031%2013.148%2C13.050%2012.940%2C12.990%20C12.411%2C12.837%2011.938%2C12.238%2012.184%2C11.519%20C12.234%2C11.371%2012.313%2C11.250%2012.402%2C11.142%20C12.564%2C10.950%2012.799%2C10.814%2013.105%2C10.769%20C13.293%2C10.742%2013.520%2C10.760%2013.721%2C10.761%20C13.721%2C8.069%2013.721%2C5.376%2013.721%2C2.684%20C13.721%2C2.208%2013.721%2C1.732%2013.721%2C1.255%20C13.721%2C0.976%2013.704%2C0.671%2013.784%2C0.477%20C13.882%2C0.241%2014.079%2C0.084%2014.346%2C0.019%20C14.409%2C0.003%2014.476%2C0.004%2014.551%2C-0.005%20C14.697%2C-0.022%2014.840%2C0.031%2014.937%2C0.074%20C15.128%2C0.160%2015.272%2C0.301%2015.348%2C0.502%20C15.419%2C0.689%2015.401%2C0.981%2015.401%2C1.241%20C15.401%2C1.660%2015.401%2C2.081%2015.401%2C2.500%20C15.401%2C5.254%2015.401%2C8.007%2015.401%2C10.761%20Z%22%2F%3E%0A%3C%2Fsvg%3E"); }

D.svg base64 代码
适用: Chrome, Firefox, Edge, IE

CSS:

.svg-test-base { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNyIgaGVpZ2h 0PSIxNyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBmaWxsPSIjOTM5MzkzIiBkPSJNMy4yNz cgMy45NTRjLjIzNy0uMDAxLjUxNy0uMDIxLjcxOC4wMjUuNDgxLjExMi44MDcuNDYzLjg3NS45O TUuMDIyLjE3Ny0uMDA5LjM2Mi0uMDU3LjQ5My0uMDU1LjE0OC0uMTMuMjY5LS4yMjIuMzc5YTEu MDk3IDEuMDk3IDAgMCAxLS43MTUuMzcxYy0uMTg1LjAyNi0uNDA0LjAwNi0uNTk5LjAwNnY5LjU xOWMwIC4yMjcuMDE5LjQ5MS0uMDMyLjY3MS0uMDg0LjI5Ni0uMjk2LjQ4MS0uNjAxLjU1M2EuNz U2Ljc1NiAwIDAgMS0uMjU0LjAyM2MtLjQzOC0uMDUxLS43MTMtLjI1OS0uNzg0LS42NzktLjAzN C0uMTk3LS4wMTEtLjQ4Ni0uMDExLS43MDZ2LTEuMjgzLTguMDk4Yy0uMjM1LjAwMi0uNTE1LjAy Mi0uNzE0LS4wMjQtLjQ4NC0uMTEyLS44MTEtLjQ2MS0uODc5LS45OTdhMS4wOSAxLjA5IDAgMCA xIC4wNTgtLjQ5NyAxLjI2IDEuMjYgMCAwIDEgLjIyNi0uMzhjLjE2Mi0uMTkzLjQwMi0uMzI0Lj cxMy0uMzY1LjE4NS0uMDI1LjQwMi0uMDA2LjU5Ni0uMDA2VjEuNDhjMC0uNDI3LS4wNDEtLjg3O S4xMzMtMS4xMzJhLjgxNi44MTYgMCAwIDEgLjU1LS4zNC41ODkuNTg5IDAgMCAxIC4xNzEtLjAx M2MuMzY2LjA0Mi41NzYuMTQxLjcyNS40MDEuMTQ0LjI1My4xMDMuNzMxLjEwMyAxLjEyOHYyLjQ zek05LjM0IDcuMzU3Yy4yMzgtLjAwMS41MTgtLjAyMS43MTguMDI2LjQ3NS4xMS43OTguNDU0Lj g3My45NzJhMS4xMjggMS4xMjggMCAwIDEtLjI4My45MDFjLS4xNi4xOTItLjM5OS4zMjMtLjcwN i4zNjUtLjE4Ni4wMjYtLjQwNi4wMDYtLjYwMi4wMDZWMTUuODYzYzAgLjEzOS4wMTEuMjkyLS4w MDcuNDJhLjc2Ljc2IDAgMCAxLS40MDIuNi44MDcuODA3IDAgMCAxLS40NzkuMTA2Yy0uNDI4LS4 wNS0uNzAyLS4yNTEtLjc4LS42NTQtLjAyOS0uMTUzLS4wMTMtLjM1Ni0uMDEzLS41Mjl2LS44NT UtNS4zMjRjLS4yMzkuMDAxLS41MjEuMDIxLS43MjEtLjAyNS0uNTU2LS4xMy0xLjA4My0uNzYyL S44MTQtMS40OTRhMS4yNiAxLjI2IDAgMCAxIC4yMjUtLjM3OWMuMTU4LS4xODguMzk0LS4zMi42 OTMtLjM2My4xODgtLjAyOC40MTYtLjAwOS42MTctLjAwOVYyLjA2NnYtLjg5M2MwLS4xNjUtLjA xNS0uMzU1LjAxLS41MDMuMDU5LS4zNDUuMjcxLS41NTMuNTgxLS42NDMuMDctLjAyLjE0My0uMD IyLjIyNi0uMDMyYS43ODEuNzgxIDAgMCAxIC40NTQuMTA2Ljc2NS43NjUgMCAwIDEgLjQwNC42M WwuMDA2LjQwNXY2LjI0MXptNi4wNjEgMy40MDRjLjIzMy0uMDAxLjUwOS0uMDIzLjcwNy4wMjMu NDg1LjExMS44MTQuNDU0Ljg4Ni45ODRhMS4xMSAxLjExIDAgMCAxLS4wNTYuNTA3IDEuMjUyIDE uMjUyIDAgMCAxLS4yMjYuMzgzYy0uMTY0LjE5NS0uNDAzLjMyNS0uNzE3LjM2OGwtLjU5My4wMD QtLjAwMS4wMDF2Mi4zOTdjMCAuNzM3LjA3OCAxLjIwNy0uNDI1IDEuNDY1YS44MjQuODI0IDAgM CAxLS40NjUuMDk2Yy0uNDI2LS4wNS0uNjk5LS4yNTMtLjc3Ny0uNjUzLS4wMjMtLjExOS0uMDEz LS4yNzUtLjAxMy0uNDEzdi0uNzI4LTIuMTY0bC0uMDAxLS4wMDFjLS4yNjUuMDAxLS41NzIuMDI tLjc4LS4wNC0uNTI5LS4xNTMtMS4wMDItLjc1Mi0uNzU2LTEuNDcxLjA1LS4xNDguMTI5LS4yNj kuMjE4LS4zNzcuMTYyLS4xOTIuMzk3LS4zMjguNzAzLS4zNzMuMTg4LS4wMjcuNDE1LS4wMDkuN jE2LS4wMDhWMi42ODQgMS4yNTVjMC0uMjc5LS4wMTctLjU4NC4wNjMtLjc3OC4wOTgtLjIzNi4y OTUtLjM5My41NjItLjQ1OC4wNjMtLjAxNi4xMy0uMDE1LjIwNS0uMDI0YS43NjQuNzY0IDAgMCA xIC4zODYuMDc5Ljc1Mi43NTIgMCAwIDEgLjQxMS40MjhjLjA3MS4xODcuMDUzLjQ3OS4wNTMuNz M5djkuNTJ6Ii8+PC9zdmc+"); }

E.用SVGO，nodejs-base工具来优化svg文件后， IE11/Firefox不显示
适用: Chrome, Edge,

CSS：

.svg-test-bgsvgo { background-image: url("data:image/svg+xml,"); }

IE11/Firefox显示：

F.用mask 改变svg 图片颜色, IE/EDGE不显示,
Chrome 需要添加-webkit-前缀
这种方法不能改变宽高， 意义不大， 一定要在
适用：NA

.svg-test-bgmarsk { -webkit-mask: url("../i/icon-rearrange.svg") no-repeat 50% 50%; // must for chrome mask: url("../i/icon-rearrange.svg") no-repeat 50% 50%; //work for firefox }

Chrome/Firefox 显示：

IE/Edge显示：

总结：
用base64的方法最好，这种就需要你先改好颜色在转换
如果只需要支持Chrome/Firefox，可以用 url("data:image/svg+xml,) 然后在里面的fill="rgb(0, 0, 0)"修改颜色
如果需要支持现在所有主流浏览器，用URL decode， 找到rgb(147%2C%20147%2C%20147) 修改颜色

我的环境：
Win10
Chrome: Version 63.0.3239.132 (Official Build) (64-bit)
IE11: 11.192.16299.0
Edge: Microsoft Edge 41.16299.15.0
Firefox: 57.0.4 (64-bit)
没有在mac上测试safari, 没有测试手机端。

相关链接：
Coloring SVGs in CSS Background Images
Optimizing SVGs in data URIs
Probably Don’t Base64 SVG
Base64 convertor
Dencoder tool
svgo: Nodejs-based tool for optimizing SVG vector graphics files