Gulp图像优化删除svg符号
Gulp imagemin optimization removes svg symbol
这是我第一次使用Gulp任务运行器或任何类型的任务运行器。我希望我能以一种可理解的方式陈述我的问题。
我有一个名为svg-system.svg
的svg文件,包含:
<svg xmlns="http://www.w3.org/2000/svg">
<!-- facebook icon -->
<symbol id="facebook" role="img" aria-labelledby="title desc" viewBox="0 0 9.3 20">
<title id="title">Logo af Facebook</title>
<desc id="desc">Logoet bruges til link indikator for at tilgå vores Facebook side eller dele os.</desc>
<path d="M9.3,6.5L8.9,10H6.1c0,4.5,0,10,0,10H2c0,0,0-5.5,0-10H0V6.5h2V4.2C2,2.6,2.8,0,6.2,0l3.1,0v3.4
c0,0-1.9,0-2.2,0c-0.4,0-0.9,0.2-0.9,1v2.1H9.3z"/>
</symbol>
</svg>
我想压缩文件/优化它为我的dist节省一些千字节。
我在gulpfile.js
中的配置是这样的:
gulp.task('images', function() {
return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
// Caching images that ran through imagemin
.pipe(cache(imagemin({
options: {
optimizationLevel: 3,
progessive: true,
interlaced: true,
removeViewBox:false,
removeUselessStrokeAndFill:false,
cleanupIDs:false
}
})))
.pipe(gulp.dest('dist/images'));
});
当我运行任务时,它只输出以下内容的svg-system.svg
:
<svg xmlns="http://www.w3.org/2000/svg"/>
有什么建议吗?或者你自己看到这个问题并修复了吗?欢呼。 您有正确的总体思路:将cleanupIDs
设置为false
确实会保留<symbol>
。然而,你做这件事的方式是错误的。
你试图传递一个选项对象给imagemin()
。虽然gulp-imagemin
实际上有一个options
参数,但它只支持verbose
选项。您指定的任何选项都不会传递给svgo
。
你需要显式地将这些选项传递给svgo
插件。你这样做的方式真的很奇怪和复杂,但是你可以这样做:
imagemin([
imagemin.svgo({
plugins: [
{ optimizationLevel: 3 },
{ progessive: true },
{ interlaced: true },
{ removeViewBox: false },
{ removeUselessStrokeAndFill: false },
{ cleanupIDs: false }
]
}),
imagemin.gifsicle(),
imagemin.jpegtran(),
imagemin.optipng()
])
相关文章:
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 如何使用javascript从主svg对象动态创建svg视图框
- 如何更改<svg>标记为<img>用js标记
- 锚点元素不't使用svg时,请打开EDGE上的href
- 在.csv文件中写入学位符号
- 使用相同的数据集绘制各种符号
- 带有填充属性的SVG矩形显示在包含元素的上方插入框阴影
- 使用onclick绘制SVG路径
- SVG/JavaScript:尝试选择和更改多边形点
- 顺时针旋转Svg元件
- 禁用SVG拖动
- 在select元素中显示highchart dashstyle(svg)
- SVG 符号不会触发加载事件(仅在 Firefox 中).我寻找解决方法
- SVG-精灵:符号转换为单个SVG图标
- 无法在谷歌地图符号 (svg) 标记中填充颜色
- 使用Google Maps API旋转SVG符号以匹配飞机航向
- 如何为文本生成SVG路径符号
- Gulp图像优化删除svg符号
- 批量导出符号到SVG-Illustrator
- D3 SVG树图与不同的节点符号