0

I create a svg sprite using the gulp-svg-sprites plugin. After compilation, negative viewBox values are replaced with positive values and NaN is added before them. Icons with negative values look incomplete, cropped. Help solve this issue. Thank you

gulp task


    gulp.task('svg-sprite', function () {

        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/'))

    });

init viewBox: viewBox="-89 140 512 512"

finish viewBox in output: viewBox="NaN 89 140 512 512"

expected viewBox in output: viewBox="-89 140 512 512"

  • Maybe the simplest solution would be to edit your svg so the viewbox starts at 0,0 But perhaps someone more familiar with this plugin has a solution to the bug. – Ted Jan 09 '19 at 16:51
  • It's only a hunch, but after looking at upstream [svg-sprite-data](https://github.com/shakyShane/svg-sprite-data/blob/fa2bd9e68df3dd5906153333245aa06a5ac4b2b3/lib/svg-obj.js#L193), maybe setting an explicit **numeric** value for padding can help. – ccprog Jan 09 '19 at 17:17

0 Answers0