D
D
Daniil Postnov2019-01-09 16:24:26
JavaScript
Daniil Postnov, 2019-01-09 16:24:26

How to solve the problem with negative viewBox values ​​in svg?

I'm making an svg sprite using the gulp-svg-sprites plugin .
Here is the task to create the sprite:

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

The problem is that if the svg in the viewBox has a negative value, it becomes positive after compilation and NaN is added in front of it.
Initial value: viewBox="-49 141 512 512"
After compilation: viewBox="NaN 49 141 512 512"
Icons with a negative value look cropped.
Has anyone encountered such a problem? Any ideas how to solve?
If not, please recommend a good svg sprite plugin. Thanks

Answer the question

In order to leave comments, you need to log in

2 answer(s)
E
Eugene, 2019-01-09
@iamd503

Re-save the svg so that everything is zero-based. It happens that yes, when you save from a chandelier.

S
Sergey delphinpro, 2019-01-09
@delphinpro

I always pre-prepare svg icons in a chandelier - I bring them to a single size (viewBox), usually 128 or 256 and align the icon inside the area, as well as by fractional pixels. Then I save it in svg, which are beautifully and without glitches at a gallop.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question