关于SVG

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

之前自己也总结了一下使用svg的各种方法吧：

1.直接使用<img> + .svg 文件， 这种跟使用png没区别， 不能改变颜色， IE11还不能改变<img> 里面图片的高和宽， 也就没有任何意义了通常.
适用：Chrome, Firefox, Edge

<img class="svg-test-img" src="./i/icon-rearrange.svg" alt="">

IE11的显示

2.用<img> + .svg 文件的代码， 这种形式不能用于IE, 会显示一个X的图片
适用：Chrome, Firefox， Edge

<img src='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="17px" height="17px"> <path fill-rule="evenodd" fill="rgb(0, 0, 0)" d="M3.277,3.954 C3.514,3.953 3.794,3.933 3.995,3.979 C4.476,4.091 4.802,4.442 4.870,4.974 C4.892,5.151 4.861,5.336 4.813,5.467 C4.758,5.615 4.683,5.736 4.591,5.846 C4.427,6.041 4.189,6.174 3.876,6.217 C3.691,6.243 3.472,6.223 3.277,6.223 C3.277,8.975 3.277,11.726 3.277,14.477 C3.277,14.899 3.277,15.321 3.277,15.742 C3.277,15.969 3.296,16.233 3.245,16.413 C3.161,16.709 2.949,16.894 2.644,16.966 C2.574,16.982 2.481,17.000 2.390,16.989 C1.952,16.938 1.677,16.730 1.606,16.310 C1.572,16.113 1.595,15.824 1.595,15.604 C1.595,15.176 1.595,14.748 1.595,14.321 C1.595,11.622 1.595,8.922 1.595,6.223 C1.360,6.225 1.080,6.245 0.881,6.199 C0.397,6.087 0.070,5.738 0.002,5.202 C-0.022,5.021 0.012,4.836 0.060,4.705 C0.115,4.556 0.193,4.436 0.286,4.325 C0.448,4.132 0.688,4.001 0.999,3.960 C1.184,3.935 1.401,3.954 1.595,3.954 C1.595,3.129 1.595,2.304 1.595,1.480 C1.595,1.053 1.554,0.601 1.728,0.348 C1.850,0.172 2.027,0.055 2.278,0.008 C2.326,-0.001 2.391,-0.012 2.449,-0.005 C2.815,0.037 3.025,0.136 3.174,0.396 C3.318,0.649 3.277,1.127 3.277,1.524 C3.277,2.334 3.277,3.144 3.277,3.954 ZM9.340,7.357 C9.578,7.356 9.858,7.336 10.058,7.383 C10.533,7.493 10.856,7.837 10.931,8.355 C10.957,8.537 10.926,8.735 10.876,8.871 C10.821,9.023 10.743,9.144 10.648,9.256 C10.488,9.448 10.249,9.579 9.942,9.621 C9.756,9.647 9.536,9.627 9.340,9.627 C9.340,11.472 9.340,13.319 9.340,15.165 C9.340,15.398 9.340,15.630 9.340,15.863 C9.340,16.002 9.351,16.155 9.333,16.283 C9.291,16.582 9.147,16.760 8.931,16.883 C8.817,16.948 8.641,17.011 8.452,16.989 C8.024,16.939 7.750,16.738 7.672,16.335 C7.643,16.182 7.659,15.979 7.659,15.806 C7.659,15.521 7.659,15.236 7.659,14.951 C7.659,13.176 7.659,11.402 7.659,9.627 C7.420,9.628 7.138,9.648 6.938,9.602 C6.382,9.472 5.855,8.840 6.124,8.108 C6.179,7.959 6.257,7.839 6.349,7.729 C6.507,7.541 6.743,7.409 7.042,7.366 C7.230,7.338 7.458,7.357 7.659,7.357 C7.659,5.594 7.659,3.830 7.659,2.066 C7.659,1.768 7.659,1.471 7.659,1.173 C7.659,1.008 7.644,0.818 7.669,0.670 C7.728,0.325 7.940,0.117 8.250,0.027 C8.320,0.007 8.393,0.005 8.476,-0.005 C8.651,-0.025 8.823,0.040 8.930,0.101 C9.149,0.226 9.292,0.405 9.334,0.711 C9.336,0.847 9.338,0.982 9.340,1.116 C9.340,1.345 9.340,1.574 9.340,1.802 C9.340,3.654 9.340,5.506 9.340,7.357 ZM15.401,10.761 C15.634,10.760 15.910,10.738 16.108,10.784 C16.593,10.895 16.922,11.238 16.994,11.768 C17.019,11.950 16.987,12.142 16.938,12.275 C16.883,12.426 16.805,12.547 16.712,12.658 C16.548,12.853 16.309,12.983 15.995,13.026 C15.798,13.027 15.600,13.029 15.402,13.030 C15.402,13.030 15.401,13.031 15.401,13.031 C15.401,13.830 15.401,14.630 15.401,15.428 C15.401,16.165 15.479,16.635 14.976,16.893 C14.861,16.951 14.696,17.011 14.511,16.989 C14.085,16.939 13.812,16.736 13.734,16.336 C13.711,16.217 13.721,16.061 13.721,15.923 C13.721,15.680 13.721,15.437 13.721,15.195 C13.721,14.474 13.721,13.752 13.721,13.031 C13.720,13.031 13.720,13.030 13.720,13.030 C13.455,13.031 13.148,13.050 12.940,12.990 C12.411,12.837 11.938,12.238 12.184,11.519 C12.234,11.371 12.313,11.250 12.402,11.142 C12.564,10.950 12.799,10.814 13.105,10.769 C13.293,10.742 13.520,10.760 13.721,10.761 C13.721,8.069 13.721,5.376 13.721,2.684 C13.721,2.208 13.721,1.732 13.721,1.255 C13.721,0.976 13.704,0.671 13.784,0.477 C13.882,0.241 14.079,0.084 14.346,0.019 C14.409,0.003 14.476,0.004 14.551,-0.005 C14.697,-0.022 14.840,0.031 14.937,0.074 C15.128,0.160 15.272,0.301 15.348,0.502 C15.419,0.689 15.401,0.981 15.401,1.241 C15.401,1.660 15.401,2.081 15.401,2.500 C15.401,5.254 15.401,8.007 15.401,10.761 Z"/> </svg>' alt="">

IE/Edge的显示

3.使用<img> + .svg 文件的decode代码（工具链接在最后列表）, IE 依然不能设置里面的高和宽
适用: Chrome, Firefox, Edge

<img src="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" alt="">

IE11的显示

4.使用<img> + .svg 文件的base64代码（工具链接在最后列表）IE 依然不能设置里面的高和宽
适用: Chrome, Firefox, Edge

<img src='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+' alt="">

IE11的显示

背景图片或者按钮，图标背景，我们还有用CSS background-image来设置的

A.同样， 直接在background-image里面用svg 文件，这种跟使用png没区别， 不能改变颜色，毫无意义。
适用: Chrome, Firefox, IE, Edge

<span class="svg-b svg-test-bg"></span>

css:
.svg-test-bg { background-image: url('../i/icon-rearrange.svg'); }

B.用svg 代码， IE 不显示
适用: Chrome, Firefox, Edge

<span class="svg-b svg-test-bg2"></span>

css:

.svg-test-bg2 { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="17px" height="17px"> <path fill-rule="evenodd" fill="rgb(255, 255, 255)" d="M3.277,3.954 C3.514,3.953 3.794,3.933 3.995,3.979 C4.476,4.091 4.802,4.442 4.870,4.974 C4.892,5.151 4.861,5.336 4.813,5.467 C4.758,5.615 4.683,5.736 4.591,5.846 C4.427,6.041 4.189,6.174 3.876,6.217 C3.691,6.243 3.472,6.223 3.277,6.223 C3.277,8.975 3.277,11.726 3.277,14.477 C3.277,14.899 3.277,15.321 3.277,15.742 C3.277,15.969 3.296,16.233 3.245,16.413 C3.161,16.709 2.949,16.894 2.644,16.966 C2.574,16.982 2.481,17.000 2.390,16.989 C1.952,16.938 1.677,16.730 1.606,16.310 C1.572,16.113 1.595,15.824 1.595,15.604 C1.595,15.176 1.595,14.748 1.595,14.321 C1.595,11.622 1.595,8.922 1.595,6.223 C1.360,6.225 1.080,6.245 0.881,6.199 C0.397,6.087 0.070,5.738 0.002,5.202 C-0.022,5.021 0.012,4.836 0.060,4.705 C0.115,4.556 0.193,4.436 0.286,4.325 C0.448,4.132 0.688,4.001 0.999,3.960 C1.184,3.935 1.401,3.954 1.595,3.954 C1.595,3.129 1.595,2.304 1.595,1.480 C1.595,1.053 1.554,0.601 1.728,0.348 C1.850,0.172 2.027,0.055 2.278,0.008 C2.326,-0.001 2.391,-0.012 2.449,-0.005 C2.815,0.037 3.025,0.136 3.174,0.396 C3.318,0.649 3.277,1.127 3.277,1.524 C3.277,2.334 3.277,3.144 3.277,3.954 ZM9.340,7.357 C9.578,7.356 9.858,7.336 10.058,7.383 C10.533,7.493 10.856,7.837 10.931,8.355 C10.957,8.537 10.926,8.735 10.876,8.871 C10.821,9.023 10.743,9.144 10.648,9.256 C10.488,9.448 10.249,9.579 9.942,9.621 C9.756,9.647 9.536,9.627 9.340,9.627 C9.340,11.472 9.340,13.319 9.340,15.165 C9.340,15.398 9.340,15.630 9.340,15.863 C9.340,16.002 9.351,16.155 9.333,16.283 C9.291,16.582 9.147,16.760 8.931,16.883 C8.817,16.948 8.641,17.011 8.452,16.989 C8.024,16.939 7.750,16.738 7.672,16.335 C7.643,16.182 7.659,15.979 7.659,15.806 C7.659,15.521 7.659,15.236 7.659,14.951 C7.659,13.176 7.659,11.402 7.659,9.627 C7.420,9.628 7.138,9.648 6.938,9.602 C6.382,9.472 5.855,8.840 6.124,8.108 C6.179,7.959 6.257,7.839 6.349,7.729 C6.507,7.541 6.743,7.409 7.042,7.366 C7.230,7.338 7.458,7.357 7.659,7.357 C7.659,5.594 7.659,3.830 7.659,2.066 C7.659,1.768 7.659,1.471 7.659,1.173 C7.659,1.008 7.644,0.818 7.669,0.670 C7.728,0.325 7.940,0.117 8.250,0.027 C8.320,0.007 8.393,0.005 8.476,-0.005 C8.651,-0.025 8.823,0.040 8.930,0.101 C9.149,0.226 9.292,0.405 9.334,0.711 C9.336,0.847 9.338,0.982 9.340,1.116 C9.340,1.345 9.340,1.574 9.340,1.802 C9.340,3.654 9.340,5.506 9.340,7.357 ZM15.401,10.761 C15.634,10.760 15.910,10.738 16.108,10.784 C16.593,10.895 16.922,11.238 16.994,11.768 C17.019,11.950 16.987,12.142 16.938,12.275 C16.883,12.426 16.805,12.547 16.712,12.658 C16.548,12.853 16.309,12.983 15.995,13.026 C15.798,13.027 15.600,13.029 15.402,13.030 C15.402,13.030 15.401,13.031 15.401,13.031 C15.401,13.830 15.401,14.630 15.401,15.428 C15.401,16.165 15.479,16.635 14.976,16.893 C14.861,16.951 14.696,17.011 14.511,16.989 C14.085,16.939 13.812,16.736 13.734,16.336 C13.711,16.217 13.721,16.061 13.721,15.923 C13.721,15.680 13.721,15.437 13.721,15.195 C13.721,14.474 13.721,13.752 13.721,13.031 C13.720,13.031 13.720,13.030 13.720,13.030 C13.455,13.031 13.148,13.050 12.940,12.990 C12.411,12.837 11.938,12.238 12.184,11.519 C12.234,11.371 12.313,11.250 12.402,11.142 C12.564,10.950 12.799,10.814 13.105,10.769 C13.293,10.742 13.520,10.760 13.721,10.761 C13.721,8.069 13.721,5.376 13.721,2.684 C13.721,2.208 13.721,1.732 13.721,1.255 C13.721,0.976 13.704,0.671 13.784,0.477 C13.882,0.241 14.079,0.084 14.346,0.019 C14.409,0.003 14.476,0.004 14.551,-0.005 C14.697,-0.022 14.840,0.031 14.937,0.074 C15.128,0.160 15.272,0.301 15.348,0.502 C15.419,0.689 15.401,0.981 15.401,1.241 C15.401,1.660 15.401,2.081 15.401,2.500 C15.401,5.254 15.401,8.007 15.401,10.761 Z"/> </svg>'); }

IE显示：

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

<span class="svg-b svg-test-decode"></span>

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

<span class="svg-b svg-test-base"></span>

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,

<span class="svg-b svg-test-bgsvgo"></span>

CSS：

.svg-test-bgsvgo { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17"><path fill-rule="evenodd" fill="#939393" d="M3.277 3.954c.237-.001.517-.021.718.025.481.112.807.463.875.995.022.177-.009.362-.057.493-.055.148-.13.269-.222.379a1.097 1.097 0 0 1-.715.371c-.185.026-.404.006-.599.006v9.519c0 .227.019.491-.032.671-.084.296-.296.481-.601.553a.756.756 0 0 1-.254.023c-.438-.051-.713-.259-.784-.679-.034-.197-.011-.486-.011-.706v-1.283-8.098c-.235.002-.515.022-.714-.024-.484-.112-.811-.461-.879-.997a1.09 1.09 0 0 1 .058-.497 1.26 1.26 0 0 1 .226-.38c.162-.193.402-.324.713-.365.185-.025.402-.006.596-.006V1.48c0-.427-.041-.879.133-1.132a.816.816 0 0 1 .55-.34.589.589 0 0 1 .171-.013c.366.042.576.141.725.401.144.253.103.731.103 1.128v2.43zM9.34 7.357c.238-.001.518-.021.718.026.475.11.798.454.873.972a1.128 1.128 0 0 1-.283.901c-.16.192-.399.323-.706.365-.186.026-.406.006-.602.006V15.863c0 .139.011.292-.007.42a.76.76 0 0 1-.402.6.807.807 0 0 1-.479.106c-.428-.05-.702-.251-.78-.654-.029-.153-.013-.356-.013-.529v-.855-5.324c-.239.001-.521.021-.721-.025-.556-.13-1.083-.762-.814-1.494a1.26 1.26 0 0 1 .225-.379c.158-.188.394-.32.693-.363.188-.028.416-.009.617-.009V2.066v-.893c0-.165-.015-.355.01-.503.059-.345.271-.553.581-.643.07-.02.143-.022.226-.032a.781.781 0 0 1 .454.106.765.765 0 0 1 .404.61l.006.405v6.241zm6.061 3.404c.233-.001.509-.023.707.023.485.111.814.454.886.984a1.11 1.11 0 0 1-.056.507 1.252 1.252 0 0 1-.226.383c-.164.195-.403.325-.717.368l-.593.004-.001.001v2.397c0 .737.078 1.207-.425 1.465a.824.824 0 0 1-.465.096c-.426-.05-.699-.253-.777-.653-.023-.119-.013-.275-.013-.413v-.728-2.164l-.001-.001c-.265.001-.572.02-.78-.04-.529-.153-1.002-.752-.756-1.471.05-.148.129-.269.218-.377.162-.192.397-.328.703-.373.188-.027.415-.009.616-.008V2.684 1.255c0-.279-.017-.584.063-.778.098-.236.295-.393.562-.458.063-.016.13-.015.205-.024a.764.764 0 0 1 .386.079.752.752 0 0 1 .411.428c.071.187.053.479.053.739v9.52z"/></svg>'); }

IE11/Firefox显示：

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

<span class="svg-b svg-test-bgmarsk"></span>

.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,<svg> ...</svg>) 然后在里面的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