title: How to size svg according to various devices?
body: <p>I am using SVG for an illustration I have created the following view
  for all desktop size <a href="https://i.stack.imgur.com/kurLv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kurLv.png" alt="enter image description here"></a></p>
  
  <p>but when I change to view to a large screen or small it change its position Example
  <a href="https://i.stack.imgur.com/kTNy6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kTNy6.png" alt="enter image description here"></a></p>
  
  <p>code HTML</p>
  
  <pre><code>&lt;body&gt;
    &lt;app-root&gt;&lt;/app-root&gt;
    &lt;div class="svg-container"&gt;
      &lt;img src="./assets/Asset 1.svg" alt="" class="background"&gt;
      &lt;img src="./assets/Asset 3.svg" alt="" class="magnifier"&gt;
      &lt;img src="./assets/Asset 31.svg" alt="" class="pc-table"&gt;
      &lt;img src="./assets/Asset 28.svg" alt="" class="monitor"&gt;
      &lt;img src="./assets/Asset 32.svg" alt="" class="keyboard"&gt;
      &lt;img src="./assets/Asset 27.svg" alt="" class="designer"&gt;
      &lt;img src="./assets/Asset 26.svg" alt="" class = "client"&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  
  @import '~bootstrap/dist/css/bootstrap.min.css';
  body {
      overflow: hidden;
  }
  img{
      position: relative;
  }
  .background {
      position: relative;
      float: right;
      bottom:5rem;
      width: 47rem;
  }
  .magnifier {
      position: relative;
      float: bottom;
      top:335px;
      left:535px;
      width: 12rem;
      transform: rotate(5deg);
  }
  .pc-table {
      position: relative;
      float: right;
      top: 10rem;
      left: 40rem;
      width: 21rem;
  }
  .monitor {
      position: relative;
      float: right;
      width: 10rem;
      left: 57rem;
      bottom: 8rem;
      // top: 2rem;
  }
  .keyboard {
      width: 10rem;
      float: right;
      left: 33.5rem;
      bottom:11.5rem;
  }
  .designer {
      width: 3rem;
      float: right;
      left: 33rem;
      bottom:14.4rem;
  }
  .client {
      width: 10rem;
      float: right;
      left: 35rem;
      bottom:10rem;
  }
  </code></pre>
  
  <p>I have used the image for the SVG link and style them according to in the CSS and used perfectly align them accordingly that need in my  style but it changing it devises size it shows the following image   </p>