gulp-imagemin уменьшает файл SVG до 0 КБ

Question

У меня есть один файл SVG, который содержит несколько <symbol> теги, которые представляют значки. Это выглядит примерно так:

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="icon-arrow_carrot_up_alt" viewBox="0 0 0 0">
    <path d="M544 1024c265.088 0 480-214.912 480-480s-214.912-480-480-480-480 214.912-480 480 214.912 480 480 480zM313.728 601.152l207.552-207.552c6.272-6.272 14.464-9.344 22.72-9.344s16.448 3.072 22.72 9.344l207.552 207.552c12.48 12.48 12.48 32.768 0 45.248s-32.768 12.48-45.248 0l-185.024-185.024-185.024 185.024c-12.48 12.48-32.768 12.48-45.248 0s-12.48-32.768 0-45.248z" fill="none"></path>
  </symbol>
  <symbol id="icon-arrow_carrot-2down" viewBox="0 0 0 0">
    <path d="M702.592 523.648l-191.744 169.6-191.744-169.6c-12.544-12.544-32.96-12.544-45.504 0s-12.544 32.96 0 45.504l214.080 189.376c6.4 6.4 14.784 9.472 23.168 9.344 8.384 0.128 16.768-2.88 23.168-9.28l214.080-189.376c12.544-12.544 12.544-32.96 0-45.504s-32.96-12.608-45.504-0.064zM748.096 294.144c-12.544-12.544-32.96-12.544-45.504 0l-191.744 169.6-191.744-169.6c-12.608-12.544-33.024-12.544-45.568 0s-12.544 32.96 0 45.504l214.080 189.376c6.4 6.4 14.784 9.472 23.168 9.344 8.384 0.128 16.832-2.944 23.168-9.344l214.080-189.376c12.672-12.544 12.672-32.896 0.064-45.504z" fill="none"></path>
  </symbol>
  ...
</svg>

Я запускаю этот файл с помощью gulp imagemin, например так:

var gulp = require('gulp');
var changed = require('gulp-changed');
var imagemin = require('gulp-imagemin');

gulp.task('optimize-images', function() {
    return gulp.src(paths.img.src + '/**/*')
        .pipe(changed(paths.img.dest))
        .pipe(imagemin([
            imagemin.svgo({
                plugins: [
                    {removeViewBox: true},
                    {cleanupIDs: false}
                ]
            })
        ]))
        .pipe(gulp.dest(paths.img.dest));
});

Файл минимизируется и помещается в правильный каталог dest, однако в нем говорится, что он оптимизировал 100% файла, а его размер уменьшается до 0 КБ без содержимого файла. SVG полностью удален из файла.

Почему все содержимое файла svg уничтожается и как мне это исправить?

Answer 1

Lol Woops, я нашел эту проблему на svgo/svgo страница плагина, которая gulp-imagemin использует. Было отмечено, что:

<symbol> считается пустым, потому что не отображается. Вот почему он удаляется по умолчанию. Вы должны отключить removeUselessDefs, как предложено выше.

Поэтому я добавил следующие параметры в свою задачу следующим образом:

plugins: [
    {cleanupIDs: false},
    {removeUselessDefs: false},
    {removeViewBox: true},
]

Это все еще не работало, тогда я понял, что style="display: none;" был на <svg> тег, который означает, что он не отображается. SVG автоматически генерируется gulp-icomoon-builder пакет, так что это объясняет. Этот пакет предлагает возможность указать собственный внешний шаблон для создания файла, поэтому я создам его без встроенного стиля отображения.

Так что снимая display: none; стиль исправил это.