尽管 svg 本身就是一个页面元素，并且其看起来与图片无异，但是其并不支持右键复制等功能，而浏览器自带的 Base64 编码函数则可以在修改后实现需求。

<h1 id="-svg--img--base64-">将 SVG 放置在 img 中显示及浏览器 base64 编码</h1>
<h2 id="base64-">base64 编码增强</h2>
浏览器本身是拥有 Base64 功能的，对应的编码和解码是<code>btoa()</code>与<code>atob()</code>，但其存在一个问题：只支持 ASCII 字符。而几乎在大部分情况下，我们需要的字符集都应该是 UTF-8，而其并不能很好地进行编码操作，会提示如下错误：
<pre style="background-color:#fff">VM2479:1 Uncaught DOMException: Failed to execute &#39;btoa&#39; on &#39;Window&#39;: The string to be encoded contains characters outside of the Latin1 range.
 at &lt;anonymous&gt;:1:1
</pre>为了扩展其功能，可以先将非 ASCII 字符转换为另一种表示形式。在 HTML 中，恰好就有 HTML 转义字符很符合这一需求。 
大概思路就是首先对字符进行替换，而后再使用<code>btoa()</code>进行编码，实现如下：
<pre style="background-color:#fff">const base64 = str =&gt; window.btoa(str.replace(/[\u00A0-\u2666]/g, c =&gt; `&amp;#${c.charCodeAt(0)};`));
</pre><h2 id="-svg--img-">将 svg 放在 img 中</h2>
最简单的办法是<code>&lt;img src=&quot;xxx.svg&quot; /&gt;</code>，但这并不是想描述的情形。假定 svg 本身就需要作为页面的一部分，而非单独的文件。
如果存在前端图标的使用经验，可以得知 svg 本身是可以以 base64 作为链接成为页面的一部分的。 
而实际上，svg 甚至不需要 base64 转码都可以作为 img 的链接值。
如下述两种写法，就是等价的使用 base64 和直接使用 svg 作为 img 链接的形式。
<pre style="background-color:#fff">&lt;img src=&#34;data:image/svg+xml;base64, PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxsaW5lIHgxPScwJyB5MT0nMCcgeDI9JzIwMCcgeTI9JzIwMCcgc3R5bGU9J3N0cm9rZTpyZ2IoMjU1LDAsMCk7c3Ryb2tlLXdpZHRoOjInLz48L3N2Zz4=&#34;/&gt;

&lt;img src=&#34;data:image/svg+xml;utf8, &lt;svg xmlns=&#39;http://www.w3.org/2000/svg&#39;&gt;&lt;line x1=&#39;0&#39; y1=&#39;0&#39; x2=&#39;200&#39; y2=&#39;200&#39; style=&#39;stroke:rgb(255,0,0);stroke-width:2&#39;/&gt;&lt;/svg&gt;&#34; /&gt;
</pre>对于简单的需求，直接使用 svg 可能就足够了，但是实际使用中，svg 内部可能会包含各种有特殊含义的符号。比如双引号，是不可以出现在 src 中的。诸如此类的问题将会导致直接使用 svg 作为 img 的链接非常麻烦。
而如果使用 base64 则可以很好地解决该问题。对于存在特殊符号的 svg，则可以使用上述改进的 base64 函数即可（base64 本身也是支持 HTML 转义的）
<h2 id="heading">参考资料</h2>
<ul>
<li><a href="https://stackoverflow.com/questions/23223718/failed-to-execute-btoa-on-window-the-string-to-be-encoded-contains-characte">Stack Overflow - Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.</a></li>
<li><a href="https://stackoverflow.com/questions/24337271/base64-svg-html-image-is-not-displayed">Stack Overflow - Base64 / SVG HTML image is not displayed</a></li>
</ul>