css – 没有base64编码的Stylus内联SVG数据uri

如何在没有SVG进行Base64编码的情况下使用 Stylus预处理器将SVG数据uri嵌入到CSS中？

像这样：

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

而不是这个：

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

Normaly我使用stylus.url()来嵌入图像,但它也会使用Base64编码SVG.

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

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

解决方法

由于我找不到既定的方法来做到这一点,我不得不自己解决.我编写了一个包含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 + "')");