How to make SVG responsive with mask?

Question

css

Can you tell me how to implement this block?

It is necessary that the image and the block stretch in width, and the height remains fixed.
So I tried to implement, but I can’t stretch it all

<svg xmlns="http://www.w3.org/2000/svg" width="1600px" height="820" viewBox="0 0 1600 820">
    <clipPath id="clipping">
      <path fill-rule="evenodd" clip-rule="evenodd" fill="#ccc" d="M0,761.932c0,0,366.372,58.068,900,58.068s900-58.068,900-58.068V0 H0V761.932z"/>
    </clipPath>
    <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://hd.unsplash.com/photo-1470010762743-1fa2363f65ca" width="1800" height="820" class="item" />
  </svg>

.item {
  clip-path: url(#clipping);
}

Answer 1

in your case, this is not possible, most likely, since your viewBox is limited in size and your path is in pixel , for this you need to save the image in SVG and lay it out as background , which is easier to do on png