Gradient servers as external files in SVG

Question

Hi,

the fill property in SVG accepts an url to point to a gradient/pattern element, an instance of a so-called 'paint server'.

The Question: Is it possible in any browser (that is, not IE, of course), to use a gradient defined in an external SVG file? Like, in rect.svg,

<rect fill="url(grad.svg#my_grad)" />

and the corresponding <linearGradient /> element in grad.svg?

It would be really nice, because then one could store all his gradients/patterns in one file and get that cached...

Cheers,

Update: This question is, by its meaning, a duplicate of http://stackoverflow.com/questions/652004/include-svg-file-in-svg (where the question was answered for at least Firefox). I keep mine open, because I think the title and tags are more likely to get found by, well, you.

Answer 1

If I understand correctly, change the url to

<rect fill="url(grad.svg?param=my_grad" />

And then generate the svg dynamically?

Answer 2

This question was already asked (but not answered) here

Answer 3

The SVG Specification just states that you can use an URI - so it should be possible. Browser Support is of course a different matter.

I just wrote and tested a little sample file.

It doesn't work in Inkscape - but it does work with the Apache Batik Toolkit.

For Browser Support, i uploaded the file to browsershots.org and to summarize it: some browsers do support external gradients - some don't. e.g.:

• Firefox 3.0 NO
• Firefox 3.5 YES
• Opera 9.64, 10.0 YES
• Safari 4 NO
• Chrome 2.0 NO