没有 base64 编码的手写笔内联 SVG 数据 uri

Question

如何使用 Stylus 预处理器在 CSS 中嵌入 SVG 数据 uri，而无需对 SVG 进行 Base64 编码？

像这样：

background: url('data:image/svg+xml;utf8,<svg>[...]</svg>');

而不是这个：

background: url('data:image/svg+xml;base64,PD94bWwg[...]');

通常我使用 stylus.url() 嵌入图像，但它也会对 SVG 进行 Base64 编码。

我想使用数据 uris 而不是外部文件来保存文件请求。而且我已经意识到 Base64 编码 SVG 实际上会增加字节而不是减少大小。

我找不到按原样嵌入 SVG 的方法。

Answer 1

由于找不到既定的方法来做到这一点，我不得不自己解决。我写了一个简单的节点模块，它包装了 stylus.url() 但替换了 SVG 的内联方式。

Link 到模块：https://www.npmjs.com/package/stylus-inline-svg

除了一些检查，它基本上是这样做的：

found = stylus.utils.lookup(url.string, options.paths);

if(!found) return literal;

buf = fs.readFileSync(found);

buf = String(buf)
    .replace(/<\?xml(.+?)\?>/, '')
    .replace(/^\s+|\s+$/g, '')
    .replace(/(\r\n|\n|\r)/gm, '');

return new stylus.nodes.Literal("url('data:image/svg+xml;utf8," + buf + "')");

Answer 2

Stylus 现在内置了以下功能：

http://stylus-lang.com/docs/functions.url.html

2016 年 3 月 5 日在版本 0.54.0 中添加了支持 utf8 的 embedurl 函数。

Answer 3

使用CSS文字：

@css {
   .svg {
      background: url('data:image/svg+xml;base64,PD94bWwg[...]');
   }
}

编译为：

   .svg {
      background: url('data:image/svg+xml;base64,PD94bWwg[...]');
   }

没有 base64 编码的手写笔内联 SVG 数据 uri

Stylus inline SVG data uri without base64 encoding

css

node.js

svg

stylus

data-uri