SVG linking within the same SVG structure

Question

I have two SVG structures in my HTML document. Say for example,

<svg width="8cm" height="3cm"
 xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Local URI references within ancestor's 'defs' element.</desc>
  <defs>
   <linearGradient id="Gradient01">
     <stop offset="20%" stop-color="#39F" />
     <stop offset="90%" stop-color="#F3F" />
   </linearGradient>
  </defs>
  <rect x="1cm" y="1cm" width="6cm" height="1cm" fill="url(#Gradient01)" />
</svg>

and

<svg width="8cm" height="3cm"
 xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
   <linearGradient id="Gradient01">
     <stop offset="20%" stop-color="#85F" />
     <stop offset="90%" stop-color="#35F" />
   </linearGradient>
  </defs>
  <rect x="10cm" y="10cm" width="60cm" height="10cm" fill="url(#Gradient01)" />
</svg>

Though there is a "linearGradient tag" with the id "Gradient01" in both the SVG structures, The rect of the second SVG structure also follows "linearGradient" of the first one. (As it searches for the id in the whole document)

Is there anyway, that it always links only within that SVG structure. (Since in my case I cannot change the ids)

Answer 1

You could turn the svg into standalone images and then embed them in the html document using an <iframe> or <object> tag.