SVG Linear Gradient does not work in Firefox

Question

I have the following example of an SVG that was given to me by a flash designer, built with Adobe Illustrator:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="30px" height="35px" viewBox="0 0 30 35" enable-background="new 0 0 30 35" xml:space="preserve">
<symbol  id="replay_icon" viewBox="0 -12 14 12">
    <g id="Layer_1_2_">
        <defs><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="7" y1="1" x2="7" y2="-13">
            <stop  offset="0" style="stop-color:#0000FF"/>
            <stop  offset="1" style="stop-color:#00FF00"/>
        </linearGradient></defs>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="url(#SVGID_1_)" d="M12.25-10.25C11.083-11.417,9.667-12,8-12v2
            c1.1,0,2.05,0.383,2.85,1.15C11.617-8.083,12-7.133,12-6c0,1.1-0.383,2.033-1.15,2.8C10.05-2.4,9.1-2,8-2S5.95-2.4,5.15-3.2
            C4.383-3.967,4-4.883,4-5.95h2l-3-4l-3,4h2c0,1.633,0.583,3.034,1.75,4.2S6.333,0,8,0s3.083-0.583,4.25-1.75S14-4.333,14-6
            S13.417-9.083,12.25-10.25z"/>
    </g>
</symbol>
<use xlink:href="#replay_icon"  width="14" height="12" y="-12" transform="matrix(1 0 0 -1 10 11)" overflow="visible"/>
</svg>

The SVG image displays in all browsers, even IE9 (*gasp*), but it will not display in Firefox. The problem is with the linear gradient. If you add a stroke to the path, the path strokes correctly and becomes visible, but unfilled. I've tried many different variations to get the gradient to work with no success. Anybody know with which part of this SVG Firefox has a problem and how to correct it?

I actually just came across a good resource to fix this, [code.google.com/p/svg-edit/](https://code.google.com/p/svg-edit/) -- I can easily start the SVG from scratch by pasting in the paths and gradients, and since this is a visual editor, I can click and drag the elements, recalculating their paths. It also has the nice feature of showing you what lies outside of your SVG's view. However, I would still like to know what prevents the above SVG from rendering in Firefox. — Greg, Oct 12 '12 at 22:45

Robert Longson · Accepted Answer · 2020-06-09T14:12:13.960

This issue is fixed from Firefox 77 onwards. To workaround the problem in earlier versions of Firefox, simply move the gradient definition outside the symbol element e.g.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="30px" height="35px" viewBox="0 0 30 35" enable-background="new 0 0 30 35" xml:space="preserve">
        <defs>
          <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="7" y1="-13" x2="7" y2="1">
            <stop  offset="0" stop-color="#0000FF"/>
            <stop  offset="1" style="stop-color:#00FF00"/>
          </linearGradient>
        </defs>
<symbol  id="replay_icon" viewBox="0 -12 14 12">
    <g id="Layer_1_2_">
        <path fill-rule="evenodd" clip-rule="evenodd" fill="url(#SVGID_1_)" d="M12.25-10.25C11.083-11.417,9.667-12,8-12v2
            c1.1,0,2.05,0.383,2.85,1.15C11.617-8.083,12-7.133,12-6c0,1.1-0.383,2.033-1.15,2.8C10.05-2.4,9.1-2,8-2S5.95-2.4,5.15-3.2
            C4.383-3.967,4-4.883,4-5.95h2l-3-4l-3,4h2c0,1.633,0.583,3.034,1.75,4.2S6.333,0,8,0s3.083-0.583,4.25-1.75S14-4.333,14-6
            S13.417-9.083,12.25-10.25z"/>
    </g>
</symbol>
<use xlink:href="#replay_icon"  width="14" height="12" y="-12" transform="matrix(1 0 0 -1 10 11)" overflow="visible"/>
</svg>

For understandability and accessibility reasons, it is recommended that, whenever possible, referenced elements be defined inside of a ‘defs’. Quoted from the SVG 1.1 Specification. So it isn't necessary but it is best practice. — Robert Longson, Nov 13 '14 at 18:29
Perhaps it's a different underlying issue, but I'm experiencing the same problem ("SVG linear gradient does not work in Firefox") in Firefox 104. On the advice of Robert Longson (thanks, Robert!), I've asked a new question, [SVG linear gradient does not work in Firefox 104](https://stackoverflow.com/questions/73589740/svg-linear-gradient-does-not-work-in-firefox-104). — Graham Hannington, Sep 03 '22 at 05:01

score 0 · Answer 2 · answered Nov 13 '14 at 18:32

To follow up on Robert Longson's answer:

Here's an example of how one could do it programmatically (JQuery, Gradients only and without using <defs>):

// run this after the SVG document has loaded

$("svg").each(function (index, elem) {
    var svg = $(elem);
    var symbols = svg.find("symbol");
    svg.append($.merge(symbols.find("radialGradient"), symbols.find("linearGradient")).detach());
});

SVG Linear Gradient does not work in Firefox

2 Answers2

Linked