Can we reference contents of <defs> across multiple <svg> elements?

Question

Can we reference the contents of defs contained in one <svg> from another <svg>?

Answer 1

Sure you can... Just make one as a resource available to the others..

Example:

#fire1 {
  fill: red;
}

#fire2 {
  fill: green;
}

#fire3 {
  fill: blue;
}

<!-- Let's make it a resource :) -->
<svg width="0" height="0" viewBox="0 0 0 0">
  <title>Re-Use SVG Defs as Resource</title>
 <defs>
   <g id="fire" transform="translate(0,10)">
     <path d="M101.138,160.949 C94.916,154.464 53.538,110.17 95.277,71.802 C130.054,39.868 135.137,13.003 123.434,-0 C123.434,-0 211.959,33.692 159.877,111.877 C150.998,125.163 128.702,140.843 140.369,173.129 L101.138,160.949 z" />
     <path d="M155.503,171.572 C153.624,165.019 145.142,150.746 171.021,122.303 C184.873,107.172 190.104,84.742 191.308,76.301 C191.308,76.301 237.167,100.662 191.576,160.215 L155.503,171.572 z" />
   </g>
 </defs>
</svg>


<svg id="fire1" width="100" height="100" viewBox="0 0 300 300">
  <use xlink:href="#fire"/>
</svg>

<svg id="fire2" width="100" height="100" viewBox="0 0 300 300">
  <use xlink:href="#fire"/>
</svg>

<svg id="fire3" width="100" height="100" viewBox="0 0 300 300">
  <use xlink:href="#fire"/>
</svg>

CodePen

If you're just trying to embed one svg into another (which would include the defs within it) you could also just plop in image into another svg like;

<svg id="fire1" width="100" height="100" viewBox="0 0 300 300">
   <use xlink:href="#fire"/>
   <image width="100" height="100" xlink:href="SomeOtherSVGImage.svg" />
</svg>