svg 到内联 svg 数据编译器

Question

我想知道是否有任何编译器能够解析 css 或 scss 文件，用内联 svg 数据替换对 *.svg 文件的所有引用。我发现了这个：

body { background-image: 
    url("/assest/svg/test.svg");
  }

会变成

body { background-image: 
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='%23F00'/><stop offset='90%' stop-color='%23fcc'/> </linearGradient><rect fill='url(%23gradient)' x='0' y='0' width='100%' height='100%'/></svg>");
  }

我正在寻找一种制作可移植 css 文件而无需任何依赖项的方法。到目前为止，我发现：https://github.com/jkphl/ 但到目前为止我的测试并未表明数据内联可能有效。有什么想法吗？

Answer 1

Compass 允许您使用 inline-image 助手内联图像...

background-image: inline-image("/assest/svg/test.svg");

svg 到内联 svg 数据编译器

svg to inline svg data compiler

svg

compilation

inline