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屬性

如果由於某種原因這對您不起作用，或者有其他優化導致您出現問題，則可以啟用和禁用所有選項 。 只需嘗試一下，直到找到適合您的用例的產品即可。

如果其他所有操作均失敗，則只需從傳遞到imagemin()的數組中刪除整個imagemin.svgo()調用即可。 這樣，僅.gif ， .jpg和.png文件將被最小化。