Answer the question
In order to leave comments, you need to log in
Why does text and stroke disappear from svg images when assembled into a sprite using gulp?
In general, I have a picture and when building it through Gulp, the outline and text disappear from it.
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
turn off the pipe
// minify svg
.pipe(svgmin({
js2svg: {
pretty: true
}
}))
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));
});
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question