defs inside symbols like lineargradient and mask arent recognized by IE/Firefox (works in chrome)

[pastjean]

If you have an svg icon like this:

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 446.9 512" >
    <defs>
<linearGradient id="grad" gradientUnits="userSpaceOnUse" x1="-49.1313" y1="-138.4424" x2="-48.4011" y2="-138.4424" gradientTransform="matrix(4.282765e-14 699.4286 -612 3.747418e-14 -84503.2812 34364.4883)">
    <stop  offset="0" style="stop-color:#F7931E"/>
    <stop  offset="1" style="stop-color:#F2693E"/>
</linearGradient>
  </defs>
<polygon style="fill:url(#grad)" points="446.9,256 0,512 0,0 "/>
</svg>

the generated svg :

<svg xmlns="http://www.w3.org/2000/svg"><symbol id="logo" viewBox="0 0 446.9 512">
    <defs>
        <linearGradient id="a" gradientUnits="userSpaceOnUse" x1="-49.131" y1="-138.442" x2="-48.401" y2="-138.442" gradientTransform="matrix(0 699.429 -612 0 -84503.281 34364.488)">
            <stop offset="0" stop-color="#F7931E"/>
            <stop offset="1" stop-color="#F2693E"/>
        </linearGradient>
    </defs>
    <path fill="url(#a)" d="M446.9 256L0 512V0z"/>
</symbol>
</svg

the gradient wont show in ie and firefox

even worst if the svg (or any wrapping div) are set to display none it wont work ( another problem tough)

[w0rm]

Hi! Any suggestions how this should be fixed?

[pastjean]

sorry im putting a description on whole problem and how to fix (pressed open to fast)

[pastjean]

One part of the problem solution found here:

http://stackoverflow.com/questions/24806913/how-can-i-refer-to-an-internal-gradient-definition-inside-an-svg-sprite-symbol

The fix i found was to put everything that is in a defs tag in a global defs tag for the whole file like this :

<svg xmlns="http://www.w3.org/2000/svg">
<!-- GLOBAL DEFS --> 
    <defs>
        <linearGradient id="a" gradientUnits="userSpaceOnUse" x1="-49.131" y1="-138.442" x2="-48.401" y2="-138.442" gradientTransform="matrix(0 699.429 -612 0 -84503.281 34364.488)">
            <stop offset="0" stop-color="#F7931E"/>
            <stop offset="1" stop-color="#F2693E"/>
        </linearGradient>
    </defs>
<!-- Symbols here -->
<symbol id="logo" viewBox="0 0 446.9 512">
    <path fill="url(#a)" d="M446.9 256L0 512V0z"/>
</symbol>
``` 

[wfortin]

I'm experiencing the same problem, only on IE. I can provide sample SVG if needed.

[pastjean]

The svg also need to be wrapped in a div that doesnt have display:none but other ways to hide it

<div style="height: 0; width: 0; position: absolute; visibility: hidden">
<svg>...
</svg>
</div>

[pastjean]

FWeinb/grunt-svgstore seems to fix this problem

see : https://github.com/FWeinb/grunt-svgstore/blob/dfb4e010a9c90269eb519fe58117f8f5424b563b/tasks/svgstore.js#L89-L91 https://github.com/FWeinb/grunt-svgstore/blob/dfb4e010a9c90269eb519fe58117f8f5424b563b/tasks/svgstore.js#L221-L224

[pastjean]

bfd20cb fixes the bug (i did that fast and didn't upgrade the tests, sorry)

[w0rm]

@pastjean thank you! I merged your PR with slight changes.

[w0rm]

@pastjean do you need me to publish this on npm or it can wait until we fix #33?

[pastjean]

Ohh! nice! no need I'm a patient guy, i'll use my branch meanwhile (or your master)

[danielrussellLA]

I had this same issue. problem was caused by display:none; - for some reason if you load the page and have an svg that is initially display:none; and you want to show that svg on hover, in firefox and IE, this messes up any linear gradient that you have on the svg. just avoid using display:none. instead find another way to hide the svg - like using negative z-index's or absolutely position the svg off the page initially

[w0rm]

@danielrussellLA have you tried the approach from the Readme https://github.com/w0rm/gulp-svgstore#inlining-svgstore-result-into-html-body