svg 可内联作为 background-img

[EchoZhaoH]

想到 background-image 我们第一时间想到的应该是图片，但是图片会有很多因素的影响，比如大小、网络等，今天说的是将 svg 内联作为 background-image，以下是格式：

background-image: url('data:image/svg+xml,<svg>xxxx</svg>');

如果我们直接这样将 svg 放入，有可能会无法显示，比如 svg 中有颜色的属性 #000000，其中 # 就回导致 svg 无法正常显示，我猜测的原因不是 svg 没有显示，而是已经显示了，但是颜色失效了，所以我们需要将 svg 的代码字符串放入 encodeURIComponent 函数处理才行，将 < > # " 等特殊字符转义。