2

次のような 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>

SVG を含むすべての画像を圧縮するために gulp-imagemin を使用しています。具体的なタスクは次のようになります。

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 圧縮を無効にする方法はありますか? ドキュメントを見ましたが、方法がわかりません。

4

1 に答える 1