How to put png/jpg image as svg background?

Question

css

Hello!
Really, really need help from very, very experts.
What is available: a design layout, two random photos from Yandex and no ideas.
What is required: substitute the images in the required places. In place of the red and green figures, see below.


There are no issues with the green shape -- border-radius at 100% and ok. But what to do with the red uniform? Maybe somehow use a mask, svg, something else? I read a lot of information, but I'm either looking in the wrong place, or it's not right. The option to convert the image to base64 and put it inside the svg immediately into the firebox is too expensive to store the entire image in the database (instead of just a link to it), and all images will be stored in it.

Answer 1

For a complex shape, yes, an SVG mask, for a round shape, border-radius is enough. However, nothing prevents you from generating SVG directly in the HTML body. See the SVG specification for how to insert images into the body or as a background.

Answer 2

So, after a little rest and then returning to the markup and styles, I continued to shamanize and yet, I succeeded. Thanks to Arseniy Matytsin for confirming that there should be an SVG mask here.
For those who have also tried or who are interested, here is the markup and styles of the working version: