I have a single SVG file that holds several <symbol> tags that represent icons. It looks something like this:
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="icon-arrow_carrot_up_alt" viewBox="0 0 0 0">
<path d="M544 1024c265.088 0 480-214.912 480-480s-214.912-480-480-480-480 214.912-480 480 214.912 480 480 480zM313.728 601.152l207.552-207.552c6.272-6.272 14.464-9.344 22.72-9.344s16.448 3.072 22.72 9.344l207.552 207.552c12.48 12.48 12.48 32.768 0 45.248s-32.768 12.48-45.248 0l-185.024-185.024-185.024 185.024c-12.48 12.48-32.768 12.48-45.248 0s-12.48-32.768 0-45.248z" fill="none"></path>
</symbol>
<symbol id="icon-arrow_carrot-2down" viewBox="0 0 0 0">
<path d="M702.592 523.648l-191.744 169.6-191.744-169.6c-12.544-12.544-32.96-12.544-45.504 0s-12.544 32.96 0 45.504l214.080 189.376c6.4 6.4 14.784 9.472 23.168 9.344 8.384 0.128 16.768-2.88 23.168-9.28l214.080-189.376c12.544-12.544 12.544-32.96 0-45.504s-32.96-12.608-45.504-0.064zM748.096 294.144c-12.544-12.544-32.96-12.544-45.504 0l-191.744 169.6-191.744-169.6c-12.608-12.544-33.024-12.544-45.568 0s-12.544 32.96 0 45.504l214.080 189.376c6.4 6.4 14.784 9.472 23.168 9.344 8.384 0.128 16.832-2.944 23.168-9.344l214.080-189.376c12.672-12.544 12.672-32.896 0.064-45.504z" fill="none"></path>
</symbol>
...
</svg>
I'm running this file through a gulp imagemin task like so:
var gulp = require('gulp');
var changed = require('gulp-changed');
var imagemin = require('gulp-imagemin');
gulp.task('optimize-images', function() {
return gulp.src(paths.img.src + '/**/*')
.pipe(changed(paths.img.dest))
.pipe(imagemin([
imagemin.svgo({
plugins: [
{removeViewBox: true},
{cleanupIDs: false}
]
})
]))
.pipe(gulp.dest(paths.img.dest));
});
The file gets minified and put in the correct dest directory, however it says it has optimized 100% of the file, and its size goes down to 0kb with no file contents. The SVG is completely stripped from the file.
Why are all of the file contents of this svg getting destroyed and how do I fix it?
Lol woops, I found this issue on the svgo/svgo plugin page that gulp-imagemin uses. It was noted that:
<symbol>is considered empty by itself, because it's not rendered. That's why it's being removed by default. You need to turn off removeUselessDefs as suggested above.
So I added the following options to my task like so:
plugins: [
{cleanupIDs: false},
{removeUselessDefs: false},
{removeViewBox: true},
]
It was still not working, then I realized that style="display: none;" was on the <svg> tag, which means it's not rendered. The SVG is auto-generated by the gulp-icomoon-builder package so that explains it. That package offers an option to specify a custom external template to generate the file off of, so I will create one without the inline display style.
So taking off the display: none; style fixed this.