将 SVG 放置在 img 中显示及浏览器 base64 编码

base64 编码增强

浏览器本身是拥有 Base64 功能的，对应的编码和解码是btoa()与atob()，但其存在一个问题：只支持 ASCII 字符。而几乎在大部分情况下，我们需要的字符集都应该是 UTF-8，而其并不能很好地进行编码操作，会提示如下错误：

VM2479:1 Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.
    at <anonymous>:1:1

为了扩展其功能，可以先将非 ASCII 字符转换为另一种表示形式。在 HTML 中，恰好就有 HTML 转义字符很符合这一需求。
大概思路就是首先对字符进行替换，而后再使用btoa()进行编码，实现如下：

const base64 = str => window.btoa(str.replace(/[\u00A0-\u2666]/g, c => `&#${c.charCodeAt(0)};`));

将 svg 放在 img 中

最简单的办法是<img src="xxx.svg" />，但这并不是想描述的情形。假定 svg 本身就需要作为页面的一部分，而非单独的文件。

如果存在前端图标的使用经验，可以得知 svg 本身是可以以 base64 作为链接成为页面的一部分的。
而实际上，svg 甚至不需要 base64 转码都可以作为 img 的链接值。

如下述两种写法，就是等价的使用 base64 和直接使用 svg 作为 img 链接的形式。

<img src="data:image/svg+xml;base64, PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxsaW5lIHgxPScwJyB5MT0nMCcgeDI9JzIwMCcgeTI9JzIwMCcgc3R5bGU9J3N0cm9rZTpyZ2IoMjU1LDAsMCk7c3Ryb2tlLXdpZHRoOjInLz48L3N2Zz4="/>

<img src="data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='0' x2='200' y2='200' style='stroke:rgb(255,0,0);stroke-width:2'/></svg>" />

对于简单的需求，直接使用 svg 可能就足够了，但是实际使用中，svg 内部可能会包含各种有特殊含义的符号。比如双引号，是不可以出现在 src 中的。诸如此类的问题将会导致直接使用 svg 作为 img 的链接非常麻烦。

而如果使用 base64 则可以很好地解决该问题。对于存在特殊符号的 svg，则可以使用上述改进的 base64 函数即可（base64 本身也是支持 HTML 转义的）