Problem with multiple clip-paths

[filipekiss]

Info:

• yarn --version: 0.27.5
  • gulp-svg-sprites: 4.1.2
  • svg-sprite-data: 3.1.0
  • node --version: v8.1.3

So, here's the deal:

The sprite generated file from gulp-svg-sprites changes all clip-paths id's and references to the same id.

I have a file with two or three svgs whose clip-path id is a.

This, of course, leads to broken files in basically every browser except Safari.

Here's a comparison

Live editing the clip-path ID on Chrome solves the problem (changing it from a to a1, for example)

I've tried using the transformData and the afterTransform to rewrite the ID's. If I console.log the svg data, the clip-path are the exepected. But when the sprite.svg is saved to the disk, everything is back to a everywhere.

Can you guys point me to a solution?

Thank you so much.

[tomash-als]

Add to config options for SVGO: cleanconfig: {plugins: [{cleanupIDs: false}]}

Full list of plugins: https://github.com/svg/svgo

[filipekiss]

Hi @tomash-als, thank you for your time. Can you point me to a direction on how to apply this config? gulp-svg-sprites documentation has no topic regarding configuring SVGO.

Thank you so much.

[tomash-als]

@filipekiss, for example:

gulp.task('sprites', function () {
    return gulp.src('assets/svg/*.svg')
        .pipe(svgSprite({
            cssFile: "scss/_sprite.scss",
            cleanconfig: {plugins: [{cleanupIDs: false}]}
        }))
        .pipe(gulp.dest("assets"));
});

A bit more explanation:

gulp-svg-sprites uses svg-sprite-data for SVG processing, and passes an entire config while creating SpriteData object. https://github.com/shakyShane/gulp-svg-sprites/blob/1036e8defb3834f9662cbe20c93afe3e60684d7e/index.js#L398

svg-sprite-data uses svgo for optimizations, and passes cleanconfig part of config while creating SVGO object. https://github.com/shakyShane/svg-sprite-data/blob/fa2bd9e68df3dd5906153333245aa06a5ac4b2b3/lib/svg-sprite.js#L100

And as cleanconfig is not used by gulp-svg-sprites, we can safely use it for SVGO configuration. https://github.com/svg/svgo

[filipekiss]

@tomash-als Great! That was exactly what I needed!