overlay svg responsive according to the img - css

Question

I have to put an icon overlay to the image. Image is 100% in width & height. Icon is the mark on the image. Icons position is changing according to the image responsive. I need to stick the same position of the icon all time. When image is responsive the icon also needs to be change its width left and top.
<div class="outer">
<svg class="mark-icon"><svg>
<img src="Map.jpg" class="map-bg"/>
</div>
.outer{
position:relative;
}
.map-bg{
width:100vw;
height:100vh;
object-fit:cover;
}
.mark-icon{
width:50px;
height:50px;
position:absolute;
left:50px;
top:30px;
}
Sample
https://jsfiddle.net/rkv3sd0q/

Answer 1

Try adding a map image using the svg <image> tag
Add a red pointer icon with <circle>
When both elements are inside the SVG, their position relative to each other will remain constant.
And will not change on any resize of the browser window.
body{
margin:0px;
padding: 0px;
}
.outer-pane {
width:100vw;
height:100vh;
}
.pointer {
fill:red;
cursor:pointer;
}
<div class="outer-pane">
<svg viewBox="0 0 1000 739" preserveAspectRatio="xMin YMin meet" >
<image class="mainProject" xlink:href="https://www.mapsofworld.com/style_2019/images/world-map.png?v:1" width="1000" height="739" />
<circle class="pointer" cx="320" cy="124" r="25" fill="red" />
</svg>
</div>
Update
Map with multiple markers
To do this, add the marker path once using the <symbol> tag
<symbol id="marker" width="18" height="28" viewbox="0 0 9.831 14.782">
<path fill="#00AEEF" d="M9.831 4.916c0 2.714-3.538 8.487-4.913 9.867C3.437 13.307 0 7.631 0 4.916S2.201 0 4.916 0s4.915 2.201 4.915 4.916z"/>
<circle cx="4.912" cy="4.916" r="2.932" fill="#E7EDEF"/>
</symbol>
And add markers to the map many times with the <use> tag
<use xlink:href="#marker" fill="#00AEEF" x="350" y="80" />
<use xlink:href="#marker" fill="red" x="670" y="360" />
body{
margin:0px;
padding: 0px;
}
.outer-pane{
width:100vw;
height:100vh;
}
.pointer {
fill:red;
cursor:pointer;
}
symbol path {
fill:inherit;
}
<div class="outer-pane">
<svg viewBox="0 0 1000 739" preserveAspectRatio="xMin YMin meet" >
<symbol id="marker" width="18" height="28" viewbox="0 0 9.831 14.782">
<path fill="#00AEEF" d="M9.831 4.916c0 2.714-3.538 8.487-4.913 9.867C3.437 13.307 0 7.631 0 4.916S2.201 0 4.916 0s4.915 2.201 4.915 4.916z"/>
<circle cx="4.912" cy="4.916" r="2.932" fill="#E7EDEF"/>
</symbol>
<image class="mainProject" xlink:href="https://www.mapsofworld.com/style_2019/images/world-map.png?v:1" width="1000" height="739" />
<use xlink:href="#marker" fill="#00AEEF" x="350" y="80" />
<use xlink:href="#marker" fill="red" x="670" y="360" />
<use xlink:href="#marker" fill="violet" x="770" y="360" />
<use xlink:href="#marker" fill="purple" x="170" y="210" />
<use xlink:href="#marker" fill="crimson" x="190" y="310" />
</svg>
</div>

Answer 2

What I understood is, Icon must be responsive and it's height and width should decrease with decrease on width of the screen, also It should be on left upper corner of the image.
If that is the case then you have to use #media query on each break point to change the icon size and position for left, top, width and height properties
Also, if you keep object-fit: cover;, then there is possibility that image is not of the same height and width of screen. So there might be possibility that icon is not where should be.
If there is anything else, please put up a example in codepen and update the question again.

Answer 3

You can place your icon dynamically by using, unit as vw and vh, as your image is set as well with that, it will be responsive the same way:
.mark-icon{
position:absolute;
left:5vw;
top:5vh;
}
DEMO:
body{margin:0;}
.outer{
position:relative;
}
.map-bg{
width:100vw;
height:100vh;
object-fit:cover;
}
.mark-icon{
width:50px;
height:50px;
position:absolute;
left:5vw;
top:5vh;
}
<div class="outer">
<svg height="100" width="100" class="mark-icon">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
Sorry, your browser does not support inline SVG.
</svg>
<img src="https://images.freeimages.com/images/large-previews/7e9/ladybird-1367182.jpg" class="map-bg">
</div>