一饮而尽imagemin打破SVG面具

我有一个SVG文件是这样的：一饮而尽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" /> 
     <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>

我使用一饮而尽，imagemin压缩我所有的图像，包括SVGs。具体任务如下所示：

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压缩？我看过文档，看不到方法。

来源

2016-08-02 Coop

@RobertLongson不，不要认为这有什么用处恐怕 – Coop

那么这样呢？ http://stackoverflow.com/questions/38023039/using-gulp-to-create-an-svg-sprite-without-compression/38036872#38036872 –

以下为我工作：

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文件将被最小化。

来源

2016-08-02 17:34:32

究竟是我之后！谢谢 – Coop

一饮而尽imagemin打破SVG面具

回答

相关问题