Оптимизация gulp imagemin удаляет символ svg

Question

Это первый раз, когда я использую Task-runner Gulp или любого вида задач. Надеюсь, я сформулирую свою проблему понятным образом.

У меня есть файл с именем SVG svg-system.svg, который содержит:

<svg xmlns="http://www.w3.org/2000/svg"> 
    <!-- facebook icon --> 
    <symbol id="facebook" role="img" aria-labelledby="title desc" viewBox="0 0 9.3 20"> 
     <title id="title">Logo af Facebook</title> 
     <desc id="desc">Logoet bruges til link indikator for at tilgå vores Facebook side eller dele os.</desc> 
     <path d="M9.3,6.5L8.9,10H6.1c0,4.5,0,10,0,10H2c0,0,0-5.5,0-10H0V6.5h2V4.2C2,2.6,2.8,0,6.2,0l3.1,0v3.4 
     c0,0-1.9,0-2.2,0c-0.4,0-0.9,0.2-0.9,1v2.1H9.3z"/> 
    </symbol> 
</svg> 

И я хотел бы, чтобы сжать файл/оптимизировать его для моего дист сохранить некоторые килобайт.

Мой confiq в gulpfile.js выглядит следующим образом:

gulp.task('images', function() { 
    return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)') 
    // Caching images that ran through imagemin 
    .pipe(cache(imagemin({ 
     options: { 
      optimizationLevel: 3, 
      progessive: true, 
      interlaced: true, 
      removeViewBox:false, 
      removeUselessStrokeAndFill:false, 
      cleanupIDs:false 
     } 
    }))) 
    .pipe(gulp.dest('dist/images')); 
}); 

Когда я запускаю задачу он выводит мой svg-system.svg с этим содержанием только:

<svg xmlns="http://www.w3.org/2000/svg"/> 

Любые предложения или вы видели эту проблему самостоятельно и починил это? Приветствия.

Answer 1

У вас есть правильная общая идея: установка cleanupIDs на false действительно будет поддерживать <symbol>. Однако то, как вы это делаете, неверно.

Вы пытаетесь передать объект опций imagemin(). В то время как gulp-imagemin действительно имеет аргумент options, он only supports the verbose option. Ни один из указанных вами параметров не передается по адресу svgo.

Вам необходимо явно передать эти параметры в плагин svgo. То, как вы делаете это честно довольно странно и сложно, но здесь вы идете:

imagemin([ 
    imagemin.svgo({ 
    plugins: [ 
     { optimizationLevel: 3 }, 
     { progessive: true }, 
     { interlaced: true }, 
     { removeViewBox: false }, 
     { removeUselessStrokeAndFill: false }, 
     { cleanupIDs: false } 
    ] 
}), 
imagemin.gifsicle(), 
imagemin.jpegtran(), 
imagemin.optipng() 
])