How to draw svg on image?

Question

I have a image, and i have cordinates (x1,y1),(x2,y2),(x3,y3),(x4,y4) to draw a svg/rectagle on image, how to draw? I have tried using svg tag in img tag, but it does not work, the main thing is how to set width and height of svg(rect svg) using those cordinates.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="100%" height="100%" viewBox="0 0 1055 717" preserveAspectRatio="xMinYMin meet"  >  


<rect x="540" y="134" width="150" height="100" fill="none" stroke="red" stroke-width="2" />
</svg>

Answer 1

You can consider using calc() and some CSS variables to find the width/height:

:root {
  --x1:200;
  --x2:100;
  --x3:150;
  --x4:200;
}

rect {
   x:calc(var(--x1)*1px);
   y:calc(var(--x2)*1px);
   width:calc((var(--x1) + var(--x2))*1px);
   height:calc((var(--x3) + var(--x4))*1px);
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="100%" height="100%" viewBox="0 0 1055 717" preserveAspectRatio="xMinYMin meet"  >  
<rect fill="none" stroke="red" stroke-width="2" />
</svg>

Answer 2

If I understand correctly OP then so and look at the comments in the code.

<style>
.container {
width:100vw;
height:100vh;
}
</style>
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 1055 717" preserveAspectRatio="xMinYMin meet"  >  
    <!-- Add image -->
<image xlink:href="https://i.stack.imgur.com/ORJ3b.jpg" width="100%" height="100%" /> 
    <!-- Add a red rectangle over the image. -->
<rect x="540" y="134" width="150" height="100" fill="none" stroke="red" stroke-width="2" /> 

      <!-- Add text -->
<text x="550" y="200" font-size="48px" font-family="sans-serif" font-weight="700" fill="white" >TEST </text>
</svg>
</div>

UPDATE

If a square over the image is needed to focus on one or more fragments of the image, then you can use it repeatedly but add individual tooltips <tooltip>

A tooltip pops up when you hover and hold the cursor on the red square

.container {
width:100vw;
height:100vh;
}
.rect {
fill:transparent;
stroke:red;
stroke-width:2;
}

<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 1024 768" preserveAspectRatio="xMinYMin meet"  >  
    <!-- Add image -->
<image xlink:href="https://i.stack.imgur.com/uOg10.jpg" width="100%" height="100%" /> 
    <!-- Add a red rectangles over the image. -->
<g>  
     <!-- Tooltip pops up on hover -->
 <title> Young lioness </title>
   <rect class="rect" x="160" y="220" width="170" height="170" rx="15" /> 
</g> 
  <g> 
    <title>  Young lion </title>
     <rect class="rect" x="475" y="200" width="200" height="220" rx="15"/> 
  </g>
 
 
</svg>
</div>