CSS样式中SVG引用方法兼容性考量

版权声明：本文为博主TONY原创文章，可随意转载，别客气。我的秋秋：3174-2324 https://blog.csdn.net/ffffffff8/article/details/83895645

SVG

Scalable Vector Graphics (SVG) 

.svg {
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2030%2030'%20%20%3E%3Cg%20%20stroke%3D'%23fff'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M2%2C10L2%2C20L5%2C20L13%2C25L13%2C5L5%2C10L5%2C10Z'%2F%3E%3Cpath%20d%3D'M18%2C10C%2022%2C12%2022%2C18%2018%2C20'%20%2F%3E%3Cpath%20d%3D'M22%2C6C%2028%2C10%2028%2C20%2022%2C24'%20%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.svg {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjUwOCIgaGVpZ2h0PSIyNTIuNyIgdmlld0JveD0iMCAwIDI1MDggMjUyLjciPjxwb2x5Z29uIHBvaW50cz0iNCwyNTIuNyAyNTA0LDAgMjUwNCwyNTIuNyIgc3R5bGU9ImZpbGw6I2U2ZWJlYSIgLz48L3N2Zz4=');
}

.svg {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3Cpolygon points='4,252.7 2504,0 2504,252.7' style='fill:%23e6ebea'/%3E%3C/svg%3E");
}

SVG引用：https://github.com/pfan123/svgtodataurl

SVG：https://www.w3.org/TR/SVG/

编码转换：https://meyerweb.com/eric/tools/dencoder/