一飲而盡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面具

回答

相關問題