Graficzny model z klikalnymi elementami

Cześć,

Robię stronkę w Next.js, w której będę miał sekcję zawierającą model człowieka przedstawionego za pomocą grafiki wektorowej SVG. Każdy z elementów ciała - ręce, stopy, policzki etc. będą oddzielnym elementem razem tworząc całość postaci. Każdy z tych elementów będzie miał oddzielną interakcję.
Jakie rozwiązanie proponujecie do implementacji takiego modelu, jakieś przykłady, sugestie.

Z góry dzięki za pomoc.

Ostatnio robiłem coś podobnego z zrzutem całego budynku.

Wymyśliłem to w taki sposób, że podzielę każdą część na dwa osobne obrazki, aby całość była lżejsza. Pierwszy był webp zawierający wszystkie potrzebne szczegóły wizualne oraz drugi svg z prostymi kształtami do przechowywania eventów.

Przez CSS nałożyłem jeden obrazek na drugi i ustawiłem, aby jednakowo się skalowały w zależności od rozdzielczości. Do svg wstawiłem dodatkowe atrybuty data żebym wiedział z jakiej części obrazka pochodzi event.

<div class="wrapper">
  <img src="image.webp" width="1200" height="800" alt="...">
  <svg width="1200" height="800" viewBox="0 0 1200 800" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path data-level="0" data-type="window" ... />
      <path data-level="0" data-type="door" ... />
      <path data-level="1" data-type="window" ... />
      ...
  </svg>
</div>

W JavaScripcie podpiąłem odpowiednie eventy click, mousemove, mouseover, mouseout itd do path.

Oryginalnych obrazków nie mogę wstawić, ale podział na szczegóły był mniej więcej taki.