gradients, clipPaths and masks inside svg:symbol aren't rendered

Assigned to



13 years ago
3 months ago


(Reporter: takenspc, Assigned: birtles)


(Blocks 1 bug)

Dependency tree / graph

Firefox Tracking Flags

(Not tracked)



(1 attachment, 1 obsolete attachment)

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9a1) Gecko/20060918 Minefield/3.0a1
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9a1) Gecko/20060918 Minefield/3.0a1

gradients inside svg:symbol aren't rendered. gradients outside svg:symbol are rendered.

Reproducible: Always

Steps to Reproduce:
1.Open a svg file which has gradient(s) inside svg:symbol aren't rendered.

Actual Results:  
gradient(s) are not rendered.

Expected Results:  
gradient(s) are rendered.
Posted image testcase
4 rects shuld have same gradient.
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a1) Gecko/20060920 Minefield/3.0a1
Ever confirmed: true
Why would you put the gradient _inside_ the symbol? The elements in the symbol are probably cloned into a shadow tree, in which case you're increasing memory use (and there are going to be multiple shadow elements with the same ID).
(In reply to comment #3)
> Why would you put the gradient _inside_ the symbol?

Adobe Illustrator 12.0.1, SVG Export Plug-In exports svg files which include the gradient inside the symbol.

For example,
another examples at
# A mascot in those pages is Foxkeh, a mascot of Firefox brought by Mozilla Japan.
Duplicate of this bug: 485362
#3 jwatt asks "Why would you put the gradient _inside_ the symbol?"

one reason is authoring tool user interface.
beyond hand coding...

ie unless a number of icons are saved as a set at one time, each will have the gradients, then when the icons are agglomerated, there is much duplication:
Assignee: general → nobody
QA Contact: ian → general
For the SVG-edit project, I'm working on arbitrary SVG importing. The idea is to insert a <symbol> element with the data, so multiple copies can be made using <use>. This bug means that import files with gradients will thus appear filled in black when using Firefox.

As a workaround I was going to put the imported <svg> in a <defs>, then have the <use> elements refer to that, but unfortunately Adobe Illustrator incorrectly displays an image like this (it does fine with <symbol>). A bug on their part, certainly, but it forces me to decide whether to support Firefox or Illustrator. 

Considering how <symbol> is very very similar to <svg> elements (in which this bug does not occur), I find it hard to imagine that this bug would be hard to fix.
Duplicate of this bug: 584666
Just FYI: The Foxkeh assets, including the broken tail SVG files in comment 4, have been moved to
OS: Linux → All
Hardware: x86 → All
A similar problem occurs when we have overlapping IDs and the first occurrence is within a hidden group. This crops up in Santa's Workshop and results in the snowflakes, trees and elves appearing partially or wholly black:

The attached test case is a simplified version of what's happening in Santa's Workshop.

I suspect the root cause is the same as this bug. Namely, if a gradient first appears in a context that isn't rendered we seem to refuse to render it from there on.

The fact that Illustrator is exporting this sort of arrangement raises the importance of this bug as does its use in Santa's Workshop.
Assignee: nobody → birtles
The display:none is a different issue, bug 376027 tracks that.
Attachment #574211 - Attachment is obsolete: true
Duplicate of this bug: 703766
Summary: gradients inside svg:symbol aren't rendered → gradients, clipPaths and masks inside svg:symbol aren't rendered
Duplicate of this bug: 306674
Duplicate of this bug: 1235364
Blocks: svg-enhance
Duplicate of this bug: 1415180
Duplicate of this bug: 1454320
Duplicate of this bug: 1507725
Duplicate of this bug: 1545166
You need to log in before you can comment on or make changes to this bug.