html中%3csvg%3e标签作用,CSS中的内联SVG

对于仍在苦苦挣扎的人来说，我设法让所有现代浏览器IE11及以上版本都能正常运行。

base64对我来说没有选择，因为我想使用SASS根据任何给定的颜色生成SVG图标。例如：@include svg_icon(heart, #FF0000);这样我就可以用任何颜色创建一个特定的图标，只需要在CSS中嵌入一次SVG形状。(使用base64，你必须在你想要使用的每种颜色中嵌入SVG)

您需要注意三件事：

URL包含您的SVG 正如其他人所建议的那样，您需要对整个SVG字符串进行URL编码，以使其在IE11中工作。在我的情况下，我在诸如fill="#00FF00"和之类的字段中省略了颜色值，stroke="#FF0000"并用SASS变量替换它们，fill="#{$color-rgb}"因此可以用我想要的颜色替换它们。您可以使用任何在线转换器对字符串的其余部分进行URL编码。你最终得到一个像这样的SVG字符串：

％3Csvg％20xmlns％3D％27http％3A％2F％2Fwww.w3.org％2F2000％2Fsvg％27％20viewBox％3D％270％200％20494.572％20494.572％27％20width％3D％27512％27％20height％3D ％27512％27％3E％0A％20％20％3Cpath％20D％3D％27M257.063％200C127.136％200％2021.808％20105.33％2021.808％20235.266c0％2041.012 2010.535％％2079.541 2028.973％％20113.104L3.825 ％20464.586c345％2012.797％2041.813％2012.797％2015.467％200％2029.872-4.721％2041.813-12.797v158.184z％27％20fill％3D％27＃{$ color-rgb}％27％2F％3E％3C％2Fsvg％ 3E

在数据URL中使用UTF8 CHARSET在创建数据URL时，您需要省略其在IE11中工作的字符集。

NOT background-image：url(data：image / svg + xml; utf-8，％3Csvg％2 ....)

但是 background-image：url(数据：image / svg + xml，％3Csvg％2 ... 。)

使用RGB()INSTEAD OF HEX颜色 Firefox不喜欢SVG代码中的＃。因此，您需要将RGB颜色十六进制值替换为RGB值。

NOT fill =“＃FF0000”

但是填充=“rgb(255,0,0)”

在我的例子中，我使用SASS将给定的十六进制转换为有效的rgb值。正如评论中指出的那样，最好对您的RGB字符串进行URL编码(因此逗号变为％2C)

@mixin svg_icon($id, $color) {

$color-rgb: "rgb(" + red($color) + "%2C" + green($color) + "%2C" + blue($color) + ")";

@if $id == heart {

background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20494.572%20494.572%27%20width%3D%27512%27%20height%3D%27512%27%3E%0A%20%20%3Cpath%20d%3D%27M257.063%200C127.136%200%2021.808%20105.33%2021.808%20235.266c0%204%27%20fill%3D%27#{$color-rgb}%27%2F%3E%3C%2Fsvg%3E');

}

}

我意识到这对于非常复杂的SVG来说可能不是最好的解决方案(内联SVG从来就不是这种情况)，但对于只有几种颜色的平面图标，这真的很棒。

我能够省略一个完整的精灵位图，并在我的CSS中用内联SVG替换它，压缩后结果只有25kb左右。因此，这是限制网站必须执行的请求数量的好方法，而不会使CSS文件膨胀。