Rendering issue with gradients on browsers?

[JimmyMultani]

I'm having a bit of an issue when it comes to rendering SVGs with gradients associated with them, using svgstore. If I place the SVG as an image it, looks fine. Using svgstore however causes this weird behaviour in the gradients.

As you can see on Chrome, it renders correctly. However the results on IE11 and FireFox greatly differ...

I've wrapped the <svg> around with a <div>, and styled:

.svg-hide {
    width: 0;
    height: 0;
    overflow: hidden;
}

I'm calling symbols like this:

<svg class="icon icon__plane"><use xlink:href="#icon__plane" /></svg>

Gulpfile:

// svgstore
gulp.task('svgstore', function () {
    return gulp
        .src(options.paths.images + 'svg/*.svg')
        .pipe(svgmin(function (file) {
            var prefix = path.basename(file.relative, path.extname(file.relative));
            return {
                plugins: [{
                    cleanupIDs: {
                        prefix: prefix + '--',
                        minify: true
                    }
                }]
            };
        }))
        .pipe(svgstore({ inlineSvg: true }))
        // .pipe(svgstore())
        .pipe(rename('sprite.svg.twig'))
        .pipe(gulp.dest(options.paths.html + 'Default/partial/'));
});

Any help on this issue would be greatly appreciated. Thanks.

[w0rm]

@JimmyMultani hi, can you also provide the source of the svg?

[JimmyMultani]

Hey @w0rm, thanks for looking into this. Here's the SVG file in question.

http://imgh.us/icon__plane.svg

[w0rm]

@JimmyMultani thanks! I will check this weekend

[w0rm]

@JimmyMultani the problem appears to be with three linked <clipPath> elements that are not inside <defs>.

  <defs><path d="M28.4 30.5l5.3 5c0-.1 7-6.9 7-6.9l-4-6.8-8.3 8.7z" id="a"/></defs>
    <clipPath id="b"><use overflow="visible" xlink:href="#a"/></clipPath><path clip-path="url(#b)"/>

Everything from <defs> of each source file is extracted into separate <defs> section of the combined file, but <clipPath> elements are still there inside each generated <symbol> and are linked from within. This seems to be the limitation of the firefox.

You can fix it by wrapping <clipPath> into <defs> section, so it will also be extracted from each <symbol> e.g.

  <defs><path d="M28.4 30.5l5.3 5c0-.1 7-6.9 7-6.9l-4-6.8-8.3 8.7z" id="a"/>
    <clipPath id="b"><use overflow="visible" xlink:href="#a"/></clipPath></defs><path clip-path="url(#b)"/>

or you can go further and reduce the size by removing use element, like this:

  <defs><clipPath id="b"><path d="M28.4 30.5l5.3 5c0-.1 7-6.9 7-6.9l-4-6.8-8.3 8.7z"/></clipPath></defs><path clip-path="url(#b)"/>

Modified image that is working in Firefox

Bottomline: you should try to simplify the sources, if they have inner linked content, then you should wrap such content with <defs>, so it will be extracted from <symbol>.

[w0rm]

@pastjean what do you think of this? You have fixed #31, is this related? Should we also move any <clipPath> element into combined <defs> section?

[JimmyMultani]

@w0rm Thanks for the help! I had to manually update all my SVG assets to compensate for this (brain hurts from the monotony). I know that this wasn't in reference to me, but I think <clipPath> should be moved into the <defs> if it contains <use> inside of it.

[w0rm]

@JimmyMultani can you update the readme with this finding?

[w0rm]

Closing this issue.

@JimmyMultani a pull request with documentation change would be really helpful.

[JimmyMultani]

Hey @w0rm, sorry about the delay. I completely forgot to do this.

I've requested a pull.