Как решить проблему с отрицательными значениями viewBox у svg?

Question

[Даниил Постнов]

Я делаю svg-спрайт с помощью плагина gulp-svg-sprites.

Вот таск для создания спрайта:

gulp.task('svg-sprite', function (cb) {
    return gulp.src('src/images/svg-separate/**/*.svg')
        .pipe(svgSprite({
            mode: "symbols",
            // preview: false,
            selector: "svg-%f",
            svg: {
                symbols: 'svg_sprite.pug'
            }
        }
        ))
        .pipe(gulp.dest('src/pug/partails/'))
});

Проблема в том, что если у svg в viewBox есть отрицательное значение - оно после компиляции становится положительным и перед ним добавляется NaN.

Начальное значение: viewBox="-49 141 512 512"
После компиляции: viewBox="NaN 49 141 512 512"

Иконки с отрицательным значением выглядят обрезано.
Сталкивался ли кто-то с такой проблемой? Есть идеи как можно решить?
Если нет, посоветуйте хороший плагин для svg-спрайтов. Спасибо

Comments

[Максим Тимофеев]

Для багов отдельных библиотек есть же репы этих библиотек: https://github.com/jkphl/gulp-svg-sprite/issues/62

Answer 1

[Евгений]

Пересохрани svg, чтобы по нулям всё было. Бывает такое да, когда из люстры сохраняешь.

Answer 2

[Сергей delphinpro]

Я всегда svg иконки предварительно подготавливаю в люстре — привожу к единому размеру (viewBox), обычно 128 или 256 и выравниваю иконку внутри области, а также по дробным пикселям. Потом сохраняю в svg, которые прекрасно и без глюков хаваются галпом.