<div class="test-2">
  <svg role="none">
    <mask id="test2">
      <circle fill="white" cx="100" cy="100" r="100"></circle>
      <circle fill="black" cx="86%" cy="86%" r="18"></circle>
    </mask>
    <g mask="url(#test2)">
      <image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="https://ishadeed.com/assets/shadeed.jpg"></image>
      <circle fill="none" cx="100" cy="100" r="100" stroke="rgba(0,0,0,0.1)" stroke-width="2"></circle>
    </g>
  </svg>
</div>

.test-2 {
  width: 200px;
  height: 200px;
  margin: 2rem auto;

  svg {
    width: 100%;
    height: 100%;
  }

  img {
    max-width: 100%;
  }
}

*,
*:before,
*:after {
  box-sizing: border-box;
}