直接使用 SVG XML 格式代码，首先要了解 Data URI的格式。
划重点：base64非必选项，不指定的时候，后面的 <data> 将使用 URL编码。
百分号编码(Percent-encoding), 也称作URL编码(URL encoding)，是特定上下文的统一资源定位符 (URL)的编码机制。
原理：ASCII 字符 = % + 两位 ASCII 码（十六进制）。
例如，字符 a 对应的 ASCII 码为 0x61，那么 URL 编码后得到 %61 。
前言：
Data URI 的格式中的 <data> 完全使用URL 编码也是可以的，如 encodeURIComponent('<svg version="1.1" viewBox= …</svg>')。
但是和转义前原始SVG相比，可读性差了很多，而且占用体积也变大了。
如果深入了解URL 编码的话，<data> 没必要全部编码的。
正文：
RFC3986文档规定，URL中只允许包含 未保留字符 以及 所有保留字符。
未保留字符：包含英文字母（a-zA-Z）、数字（0-9）、-_.~ 4个特殊字符。对于未保留字符，不需要百分号编码。
保留字符：具有特殊含义的字符 :/?#[]@ (分隔Url的协议、主机、路径等组件) 和 !$&'()*+,;= （用于在每个组件中起到分隔作用的，如&符号用于分隔查询多个键值对）。
受限字符或不安全字符：直接放在Url中的时候，可能会引起解析程序的歧义，因此这部分需要百分号编码，如%、空格、双引号"、尖号 <>等等。
综上所述，只需要对 受限字符或不安全字符 进行编码即可。
JS 处理比较简单，利用 replace 将 需要编码的字符 替换掉 即可，基本替换 以下的符号 就够用了：
svgToUrl (svgData) { encoded = encoded .replace(/<!--(.*)-->/g, '') // 亲测必须去掉注释 .replace(/[\r\n]/g, ' ') // 亲测最好去掉换行 .replace(/"/g, `'`) // 单引号是保留字符，双引号改成单引号减少编码 .replace(/%/g, '%25') .replace(/&/g, '%26') .replace(/#/g, '%23') .replace(/{/g, '%7B') .replace(/}/g, '%7D') .replace(/</g, '%3C') .replace(/>/g, '%3E') return `data:image/svg+xml,${encoded}` }
如果使用在 CSS 中，可利用 SASS版本3.3以上 的 三个API 对 SVG字符串做替换处理。
str_insert(string, insert, index)： 从 $string 第 $index 插入字符 $insert；
str_index(string, substring): 返回 $substring 在 $string 中第一个位置；
str_slice(string, start_at, end_at = nil): 返回从字符 $string 中第 $start_at 开始到 $end_at 结束的一个新字符串。
前人已有总结，可前往 https://github.com/leeenx/sass-svg/blob/master/sass-encodeuri.scss 查看完整代码。
3.2、SVG 压缩一般从 Sketch 导出 SVG ，冗余代码比较多，有条件的话建议使用 SVGO 压缩SVG的原本体积，比如清除换行、重复空格；删除文档声明；删除注释；删除desc描述等等。
四、总结SVG强大的地方在于，出其不意，炫酷，与众不同。
无论是微信公众号花式排版，foreignObject 标签实现截图，实现非比例缩放，或者 背景图直接使用 SVG XML 格式代码，还是上文没有提及的路径动画、描边动画、图形裁剪、滤镜等等，都可以玩出新的花样。
SVG 一个属性可成就一篇文章，学习 SVG 可以说是在挑战自己，欢迎加入 SVG 的学习队列。
五、参考内容 · 推荐阅读 三看 SVG Web 动效URL编码的奥秘
学习了，CSS中内联SVG图片有比Base64更好的形式
超级强大的SVG SMIL animation动画详解
详细教你微信公众号正文页SVG交互开发
SVG 简介与截图等应用
欢迎关注凹凸实验室博客：aotu.io
或者关注凹凸实验室公众号（AOTULabs），不定时推送文章：