تخطيط مرسوم يمكن للمستخدم التفاعل معه

يمكنك استخدام وسم map في HTML و بذلك يمكنك تحديد مناطق معينة باستخدام وسم area و تركيب وسم map بهذا الشكل 

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="img.png.0124e30d47124b2473c9f4a1641f2d5f.png" usemap="#image-map">

<map name="image-map">
    <area target="_blank" alt="" title="" href="" coords="28,42,224,176" shape="rect">
    <area target="" alt="" title="" href="" coords="224,176,22,291" shape="rect">
    <area target="" alt="" title="" href="" coords="" shape="0">
</map>

ولاحظي أن وسم area يحتوي على خاصيتين مهمتين و هي خاصية coords التي توضع بداخلها أحداثيات المنطقة المحددة , و الخاصية shape التي تحدد نوع المنطقة مثل rect , poly, circle أو يمكنك استخدام أحد المواقع التي تقدم خدمة تحديد المناطق على الصورة مثل هنا و هنا حيث يمكنك رفع الصورة التي تودين تحديد المواقع عليها و من ثم يمكنك رسم المناطق باستخدام الأداوت المقدمة و من ثم آخر شيء هو توليد وسم map و بداخله المناطق محددة و من ثم يمكنك التعامل مع هذا الوسم برمجياً باستخدام جافاسكريبت أو PHP .  

في حال قمت بتحويل الصورة إلى النمط svg يمكنك إدراج شيفرة جافاسكريبت ضمنها باستخدام الوسم CDATA والاستجابة لنشاط المستخدم داخلها، مثال بسيط:

      <svg width="600" height="600">
         <script type="text/JavaScript">
            <![CDATA[
               function showColor() {
                  alert("Color of the Rectangle is: "+
                  document.getElementById("rect1").getAttributeNS(null,"fill"));
               }
               
               function showArea(event){
                  var width = parseFloat(event.target.getAttributeNS(null,"width"));
                  var height = parseFloat(event.target.getAttributeNS(null,"height"));
                  alert("Area of the rectangle is: " +width +"x"+ height);
               }
               
            ]]>
         </script>
         
         <g>
            <text x="30" y="50" onClick="showColor()">show rectangle color.</text>
            <rect id="rect1" x="100" y="100" width="200" height="200" 
            stroke="green" stroke-width="3" fill="red" 
            onClick="showArea(event)"/>
         </g>
      </svg>

يعتبر النمط SVG أفضل للحفاظ على تجاوبية الرسم مع اختلاف أحجام شاشات العرض، ولكن ذلك قد يتطلب منك معرفة إضافية بالتعامل مع SVG للوصول إلى العناصر المطلوب التفاعل معها.