SVG reference external pattern ID - html

Question

I have two SVG's - one being logo of rectangle shapes and the other being a single svg of a pattern image for the background.
The logo gets repeated across the document multiple times and when the <rect> is set to be filled by #rect-fill, the multiple instances of the pattern svg with id of #rect-fill elements breaks it and the background image does not show, so now I seperated them.
Now, since the pattern id is outside of the #rect-container svg, the pattern image does not show and no image can be loaded.
Is there anyway to reference a pattern for a rect outside of its containing <svg> in another <svg>?
<!-- the logo svg -->
<svg id="rect-container" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- left squares -->
<rect />
<rect />
<rect />
<!-- right squares -->
<rect />
<rect />
<rect />
</svg>
<!-- the background image pattern -->
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<pattern id="rect-fill" patternUnits="userSpaceOnUse" x="0" y="0" width="1112" height="100%">
<image xlink:href="../assets/images/hero.png" width="100%" height="100%" preserveAspectRatio="xMinYMid slice"/>
</pattern>
</svg>
<style>
/* Reference the pattern outside of the rect's svg */
#rect-container rect {
fill(#rect-fill);
}
</style>

Answer 1

First, you need to create one svg as a resource available to the others using <defs>.
<!-- the background image pattern -->
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<defs>
<pattern id="rect-fill" patternUnits="userSpaceOnUse" x="0" y="0" width="1112" height="100%">
<image xlink:href="../assets/images/hero.png" width="100%" height="100%" preserveAspectRatio="xMinYMid slice"/>
</pattern>
</defs>
</svg>
Then you will be able to reuse this element. More information here
<!-- the logo svg -->
<svg id="rect-container" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- left squares -->
<rect fill="url(#rect-fill)"/>
</svg>