尽管 svg 本身就是一个页面元素，并且其看起来与图片无异，但是其并不支持右键复制等功能，而浏览器自带的 Base64 编码函数则可以在修改后实现需求。
这是一篇最后编辑于 6 年前 的文章，其内容可能与目前实际情况差异较大，请注意甄别
将 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 转义的）