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.

Answer 2

Actually, the FOP FAQ is right, the correct syntax is embracing the URI with url(...). Just checked with my Firefox, and it handles fills only with surrounding url(). It would be a bug in Safari or Opera, if the'd handle it differently.

I coincidentally filed a similar question, but with similarly little success.

Cheers,

Answer 3

You do need to say fill="url(styles.svg#myGradient)". That works in Firefox 4 beta 6 and I imagine it worked in Firefox 3.5. But Chrome (7.0.517.41 beta) and the IE9 beta (9.0.7930.16406) still do not support this. It looks like they both look for #myGradient in the current document instead of actually going to the specified URL. Gross.

Here are the complete files I used to test this:

styles.svg

<svg xmlns="http://www.w3.org/2000/svg"&gt;
  <defs>
    <linearGradient id="myGradient">
      <stop offset="0" stop-color="red" />
      <stop offset="1" stop-color="black" />
    </linearGradient>
  </defs>
</svg>

image.svg

<svg xmlns="http://www.w3.org/2000/svg"&gt;
  <rect width="100" height="100" fill="url(styles.svg#myGradient)"/>
</svg>