Глоток 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 был удален (что важно) и идентификатор изменился. Есть ли способ, чтобы остановить это, или даже отключить сжатие 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.svgo() вызов из массива, который передается imagemin(), Только так .gif, .jpg а также .png файлы будут свернуты