gulp imagemin 打破 SVG 蒙版

Question

我有一个这样的 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 压缩？我已经查看了文档，但找不到方法。

Answer 1

以下对我有用：

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() 的数组中删除整个 imagemin.svgo() 调用。这样只有 .gif、.jpg 和 .png 文件会被最小化。

gulp imagemin 打破 SVG 蒙版

gulp imagemin breaking SVG mask

javascript

svg

gulp

imagemin