3

This is the first time I use Gulp task-runner or any kind of task-runner. I hope I state my problem in an understandable way.

I have an svg file named svg-system.svg which 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 for at 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 I would like to compress the file / optimize it for my dist to save some kilobytes.

My confiq in gulpfile.js looks like this:

gulp.task('images', function() {
  return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
    // Caching images that 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 I run the task it outputs my svg-system.svg with this content only:

<svg xmlns="http://www.w3.org/2000/svg"/>

Any suggestions or have you seen this issue yourself and fixed it? Cheers.

Sven Schoenung
  • 30,224
  • 8
  • 65
  • 70
Mikkel Madsen
  • 347
  • 2
  • 5
  • 17

1 Answers1

4

You have the right general idea: setting cleanupIDs to false will indeed keep the <symbol> around. However the way you're doing it is wrong.

You're trying to pass an options object to imagemin(). While gulp-imagemin does in fact have an options argument, it only supports the verbose option. None of the options you specify are passed along to svgo.

You need to explicitly pass those options to the svgo plugin. The way you do this is honestly pretty weird and complicated, but here you go:

imagemin([
  imagemin.svgo({
    plugins: [
      { optimizationLevel: 3 },
      { progessive: true },
      { interlaced: true },
      { removeViewBox: false },
      { removeUselessStrokeAndFill: false },
      { cleanupIDs: false }
   ]
 }),
 imagemin.gifsicle(),
 imagemin.jpegtran(),
 imagemin.optipng()
])
Sven Schoenung
  • 30,224
  • 8
  • 65
  • 70
  • Thx for your time, I tried like this https://jsfiddle.net/4t2kyj5z/ but it still compresses the svg to oblivion as postet in my question :P – Mikkel Madsen Nov 17 '16 at 19:34
  • That's because of `gulp-cache`. You need to [clear the cache](https://github.com/jgable/gulp-cache#clearing-the-cache). – Sven Schoenung Nov 17 '16 at 20:18
  • Hmm, tried, still not doing the job :/ Here is gulpfile.js in a fiddle: https://jsfiddle.net/4t2kyj5z/1/ – Mikkel Madsen Nov 17 '16 at 20:44
  • 1
    Try removing `gulp-cache` entirely to isolate the problem. – Sven Schoenung Nov 17 '16 at 21:43
  • It worked perfect now, when I isolated the problem as you stated. So the cache made the problems. I read somewhere, when your app will get big enough with many images, making a build to get the dist files will take very long time, if you have many images. I had 2 images, and it toke like 2 sec. Do you use cache? – Mikkel Madsen Nov 18 '16 at 07:45
  • I've never used `gulp-cache`, but I have used [`gulp-changed`](https://www.npmjs.com/package/gulp-changed). The difference is that `gulp-cache` stores its cache somewhere in the file system. `cache.clearAll()` is supposed to clear this. No idea why it doesn't for you. `gulp-changed` on the other hand just checks if your images have changed since the last build. To recreate an image that hasn't changed you just need to delete it in your `dist/images` folder. – Sven Schoenung Nov 18 '16 at 07:57