Solution 1 :

First, you need to create one svg as a resource available to the others using <defs>.

<!-- the background image pattern -->
<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_xlink="http://www.w3.org/1999/xlink">
    <!-- left squares -->
    <rect fill="url(#rect-fill)"/>
</svg>

Problem :

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_xlink="http://www.w3.org/1999/xlink">
    <!-- left squares -->
    <rect />
    <rect />
    <rect />

    <!-- right squares -->
    <rect />
    <rect />
    <rect />
</svg>

<!-- the background image pattern -->
<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>