Question

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

像这样：

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的方法。

Answer 1

由于我无法找到既定的方法，我必须自己解决。我编写了一个包含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 + "')");

Answer 2

Stylus现在内置了这个功能：

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

2016年3月5日版embedurl中添加了utf8支持0.54.0的{{1}}功能。

Answer 3

使用CSS Literal：

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

编译为：

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

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

3 个答案: