Messing around masking with images with SVGs. Turns out that when you wrap an SVG in clipPath tricks to make SVGs responsive to their parents go out the window. In fact, I’m not sure the SVG even affects the layout, it kinda just blurs into the background and becomes an object that can be embedded into objects.

There are new tricks to make the SVG clip scale to the image - https://cssfordesigners.com/articles/clip-path-scaling

awesome svg editor tool

Clipping and Masking in CSS