w0rm/gulp-svgstore

repaint logo in sprite

Muskos opened this issue · 6 comments

I use you plugin without any setting.
I put two logo in directory:
one_logo_s2.svg
two_logo-s2.svg
And when i use your plugin, first logo repaint at color of second logo. And second logo i see normal.
Text of both logo in right color. But background of main part of first logo is wrong.
I put another few another logo. Only one logo have his color.
If i remove second logo from directory. Another logo use background color from the first logo. And etc...
Maybe something with svg?
Can you help me? What I do wrong?

w0rm commented

@Muskos can you please provide the reduced example that demonstrates your issue?

https://codepen.io/Muskos/pen/RRYPzO
there are 5 logo
https://yadi.sk/i/T_sfKS3QtpkZN

// sprite for katahezis

gulp.task('katahezisPageSvg', function () {
    return gulp
        .src([
            'sprites/svg/logo_otdat-darom_02.svg',
            'sprites/svg/logo_pravme_02.svg',
            'sprites/svg/logo_voprosi-otveti_02.svg',
            'sprites/svg/logo_udobniy-magaz_02.svg',
            'sprites/svg/logo_katehizacia_white_02.svg',
            // 'sprites/svg/logo_karta-hramov_02.svg',
        ])
        .pipe(svgmin())
        .pipe(svgstore({
            inlineSvg: false
        }))
        .pipe(plumber())
        .pipe(rename('katahezis-sprite.svg'))
        .pipe(gulp.dest('../www/img/svg/'));
});

gulpfile.js

maybe it's my mistake? It's my first time with svg.

w0rm commented

What i've discovered is that there are three linearGradients with the same id="a" that override each other. You should change this to be unique.

Check the usage example, it runs everything through svgmin and adds prefixes on ids.

Is it a problem of svg file? I didn't rewrite code after gulp task.
I open *.ai file with all logo. All gradients named as "contour".

w0rm commented

The combined file should have unique ids. gulp-svgstore doesn't rename them, because you can use svgmin for it. You run every file though svgmin without any settings, and it has probably minified ids by renaming them to a single letter 'a'.

Have you tried the usage example from the readme?

i try svgmin without any options.
thank you. all done