css - 没有 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

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

模块链接: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 + "')");