M
M
Maxim2017-03-18 11:13:32
gulp.js
Maxim, 2017-03-18 11:13:32

Why does SVG break when building a sprite with svg-store?

Hello.
I am using gulp-svgstore to build the svg sprite. Until now, everything was fine, there were no problems with sprites, maybe this is due to the fact that there were no complex icons, but only small unpretentious icons. Okay, to the point.
Here is one of the icons that is not in the sprite yet:
aa92f77291854192808855656437d58e.PNG
Here is the same icon, only connected from the sprite:
b36b5db463c44836bab1413084ee9e4f.PNG
Excerpt from gulpfile.js:

gulp.task("icons", function () {
  return gulp.src("./src/icons/*.svg")
    .pipe(svgo())
    .pipe(cheerio({
      run: function ($) {
        $("[fill]").removeAttr("fill");
        $("[stroke]").removeAttr("stroke");
        $("[style]").removeAttr("style");
        $("[class]").removeAttr("class");
      },
      parserOptions: {xmlMode: true}
    }))
    .pipe(replace(">", ">"))
    .pipe(svgstore({
      inlineSvg: true
    }))
    .pipe(cheerio({
      run: function ($) {
        $("svg").attr("style", "display:none");
      },
      parserOptions: {xmlMode: true}
    }))
    .pipe(gulp.dest("build/img"));
});

Already tested, no plugin spoils svg, except for gulp-svgstore.
I really hope someone can help. Thank you in advance!
Write if you need any additional information.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
K
Konstantin Kitmanov, 2017-03-18
@k12th

run: function ($) {
        $("[fill]").removeAttr("fill");
        $("[stroke]").removeAttr("stroke");
        $("[style]").removeAttr("style");
        $("[class]").removeAttr("class");
}

Are you sure that this function does not delete anything you need? Want to minimize svg - overtake through svgo.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question