[解決済み] SVG 要素を画像上に配置する

質問

以下のような要素を用意し、SVGオブジェクトが画像の上に表示されるように（つまり画像の一部のように）スタイルを設定することは可能でしょうか？

現在、新しい行でその下に表示されています。

親divの背景画像に設定すればいいのはわかるのですが、残念ながら親内で回転させることも必要なので、その選択肢はないように思います。

<div id='edit-area' style='position:relative; overflow:none; display:inline-block; border: 1px black solid; width: 950px; height: 500px;'>
    <img src='/my_image.png' />
    <svg id="edit-svg" height="500" width="950">
        <!-- there will be lines, rectangles etc in here -->
    </svg>
</div>

解決方法は？

ここでは、画像のオーバーレイを行う一般的な例を紹介します。基本的には、画像とオーバーレイのコンテンツを相対位置の要素でラップし、オーバーレイのコンテンツを絶対位置にしています。

.img-overlay-wrap {
  position: relative;
  display: inline-block; /* <= shrinks container to image size */
  transition: transform 150ms ease-in-out;
}

.img-overlay-wrap img { /* <= optional, for responsiveness */
   display: block;
   max-width: 100%;
   height: auto;
}

.img-overlay-wrap svg {
  position: absolute;
  top: 0;
  left: 0;
}

.img-overlay-wrap:hover {
  transform: rotate( 15deg );
}

<div class="img-overlay-wrap">

  <img src="https://via.placeholder.com/400">
  <svg viewBox="0 0 200 200">
    <circle cx="75" cy="75" r="50" fill="rebeccapurple"/>
  </svg>

</div>

回転について言及されたので、少し回転の楽しみを追加しました（意図したものとは異なるかもしれません）。