w0rm / gulp-svgstore

Combine svg files into one with symbol elements
https://www.npmjs.com/package/gulp-svgstore
645 stars 33 forks source link

repaint logo in sprite #70

Closed Muskos closed 8 years ago

Muskos commented 8 years ago

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 8 years ago

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

Muskos commented 8 years ago

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 8 years ago

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.

Muskos commented 8 years ago

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 8 years ago

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?

Muskos commented 8 years ago

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