Placing an Image inside another png/svg file - html

Question

Currently I have a png image where there is an empty blue space in the middle. Reference Image:
I want to be able to embed another image into the blue space through html. One solution that I thought of was to create an SVG, but how do I get the image to fit into the svg.
I cannot use absolute positioning to place these images since the main image with the blue space is being dynamically placed in a map as a marker.
Current SVG:
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="85.000000pt" height="109.000000pt" viewBox="0 0 85.000000 109.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.10, written by Peter Selinger 2001-2011
</metadata>
<g transform="translate(0.000000,109.000000) scale(0.100000,-0.100000)"
fill="#ffff00" stroke="none">
<path d="M390 1061 c-5 -11 -38 -33 -72 -50 -68 -34 -63 -43 6 -11 44 21 109
80 88 80 -6 0 -16 -9 -22 -19z"/>
<path d="M455 1050 c55 -57 178 -99 295 -100 31 0 61 -5 68 -12 9 -9 12 -84
12 -278 0 -340 -1 -344 -114 -455 -76 -75 -182 -146 -265 -178 -27 -10 -37 -8
-88 17 -139 68 -259 167 -312 256 -25 43 -26 52 -32 240 l-6 195 1 -200 c1
-197 1 -201 27 -245 64 -109 300 -280 385 -280 31 0 154 65 229 120 71 52 143
133 166 185 18 40 19 65 17 342 l-3 298 -84 7 c-152 13 -257 47 -288 94 -8 13
-20 24 -26 24 -6 0 2 -14 18 -30z"/>
<path d="M406 1035 c-32 -49 -201 -104 -323 -105 l-43 0 0 -282 c0 -277 1
-284 24 -333 39 -82 146 -174 291 -250 l67 -34 61 31 c151 76 265 170 303 253
23 49 24 57 24 330 l0 281 -103 12 c-124 13 -206 42 -252 87 l-33 34 -16 -24z
m63 -48 c9 -8 33 -20 53 -28 20 -7 35 -16 32 -20 -2 -4 5 -5 16 -2 11 3 20 1
20 -5 0 -5 41 -15 92 -21 51 -7 93 -13 94 -14 1 -1 5 -117 8 -257 5 -187 3
-266 -6 -295 -14 -47 -130 -170 -193 -204 -22 -12 -62 -35 -90 -51 -27 -16
-59 -29 -70 -29 -21 0 -138 58 -120 59 6 0 -9 9 -32 20 -24 10 -43 24 -43 30
0 5 -6 10 -13 10 -7 0 -39 26 -70 57 -43 43 -56 62 -51 77 4 15 3 17 -4 7 -7
-10 -12 -5 -20 20 -13 38 -16 558 -4 561 4 0 19 2 33 3 67 5 135 17 172 31 56
21 127 56 133 65 6 11 44 2 63 -14z"/>
<path d="M228 973 c7 -3 16 -2 19 1 4 3 -2 6 -13 5 -11 0 -14 -3 -6 -6z"/>
<path d="M173 963 c9 -2 23 -2 30 0 6 3 -1 5 -18 5 -16 0 -22 -2 -12 -5z"/>
<path d="M16 944 c-3 -9 -5 -59 -4 -112 l2 -97 3 85 c4 127 5 128 61 133 l47
3 -51 2 c-39 2 -53 -2 -58 -14z"/>
</g>
</svg>

Answer 1

I'm using part of one of your paths to clip an image.
I'm also using that part with <use> as a border.
Observation: although I'm using part of your code, the paths you have are not useful for the clipping since those are mostly hollow paths.
svg{border:solid}
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="85.000000pt" viewBox="0 0 850 1090" preserveAspectRatio="xMidYMid meet">
<clipPath id="clip">
<path id="path" transform="translate(0,1090) scale(1,-1)" d="M406 1035 c-32 -49 -201 -104 -323 -105 l-43 0 0 -282 c0 -277 1
-284 24 -333 39 -82 146 -174 291 -250 l67 -34 61 31 c151 76 265 170 303 253
23 49 24 57 24 330 l0 281 -103 12 c-124 13 -206 42 -252 87 l-33 34 -16 -24z" />
</clipPath>
<image x="-200" y="30" width="1090" height="1090" clip-path="url(#clip)" xlink:href="https://assets.codepen.io/222579/darwin300.jpg" />
<use xlink:href="#path" fill="none" stroke="gold" stroke-width="30" />
</svg>
Yet another way of doing it would be using the image as a pattern to fill the path.
Please note tha in this case I'm using a transformed (upside down) image.
svg{border:solid}
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="85.000000pt" viewBox="0 0 850 1090" preserveAspectRatio="xMidYMid meet">
<pattern id="pat" width="1" height="1">
<image x="-200" y="30" width="1090" height="1090" transform="translate(0,1090) scale(1,-1)" xlink:href="https://assets.codepen.io/222579/darwin300.jpg" />
</pattern>
<g transform="translate(0,1090) scale(1,-1)" >
<path id="path" d="M406 1035 c-32 -49 -201 -104 -323 -105 l-43 0 0 -282 c0 -277 1
-284 24 -333 39 -82 146 -174 291 -250 l67 -34 61 31 c151 76 265 170 303 253
23 49 24 57 24 330 l0 281 -103 12 c-124 13 -206 42 -252 87 l-33 34 -16 -24z" fill="url(#pat)"/>
<use xlink:href="#path" fill="none" stroke="gold" stroke-width="30" />
</g>
</svg>