How to create a staggered square tiling pattern in svg?

Question

I want to fill a rectangle space with a repeating image pattern. The images are arranged in a staggered square tiling. Two adjacent rows are staggered in the x-direction by half the width of the side of the square.

How to use the pattern element in svg to achieve this?

Here is the diagram of the result I want

I tried to achieve this shift but it did not work.

<svg width=1000 height=1000>
  <pattern id="bar" width="200" height="200" patternUnits="userSpaceOnUse" patternTransform="rotate(0)">
    <rect class="checker" x="0" width="100" height="100" y="0" fill="blue" />
    <rect class="checker" x="100" width="100" height="100" y="0" fill="yellow" />
    <rect class="checker" x="50" y="100" width="100" height="100" y="0" fill="red" stroke="red" />
    <rect class="checker" x="150" y="100" width="100" height="100" y="0" fill="green" />
  </pattern>
  <rect width="100%" height="100%" fill=url(#bar)>
</svg>

The difficulty is that each of my squares is an image and it cannot be split in half. So I can't find the smallest element of this pattern.

Thank you in advance.