Css 不带base64编码的手写笔内联SVG数据uri

如何使用预处理器在CSS中嵌入SVG数据uri，而无需对SVG进行Base64编码

像这样：

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

通常我使用

stylus.url（）

嵌入图像，但它也会对SVG进行Base64编码

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

---

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

因为我找不到一个固定的方法来实现这一点，所以我不得不自己解决它。我编写了一个简单的节点模块，它包装了

stylus.url（）

，但替换了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 + "')");

found=stylus.utils.lookup（url.string，options.path）；
如果（！found）返回文本；
buf=fs.readFileSync（已找到）；
buf=字符串（buf）
.替换（/，''）
.替换（/^\s+|\s+$/g，“”）
.替换（/（\r\n |\n |\r）/gm“”）；
返回新的stylus.nodes.Literal（“url（'data:image/svg+xml；utf8，“+buf+”）”）；

手写笔现在内置了以下功能：

2016年3月5日，版本

0.54.0

中添加了支持

utf8

的

embedurl

功能。

使用CSS文字：

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

编译至：

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

---

你不能在css中调用externat.svg文件吗？类似背景：url（youshape.svg）；此外，背景图像（甚至SVG）也不是“内联图像”。@Paulie_D我习惯于SASS和Compass，其中的方法字面上被称为

inline-image（）

，所以这让我很困惑。你叫它什么？“嵌入”？

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