我有一个像这样的 SVG 文件:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient gradientUnits="objectBoundingBox" id="gradient" x2="0" y2="1">
<stop stop-offset="0" stop-color="transparent" />
<stop stop-color="rgba(255, 255, 255, 0.25)" offset="1"/>
</linearGradient>
<mask id="mask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
<rect width="1" height="1" fill="url(#gradient)"/>
</mask>
</defs>
</svg>
我正在使用 gulp-imagemin 来压缩我的所有图像,包括 SVG。具体任务如下:
gulp.task('images', function() {
return gulp.src('/src/img/**/*.*')
.pipe(imagemin().on('error', gutil.log))
.pipe(gulp.dest('/dist/img'));
});
非常适合我的大多数图像。但是对于上面的 SVG 文件,输出是:
<svg xmlns="http://www.w3.org/2000/svg"><defs><linearGradient gradientUnits="objectBoundingBox" id="a" x2="0" y2="1"><stop stop-color="transparent"/><stop stop-color="rgba(255, 255, 255, 0.25)" offset="1"/></linearGradient></defs></svg>
请注意,mask
已被删除(这是必需的)并且 ID 已更改。有没有办法阻止这种情况发生,甚至用这个插件禁用 SVG 压缩?我查看了文档,但没有找到方法。
最佳答案
以下内容对我有用:
gulp.task('images', function() {
return gulp.src('src/img/**/*.*')
.pipe(imagemin([
imagemin.svgo({
plugins: [
{ removeUselessDefs: false },
{ cleanupIDs: false}
]
}),
imagemin.gifsicle(),
imagemin.jpegtran(),
imagemin.optipng()
]).on('error', gutil.log))
.pipe(gulp.dest('dist/img'));
});
这是它生成的 SVG:
<svg xmlns="http://www.w3.org/2000/svg"><defs><linearGradient gradientUnits="objectBoundingBox" id="gradient" x2="0" y2="1"><stop stop-color="transparent"/><stop stop-color="rgba(255, 255, 255, 0.25)" offset="1"/></linearGradient><mask id="mask" maskContentUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%"><path fill="url(#gradient)" d="M0 0h1v1H0z"/></mask></defs></svg>
我基本上只是禁用了 imagemin.svgo()
的两个选项插件:
- 禁用
removeUselessDefs
保留<mask>
- 禁用
cleanupIDs
保留id
属性
如果由于某种原因这对您不起作用或者有其他优化导致您出现问题,可以使用 a whole list of options您可以启用和禁用。只要尝试它们,直到找到适合您的用例的。
如果一切都失败了,只需删除整个 imagemin.svgo()
从传递给 imagemin()
的数组调用。只有这样.gif
, .jpg
和.png
文件将被最小化。
关于javascript - gulp imagemin 打破 SVG 蒙版,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38725602/