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

如何在不使用SVG进行Base64编码的情况下使用Stylus预处理器在CSS中embeddedSVG数据uri？

喜欢这个：

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

而不是这个：

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

通常我用stylus.url()embedded图像，但它也将Base64编码SVG。

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

我找不到embeddedSVG的方法。

Answer 1

手写笔现在具有内置的这个function：

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

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

Answer 2

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

链接到该模块： 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 3

使用CSS Literal：

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

编译为：

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