假设现在有svg

<svg id='svg' width='100' height='20' viewBox='0 0 20 4' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='` 
       <path fill='none' stroke='#333' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/>
</svg>

我们可以直接将这段svg插入html中，或者将它单独保存起来，保存为.svg格式，然后在img中用src链接它。
那么如何作为将它作为图片内联使用呢？
这个比较常见，我们也经常会看到.jpg，.png格式图片的base64直接嵌入到代码中。
首先调用btoa，将代码字符串变成base64格式：

base64

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

btoa("<svg id='svg' width='100' height='20' viewBox='0 0 20 4' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='<path fill='none' stroke='#333' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/></svg>");

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

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

utf-8

还可以将它编码后直接放入。
首先执行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")
}