Clip image inside of enclosed letters

Question

I'm trying to clip an image inside of a letter/number (in this case 0).

This can ofcourse be hardcoded with a simple clip path, but this will make responsiveness and text size a lot more complicated and less flexible.

I tried using clipPath with svg since i didn't really see a way of this working with regular or

text.

.svg{
  position: absolute;
  top: 0;
}

img{
  width: 500px;
    clip-path: url(#svgPath);
}

<div class="container">
  <img src="https://images.unsplash.com/photo-1711383230426-1de085ab1c89?q=80&w=1936&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
  
  <div class='svg'>
    <svg height="300" width="200" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <clipPath id="svgPath">
          <text x="15" y="150" fill="black" font-size="200px" class="blend-text">0</text>
        </clipPath>
      </defs>
    </svg>
  </div>
</div>

Currently the image is cut out by the letter, but this is not the wanted end result. Is there possibly a way to cut out the shape of something with clipPath but keep everything inside of the path aswell?