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

Question

I have found that when I have a source SVG with a symbol and a destination SVG that access the source SVG with <use>, the symbol is imported and is able to access the gradient (perhaps because it is simply already on the page). However, when the source SVG is in a different file, the objects in the <symbol> are imported but not the gradient. How can I import the gradient as well?
Here is some MCVE code:
index.html:
<style>
html,body,svg { width: 100% }
</style>
<!-- inline SVG with gradient -->
<svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="myDot" width="10" height="10" viewBox="0 0 2 2">
<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>
    <circle cx="1" cy="1" r="1" fill="url(#linear-gradient)"/>
  </symbol>
</svg>
<svg viewBox="0 0 200 60" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
 
  <!-- All instances of our symbol -->
  <use xlink:href="#myDot" x="5"  y="5" style="opacity:1.0" />
  <use xlink:href="#myDot" x="20" y="5" style="opacity:0.8" />
  <use xlink:href="symbol.svg#myDot" x="35" y="5" style="opacity:0.6" stroke="black" stroke-width=".1" />
  <use xlink:href="symbol.svg#myDot" x="50" y="5" style="opacity:0.4" stroke="black" stroke-width=".1" />
  <use xlink:href="symbol.svg#myDot" x="65" y="5" style="opacity:0.2" stroke="black" stroke-width=".1" />
</svg>
symbol.svg:
<!-- external SVG with gradient -->
<svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="myDot" width="10" height="10" viewBox="0 0 2 2">
<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>
    <circle cx="1" cy="1" r="1" fill="url(#linear-gradient)"/>
  </symbol>
</svg>
Here is a working Codepen demo that illustrates the problem, using the same code as shown above. Notice how the two circles importing the symbol from the inline SVG in index.html are correctly displaying the gradient, but the three circles importing the symbol from symbol.svg are not displaying the gradient.
Edit: This may be a duplicate of another question asking about referencing gradients in external files.

Answer 1

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>