Изменить источник изображения, когда изображение достигает края экрана

const section = document.querySelector("section");
const logo = document.querySelector(".logo");
const FPS = 60;
section.style.height = window.innerHeight + "px";
section.style.width = window.innerWidth + "px";

// Logo moving velocity Variables
let xPosition = 10;
let yPosition = 10;
let xSpeed = 4;
let ySpeed = 4;
function update() {
  logo.style.left = xPosition + "px";
  logo.style.top = yPosition + "px";
}

setInterval(() => {
  if (xPosition + logo.clientWidth >= window.innerWidth || xPosition <= 0) {
    xSpeed = -xSpeed;
  }
  if (yPosition + logo.clientHeight >= window.innerHeight || yPosition <= 0) {
    ySpeed = -ySpeed;
  }

  xPosition += xSpeed;
  yPosition += ySpeed;
  update();
}, 1000 / FPS);

window.addEventListener("resize", () => {
  xPosition = 10;
  yPosition = 10;

  section.style.height = window.innerHeight + "px";
  section.style.width = window.innerWidth + "px";
});

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  overflow: hidden;
}
section {
  position: relative;
}
svg {
  position: absolute;
  width: 200px;
  fill: rgb(0, 81, 255);
}
@media (max-width: 768px) {
  svg {
    width: 150px;
  }
}

<section>
  <svg class = "logo"  xmlns = "http://www.w3.org/2000/svg">
      <image id = "imageID" href = "https://i.imgur.com/gcrU9si.jpg" height = "160" width = "200"/>
  </svg>
</section>