Placing an Image inside another png/svg file

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>

wrap the image in a container and then use absolute positioning for the second image — Pete, Aug 18 '21 at 12:18
@Pete I cant do that since these images are being placed dynamically on a map as a marker — JJM50, Aug 18 '21 at 12:22
Surely if they are map markers it would be easier to create a separate icon for each type of marker rather than trying to fudge some image within an image - I don't see what benefit your approach would have - you still need separate images for each secondary image — Pete, Aug 18 '21 at 12:24
Well I'm trying to have each countries scenery embeded inside the blue space. Not something you can really indicate with different icons — JJM50, Aug 18 '21 at 12:28

enxaneta · Accepted Answer · 2021-08-18T13:35:18.497

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>

Placing an Image inside another png/svg file

1 Answers1