我有一个 less icon mixin，它读取一小组 svg 图标并将结果输出为具有背景属性的 css 类。
就我目前的元素而言，这是使用 SVG 的最有效方式。 less mixin 还添加了后备背景图像 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 后备图像文件。 这样的事情甚至可能吗？
谢谢!
最佳答案
如果您使用的是 Sprite gulp-svgfallback 就可以了，它会为 IE8 及更低版本生成一个 SVG Sprite 和第二个 PNG Sprite 。
关于css - 使用 gulp 可以从 svg data-uri 生成后备背景图像吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31712193/