使用gulp可以从svg data-uri生成后备背景图像吗？

Question

我有一个较少的图标混入，它读取一小套svg图标，并将结果输出为具有背景属性的css类。

对于我当前的项目来说，这是使用SVG的最有效的方式。较少的混合还添加了后备背景图像url，引用了png。

我为项目选择的构建任务运行器是gulp，当任务运行时，生成的示例css输出遵循以下模式：

.rss {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto;
  background-color: #ee802f;
}
.no-svg .rss {
  background-image: url('/wordpress/wp-content/themes/theme/images/rss.png');
}
.svg .rss {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2250%22%20height%3D%2250%22%20viewBox%3D%220%200%2050%2050%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M13.296%2040.908c-2.34%200-4.243-1.89-4.243-4.23%200-2.33%201.902-4.24%204.243-4.24%202.354%200%204.25%201.91%204.25%204.24%200%202.342-1.897%204.23-4.25%204.23zm10.67.033c0-3.992-1.554-7.753-4.37-10.564C16.783%2027.556%2013.037%2026%209.057%2026V19.89c11.603%200%2021.05%209.443%2021.05%2021.055h-6.14v-.002zm11.104-.77c0-14.208-11.555-25.775-25.75-25.775V8.28c17.577%200%2031.883%2014.313%2031.883%2031.89H35.07z%22%2F%3E%3C%2Fsvg%3E");
}

此时，png文件不存在。

我要实现的是一个在gulp中的解决方案，它将查找每个数据url的svg，然后生成png回退图像文件。这样的事情有可能发生吗？

谢谢!

Answer 1

如果你使用的是精灵-svgfallback就可以了，它会为IE8及更低版本生成一个SVG精灵和第二个PNG精灵。