javascript - Gulp imagemin optimization removes svg symbol -
this first time use gulp task-runner or kind of task-runner. hope state problem in understandable way.
i have svg file named svg-system.svg
contains:
<svg xmlns="http://www.w3.org/2000/svg"> <!-- facebook icon --> <symbol id="facebook" role="img" aria-labelledby="title desc" viewbox="0 0 9.3 20"> <title id="title">logo af facebook</title> <desc id="desc">logoet bruges til link indikator @ tilgÄ vores facebook side eller dele os.</desc> <path d="m9.3,6.5l8.9,10h6.1c0,4.5,0,10,0,10h2c0,0,0-5.5,0-10h0v6.5h2v4.2c2,2.6,2.8,0,6.2,0l3.1,0v3.4 c0,0-1.9,0-2.2,0c-0.4,0-0.9,0.2-0.9,1v2.1h9.3z"/> </symbol> </svg>
and compress file / optimize dist save kilobytes.
my confiq in gulpfile.js
looks this:
gulp.task('images', function() { return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)') // caching images ran through imagemin .pipe(cache(imagemin({ options: { optimizationlevel: 3, progessive: true, interlaced: true, removeviewbox:false, removeuselessstrokeandfill:false, cleanupids:false } }))) .pipe(gulp.dest('dist/images')); });
when run task outputs svg-system.svg
content only:
<svg xmlns="http://www.w3.org/2000/svg"/>
any suggestions or have seen issue , fixed it? cheers.
you have right general idea: setting cleanupids
false
indeed keep <symbol>
around. way you're doing wrong.
you're trying pass options object imagemin()
. while gulp-imagemin
in fact have options
argument, only supports verbose
option. none of options specify passed along svgo
.
you need explicitly pass options svgo
plugin. way pretty weird , complicated, here go:
imagemin([ imagemin.svgo({ plugins: [ { optimizationlevel: 3 }, { progessive: true }, { interlaced: true }, { removeviewbox: false }, { removeuselessstrokeandfill: false }, { cleanupids: false } ] }), imagemin.gifsicle(), imagemin.jpegtran(), imagemin.optipng() ])
Comments
Post a Comment