没有 base64 编码的手写笔内联 SVG 数据 uri答案

【问题标题】：Stylus inline SVG data uri without base64 encoding没有 base64 编码的手写笔内联 SVG 数据 uri
【发布时间】：2023-03-11 14:06:02
【问题描述】：

如何使用 Stylus 预处理器将 SVG 数据 uri 嵌入 CSS 中，而不对 SVG 进行 Base64 编码？

像这样：

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

而不是这个：

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

我通常使用stylus.url() 来嵌入图像，但它也会对 SVG 进行 Base64 编码。

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

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

【问题讨论】：

你不能做一个 externat .svg 文件并在 css 中调用它吗？喜欢背景：url(youshape.svg);
另外，背景图片（甚至 SVG）不是“内嵌图片”。
@Paulie_D 我已经习惯了 SASS 和 Compass，其中的方法实际上被称为 inline-image()，所以这让我感到困惑。你会怎么称呼它？ “嵌入”？

标签： css node.js svg stylus data-uri

【解决方案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 + "')");

【讨论】：

【解决方案2】：

Stylus 现在内置了这个功能：

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

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

【讨论】：

【解决方案3】：

使用 CSS 文字：

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

编译为：

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

【讨论】：