手写笔内嵌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的方法。

Solutions Collecting From Web of "手写笔内嵌SVG数据uri没有base64编码"

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

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

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

由于我找不到一个既定的方法来做到这一点,我必须自己解决。 我写了一个简单的节点模块,它包装了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 + "')"); 

使用CSS Literal:

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

编译为:

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