Gradient Servers as External Files in Svg

Gradient servers as external files in SVG

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

Why can't I reference an SVG linear gradient defined in an external file (paint server)?

After more research, it looks like this is a browser support issue. See:

• https://code.google.com/p/chromium/issues/detail?id=109212
• https://bugs.webkit.org/show_bug.cgi?id=105904

Sadly, I'd come across this question before posting mine, and had thought that surely, in 5-1/2 years, browser support would have caught up - but that doesn't appear to be the case.

As of 2015, apparently Firefox and Opera are the only two browsers to support this in any substantial way.

Back to the drawing board...

How can I use gradients from SVG symbols in other files?

Looks like browser support for this feature is still somewhat low (source). The example given in the question should in theory work in a couple years.

One workaround is to include the gradient definitions on every page where external SVGs are referenced and point to that instead.

index.html:

<svg style="height: 0; width: 0;" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="linear-gradient" x1="0.133" y1="0.008" x2="0.949" y2="1.101" gradientUnits="objectBoundingBox">
        <stop offset="0.042" stop-color="#21dbaa"/>
        <stop offset="0.358" stop-color="#00b4ef"/>
        <stop offset="0.433" stop-color="#01a7ec"/>
        <stop offset="0.568" stop-color="#0487e4"/>
        <stop offset="0.68" stop-color="#0768dd"/>
        <stop offset="0.965" stop-color="#5f1ae5"/>
      </linearGradient>
    </defs>
</svg>

<svg>
    <use xlink:href="#myDot" fill="url(#linear-gradient)" />
</svg>

symbol.svg:

<svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg">
  <symbol id="myDot" width="10" height="10" viewBox="0 0 2 2">
    <circle cx="1" cy="1" r="1" fill="url(#linear-gradient)"/>
  </symbol>
</svg>

Is it possible to load an external SVG fill into an inline-svg element?

Using external fill and stroke is allowed by the SVG spec, but not all browsers implement that part. Opera and Firefox does, but not Chrome for example.

A live example here.

The syntax you describe is correct. E.g fill="url(example.svg#gradient)" will fetch the external example.svg and use the specified gradient from that file.

CSS 3 gradients for styling SVG elements

No it's not yet possible to use CSS3 gradients for the fill property. The good news though is that it's being discussed by the CSS and SVG workgroups, and SVG.next will depend on CSS3 Image Values (which defines the CSS gradient syntax). See http://www.w3.org/2011/07/29-svg-minutes.html#item08.

Note that the base url for the fill:url(...) by default is the file that contains this rule. So if you want to move fill:url(#linearGradientXYZ) to an external stylesheet remember to add the full path to the file containing that gradient definition, eg. fill:url(../images/gradients.svg#linearGradientXYZ).

Why is this external SVG gradient not showing up in a local SVG fill?

I think you're looking for something like this...

<svg>
  <rect x="0" y="0" rx="20" height="100%" width="100%" style="fill: url(#external.svg#gradient)"></rect>
</svg>

assuming external.svg is on the same site as this file.

---

Related Topics