How to crop SVG?

Question

SVG

Hello, there is such a svg
CodePen
file This is how it looks in the browser

View in browser

How to crop in such a way that would have only a part of what is in the picture

At the same time, the red color would be transparent and the transparent (white as in the photo) was white
Tried to crop in Photoshop and through the fill, but there are torn parts

Answer 1

I tried to crop in Photoshop and through the fill, but there are torn parts

who edits the vector in photoshop? Take any vector editor and crop as you like,
for example, close to yours, code

<svg
xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="100%" height="699px">
<path fill="#CA0303" d="M0,0v57.158c0,0,496.366-70.005,964,44c443,108,956-44,956-44V0H0z"/>
</svg>

For fills - you can either set fill="none" in the code, or add a class or id to the path, and write at least fill: none at least opacity: 0 in css for this element

Answer 2

- Well, it seems to work... (along with the picture)))
The template is here

<svg 
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="100%" height="699px">
<pattern id="pattern"
   width="100%" height="100%">
   <image xlink:href="http://wallpapers-image.ru/1280x720/flowers/wallpapers-1280x720/zastavki-khrizantema-cvety-1280x720.jpg" width="100%" />
</pattern>
<path fill-rule="evenodd"  fill="url(#pattern)"
 d="M 0 200 
    Q 300 50 600 200 
    Q 900 350 1200 200 
    L 1200 50 L 0 50 Z"/>
</svg>