<svg viewBox="0 0 800 600" width="400" height="500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<title>Green rectangles should be within the red frames</title>
<rect id="rect"  width="100" height="100" fill="green"/>

<filter id="filter1" >
    <feImage preserveAspectRatio="none" x="0%" y="0%" width="100%" height="100%" xlink:href="#rect"/>
</filter>

<filter id="filter2" >
    <feImage preserveAspectRatio="none" xlink:href="#rect"/>
</filter>

<filter id="filter3" >
    <feImage preserveAspectRatio="none" x="0%" y="0%" width="100%" height="100%" xlink:href="resources/green.png"/>
</filter>

<filter id="filter4" >
    <feImage preserveAspectRatio="none" xlink:href="resources/green.png"/>
</filter>
</defs>

<g transform="translate(50, 10)">
<rect width="400" height="200" fill="green" filter="url(#filter1)"/>
<g transform="translate(0, 250)">
<rect width="400" height="200" fill="green" filter="url(#filter2)"/>
</g>
</g>

<g transform="translate(250, 10)">
<rect width="400" height="200" fill="green" filter="url(#filter3)"/>
<g transform="translate(0, 250)">
<rect width="400" height="200" fill="green" filter="url(#filter4)"/>
</g>
</g>

<rect fill="none" stroke="red" x="50" y="10" width="100" height="100"/>
<rect fill="none" stroke="red" x="10" y="240" width="100" height="100"/>
<rect fill="none" stroke="red" x="250" y="10" width="440" height="220"/>
<rect fill="none" stroke="red" x="210" y="240" width="480" height="240"/>

</svg>