Include SVG file in SVG

Question

I've got a linearGradient in the defs section of my SVG file, and reference it with fill="url(#myGradientName)". That works great so far.

I think I should be able to put my whole defs section in its own SVG file, and then just reference that from all my SVG images. That is, something like:

styles.svg:

<svg xmlns=...>
  <defs>
    <linearGradient id="myGradient" ...>
    </linearGradient>
  </defs>
</svg>

image.svg:

<svg xmlns=...>
  <rect width="100" height="100" fill="styles.svg#myGradient"/>
</svg>

But I can't seem to get the style to apply. Do I have the wrong syntax for IDs external to this file (styles.svg#myGradient)? Do I need to explicitly include the file first somehow?

I've been pouring over the SVG spec and it looks like this should be possible, but none of the examples actually show it being done.

Edit: The FOP FAQ suggests that the correct syntax is fill="url(grad.svg#PurpleToWhite)", but that doesn't work in Gecko or Webkit. Is that correct and nobody supports it, or am I doing something else wrong?

Answer 1

It looks like this is only supported under Firefox 3.1.