html 内联图片,html中使用svg图片的两种内联写法

假设现在我们有一段svg:

我们可以直接将这段svg插入html中，或者将它单独保存起来，保存为.svg格式，然后在img中用src链接它。

那么如何作为将它作为图片内联使用呢？

base64

这个比较常见，我们也经常会看到.jpg，.png格式图片的base64直接嵌入到代码中。

首先调用btoa，将代码字符串变成base64格式：

/*--执行btoa，将字符串变成base64格式--*/

btoa("");

然后调用，格式为：data:image/svg+xml;base64,***，其中***为base64后的结果。

#abc{

background:url("data:image/svg+xml;base64,PHN2ZyBpZD0nc3ZnJyB3aWR0aD0nMTAwJyBoZWlnaHQ9JzIwJyB2aWV3Qm94PScwIDAgMjAgNCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyB4bWxuczp4bGluaz0nPHBhdGggZmlsbD0nbm9uZScgc3Ryb2tlPScjMzMzJyBkPSdNMCAzLjVjNSAwIDUtMyAxMC0zczUgMyAxMCAzIDUtMyAxMC0zIDUgMyAxMCAzJy8+PC9zdmc+")

}

utf-8

还可以将它编码后直接放入。

首先执行encodeURIComponent，因为如果直接放入的话，有些浏览器不识别：

encodeURIComponent("");

然后调用，格式为：data:image/svg+xml;utf-8,***，其中***为encode后的结果。

#abc{

background:url("data:image/svg+xml;utf-8,%3Csvg%20id%3D'svg'%20width%3D'100'%20height%3D'20'%20viewBox%3D'0%200%2020%204'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cpath%20fill%3D'none'%20stroke%3D'%23333'%20d%3D'M0%203.5c5%200%205-3%2010-3s5%203%2010%203%205-3%2010-3%205%203%2010%203'%2F%3E%3C%2Fsvg%3E")

}