我通过将类应用于元素来设置图标，因此这些类会更改属性background-image并为其设置URL。
让我们看一个例子：
.example-icon {background-image: url("data:image/svg+xml,%3Csvg%20id%3D%27Layer_1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20195.6%20107.8%27%3E%3Cpath%20fill%3D%27%23B5B5B5%27%20class%3D%27st0%27%20d%3D%27M97.8%20107.8c-2.6%200-5.1-1-7.1-2.9L2.9%2017.1C-1%2013.2-1%206.8%202.9%202.9%206.8-1%2013.2-1%2017.1%202.9l80.7%2080.7%2080.7-80.7c3.9-3.9%2010.2-3.9%2014.1%200%203.9%203.9%203.9%2010.2%200%2014.1l-87.8%2087.8c-1.9%202-4.4%203-7%203z%27%2F%3E%3C%2Fsvg%3E");}
其中只包含此svg但url编码：
<svg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 195.6 107.8'><path fill='#B5B5B5' class='st0' d='M97.8 107.8c-2.6 0-5.1-1-7.1-2.9L2.9 17.1C-1 13.2-1 6.8 2.9 2.9 6.8-1 13.2-1 17.1 2.9l80.7 80.7 80.7-80.7c3.9-3.9 10.2-3.9 14.1 0 3.9 3.9 3.9 10.2 0 14.1l-87.8 87.8c-1.9 2-4.4 3-7 3z'/></svg>
这非常有效（在所有浏览器中编码并仅在Chrome中解码）但是当我尝试在SVG中设置任何样式时出现问题。例如：
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 20 20" width="20" height="20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<style type="text/css">
.st0{fill:#00FFFF;stroke:#FF7676;stroke-miterlimit:10;}
</style>
<circle class="st0" cx="10" cy="10" r="9.5"/>
<path class="st1" d="M5,10h10 M10,5v10"/>
</svg>
这只是另一个SVG，但内部有样式，问题是这在 IE 11 中无法工作（编码或解码）。
这是我正在使用的编码版本：
%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3A%2300FFFF%3Bstroke%3A%23FF7676%3Bstroke-miterlimit%3A10%3B%7D%0A%3C%2Fstyle%3E%0A%3Ccircle%20class%3D%22st0%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%229.5%22%2F%3E%0A%3Cpath%20class%3D%22st1%22%20d%3D%22M5%2C10h10%20M10%2C5v10%22%2F%3E%0A%3C%2Fsvg%3E
我知道IE只会加载正确形成的网址，但这是一个已编码的网址。
关于可能发生的事情的任何想法？
编辑：要求数据不以base 64编码。
答案 0 :(得分：2)
<style> {...} </style>元素导致解析CSS内容时出现问题。您可以使用base64编码的字符串而不是URL编码的字符串来解决此问题：
.example-icon {
background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDIwIDIwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+IDxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+IC5zdDB7ZmlsbDojMDBGRkZGO3N0cm9rZTojRkY3Njc2O3N0cm9rZS1taXRlcmxpbWl0OjEwO30gPC9zdHlsZT4gPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMTAiIGN5PSIxMCIgcj0iOS41Ii8+IDxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik01LDEwaDEwIE0xMCw1djEwIi8+IDwvc3ZnPg==');
width: 20px;
height: 20px;
}<div class="example-icon"></div>
签入chrome，firefox，safari，即＆gt; = 9
如果在编码之前从字符串中删除所有换行符（\ r \ n）和制表符（\ t），则编码的网址将起作用：
.example-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%2300FFFF%3Bstroke%3A%23FF7676%3Bstroke-miterlimit%3A10%3B%7D%20%3C%2Fstyle%3E%20%3Ccircle%20class%3D%22st0%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%229.5%22%2F%3E%20%3Cpath%20class%3D%22st1%22%20d%3D%22M5%2C10h10%20M10%2C5v10%22%2F%3E%20%3C%2Fsvg%3E");
width: 20px;
height: 20px;
}<div class="example-icon"></div>
还检查了chrome，firefox，safari，即＆gt; = 9