将 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 转义的)