Some SVG doesn't display well

[lchandelier]

Hi,

Thank you for this great plugin!

I have a little issue, some SVG doesn't display as they should when I call them through . I've tried to display them in an and they display well.

I give you two of these images so you can see the problem. I've tried to save them as SVG 1.1 and tiny 1.2, no changes. It occurs when the SVG have some areas with no transparency (text in my two SVG below)

svg-icon.zip

Thanks a lot for your help

[Hiswe]

Hi,

Thanks you for using it :)

I've tried your 2 files with the demo page and everything seems to work as expected:

The only thing I've seen is a missing path in the original file in the Tag Heuer's logo. If I open it in a vector editor, here is what I have:

Is that the problem or did I miss something else?

[lchandelier]

Hi, thanks for your quick reply. It's weird, maybe i've missed a setting in my gulpfile. On my screen, those SVGs are full black, I can't see the text.

What configuration did you use ?

Thanks a lot,

Mylène

Le 19 janv. 2018 04:45, "Hiswe" notifications@github.com a écrit :

Hi,

Thanks you for using it :)

I've tried your 2 files with the demo page and everything seems to work as expected:

[image: screen shot 2018-01-19 at 10 38 02] https://user-images.githubusercontent.com/96121/35133857-2b7ad8ea-fd05-11e7-9657-78964142983b.png

The only thing I've seen is a missing path in the original file in the Tag Heuer's logo. If I open it in a vector editor, here is what I have:

[image: screen shot 2018-01-19 at 10 39 06] https://user-images.githubusercontent.com/96121/35133912-84478c34-fd05-11e7-9181-b18f744c76ed.png

Is that the problem or did I miss something else?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Hiswe/gulp-svg-symbols/issues/49#issuecomment-358858744, or mute the thread https://github.com/notifications/unsubscribe-auth/AMsw9dh06IGDF0aFin84nwtD6QpePsmGks5tMA_IgaJpZM4RjFho .

[Hiswe]

I used the demo-page task in the examples folder so beside the templates everything is kept to default.

For the black background, it usually happens to me when the SVG file has a transparent background (like in the materials icons SVG files ). In order for the symbol to work properly I have to remove it (an example of what I am talking about).

But after checking your files this doesn't seems to be the case here :(

So a few questions:

• What happen when you generate the demo-page ?
• Is there any pre-processing or post-processing in your gulp task?
• What CSS styles applies to the SVG symbols? (<svg role="img" class="pouic"><use xlink:href="#pouic"></use></svg>)

[lchandelier]

It works fine if I use the demo-page. I use Sass and the result svg is For those examples, I have no styles except their size.

The issue may come from other optimizations I guess.

Here is the task I use to cleanup and optimize all assets and my sprites task. I already tried to remove SVGO optimization but it doesn't change anything.

gulp.task('images', function () {
    return gulp.src(assets.img + '/**/*')
            .pipe(plumber())
            .pipe(imagemin([
                imagemin.gifsicle({interlaced: true}),
                imagemin.jpegtran({progressive: true}),
                imagemin.optipng({optimizationLevel: 5}),
                imagemin.svgo({
                    plugins: [
                        {removeViewBox: false},
                        {cleanupIDs: false}
                    ]
                })
            ]))
            .pipe(gulp.dest(assets.img));
});

gulp.task('sprites', function () {
    return gulp.src([assets.sprites + '/**/*.svg'])
        .pipe(plumber())
        .pipe(cheerio({
            run: function ($) {
                $('[fill]').removeAttr('fill');
            },
            parserOptions: { xmlMode: true }
        }))
        .pipe(svgSymbols(
            {
                title: '%f',
                svgClassname: 'a11y_hidden'
            }
        ))

        .pipe(gulpIf( /[.]svg$/, gulp.dest(assets.img + '/global')))
        .pipe(gulpIf( /[.]css$/, gulp.dest(assets.css)))
    .pipe(notify({message: 'Sprite generated', onLast: true}));
});

[lchandelier]

The issue is revolved if I remove the following code. But I'm stuck if I want to change the fill color.

run: function ($) {
    $('[fill]').removeAttr('fill');
},

[Hiswe]

If you want to be able to change the color, just remove a specific fill like for the PMS:

$(`[fill="#231F20]"`).removeAttr(`fill`)

And you can test it in the demo-page clicking the Test Color button

Or you could also do this in a vector editor and put a pure black #000 fill, which usually export to a no fill :)

[lchandelier]

It works well if I remove the specific color.

Thanks a lot for your help!