推理
我通过LESS 的方法将小型 SVG （图标）与我的 CSS捆绑在一起，以减少类似于 Octicons 或 Ye Olde CSS Sprites 等图标字体的目的的HTTP请求。data-uri
但是，LESS 将它们编码为Base64。
这在 SVG 的情况下是次优的，它可以是 UTF-8 中的数据 URI（示例）。
这是次优的三个原因：
1：Base64 对文本很傻
Base64 的目的是对二进制数据进行编码，每字节仅使用 6 位，使其可以安全地嵌入到文本文件中。这对于 PNG 和 JPEG 非常有用，但它会使任何文本文件无缘无故地增大 33%。如果您现在正在考虑“很好gzip地解决这个问题”，请记住...
2：在 Base64 中编码文本会gzip降低效率
要了解为什么会这样，请考虑以下问题：
btoa('width') === 'd2lkdGg='
btoa(' width') === 'IHdpZHRo'
btoa(' width') === 'ICB3aWR0aA=='
作为一个实际的例子，让我们用一个实际的 SVG进行实验：
$ wc -c *
68630 tiger.svg
25699 tiger.svg.gz
91534 tiger.txt
34633 tiger.txt.gz
即使经过 gzip 压缩，它仍然大了约 35%。
3：它忽略了一些免费的冗余来源
想想width上面的例子。每个 SVG 都会有这个子字符串，如果你在 CSS 中嵌入 SVG，你可能会在其他地方（或其他地方）有这个关键字，这gzip可能会受益（因为这是Huffman Coding的工作方式），但如果它被隐藏则不会Base64。
问题
如何data:使用 UTF-8 而不是 Base64 将 SVG 作为 URI 嵌入到 LESS 中？
我可以想象一千种涉及Grunt之类的构建工具的方法，但它破坏了我的工作流程，因为我无法style: include:less all.less从Jade视图（我在开发中这样做），甚至@import 'images.less';无法从更少的文件中执行操作.