S
S
Serufim2018-07-10 16:58:17
css
Serufim, 2018-07-10 16:58:17

Why does text and stroke disappear from svg images when assembled into a sprite using gulp?

In general, I have a picture 5b44bb0420907893896987.pngand when building it through Gulp, the outline and text disappear from it. 5b44bb4a8c967548530823.png
Here is the gulp task

gulp.task('svgSpriteBuild', function () {
    return gulp.src('img/svg/*.svg')
    // minify svg
        .pipe(svgmin({
            js2svg: {
                pretty: true
            }
        }))
        .pipe(svgSprite({
            mode: {
                symbol: {
                    sprite: "sprite.svg",
                    render: {
                        scss: {
                            dest:'scss/_svg_sprite-template.scss',
                            template: "scss/_svg_sprite.scss"
                        }
                    }
                }
            }
        }))
        .pipe(gulp.dest('img/svg'));
});

Answer the question

In order to leave comments, you need to log in

3 answer(s)
Y
yakupov112, 2018-07-10
@yakupov112

turn off the pipe

// minify svg
        .pipe(svgmin({
            js2svg: {
                pretty: true
            }
        }))

S
Sergiu Mitu, 2018-07-10
@EaGames

most likely it's in the file itself, it's some kind of curve.
I have been using a similar task for a year and a half or two years, and there were no problems.

// Task for svg-sprite
gulp.task('svg-sprite', function () {
  return gulp.src(paths.src.svgIcons)
    .pipe(svgmin({
      js2svg: {
        pretty: true
      }
    }))
    // remove all fill, style and stroke declarations in out shapes
    .pipe(cheerio({
      run: function ($) {
        $('[fill]').removeAttr('fill');
        $('[stroke]').removeAttr('stroke');
        $('[style]').removeAttr('style');
      },
      parserOptions: {xmlMode: true}
    }))
    // cheerio plugin create unnecessary string '>', so replace it.
    .pipe(replace('>', '>'))
    // build svg sprite
    .pipe(svgSprite({
      mode: {
        symbol: {
          sprite: "../sprite.svg"
        }
      }
    }))
    .pipe(gulp.dest(paths.src.imgFolder));
});

Z
zpawn, 2019-02-26
@zpawn

Most likely the matter is in the svg file itself, namely with the font. I think if you convert the font to curves, then everything will be fine when creating a sprite.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question