Javascript 大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口

Javascript 大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口,javascript,svg,gulp,imagemin,Javascript,Svg,Gulp,Imagemin,我有这样一个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" /> <

我有这样一个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.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>


请注意,
掩码
已被移除(这是必需的),并且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
    会保留
  • 禁用
    cleanupIDs
    将保留
    id
    属性
如果出于某种原因,这对您不起作用,或者存在其他导致您出现问题的优化,那么您可以启用和禁用。只要试一下,直到你找到适合你的用例


如果其他所有操作都失败,只需从传递给
imagemin()
的数组中删除整个
imagemin.svgo()
调用即可。这样一来,只有
.gif
.jpg
.png
文件将被最小化。

@RobertLongson不,我恐怕这没有什么用处。那么呢?正是我想要的!谢谢