(svg, canvas, img) ماهوا الفرق بينهم في HTML

بداية، في مجال الصور الحاسوبية، هناك نوعان من الصور: الصور النقطية (bitmap images) والرسومات المتجهية (vector graphics).

الصور النقطية هي الصور التي يتم تمثيلها عن طريق تحديد لون كل بكسل. هذه هي أغلب أنواع الصور وأكثرها شهرة، لأنّها الصور التي تنتجها آلات التصوير والماسحات الضوئية وغيرها من أجهزة التقاط الصور. من أكثر صيغ الصور النقطية شهرة نجد JPEG، PNG، و GIF.

أمّا الرسومات المتجهية، فهي رسوم يتم تعريفها عن طريق وضع نقاط على المستوى وتحديد الخطوط بينها كدوال رياضية.  ميزة هذه الرسومات أنّها أصغر بكثير من ناحية الحجم، وأنّه يمكن تكبيرها إلى ما لانهاية بدون خسارة جودتها (نعم أقصد ذلك حرفيا، يمكن تكبيرها إلى ما لانهاية!). الرسوم المتجهية رائعة في كل شيء باستثناء شيء واحد وهو الشيء الذي يعيق استخدامها: أنّه يجب رسمها يدويا ولا يمكن توليدها من أجهزة الحصول على الصور مثل الصور النقطية. أشهر صيغة من صيغ الرسوم المتجهية هي SVG.

لذلك، فالرسوم المتجهية تجدها مستخدمة دائما في الأيقونات والخطوط والشعارات. أمّا الصور النقطية فتستخدم للصور الفوتوغرافية عموما، التي يتم الحصول عليها عن طريق أحد أجهزة التقاط الصور، وكذلك الصور المعدّلة بعد الالتقاط.

والآن بعد أن فهمنا الفرق بين الرسوم المتجهية والصور النقطية، حان الوقت للعودة إلى HTML.

إذا كانت لديك صورة نقطية، فالطريقة الصحيحة لإدخالها في صفحة ويب هي باستخدام الوسم <img>.

إذا كانت لديك رسمة متجهية بصيغة SVG، فلديك عدّة خيارات:

1. إما أن تستخدم الوسم <img> في الملفات البسيطة، لكن يفترض تجنّب هذه الطريقة لأنّها ليست الطريقة الصحيحة لفعل ذلك.
2. أو استخدام الوسم <object> لتضمينها:

   <object data="image.svg" type="image/svg+xml"></object>

3. أو تضمين محتوى الصورة مباشرة داخل HTML عن طريق الوسم <svg>. هذا الأمر ممكن لأن صيغة SVG ما هي في الواقع إلا ملف XML، يمكنك نسخ محتواه ووضعه داخل HTML بدون مشاكل:

   <svg width="100" height="100">
     <rect x="10" y="10" width="80" height="80" fill="blue" />  <!-- محتوى SVG -->
   </svg>

حسنا ماذا عن <canvas>؟ هذا الوسم يعطيك مساحة فارغة يمكنك  الرسم فيها باستخدام JavaScript. يعني أنّه طريقة أخرى لرسم الرسومات المتجهية، لكن بدل إحضار رسم جاهز وتضمينه، يسمح لك هذا الوسم بالرسم مباشرة على الصفحة.

بالإضافة للشرح الرائع من قبل حمزة في التعليق السابق فيعتبر بشكل عام، يمكن استخدام الصور النقطية أو  <img> لعرض الصور الثابتة أي لا يتم التحكم أو التعديل عليها برمجياً مثل ال canvas و التي لا يتغير حجمها بشكل كبير وتعتبر أسهل طريقة لعرض الصور في HTML

بينما ال canvas يستخدم للرسومات و لعرض الرسوم البيانية الديناميكية بسبب طبيعته في الرسم بشكل ديناميكي باستخدام البرمجة باستخدام JavaScript وتعتبر مثالية للرسوم المتحركة والتفاعلات الديناميكية والألعاب

بينما  svg يستخدم أيضاً للرسومات والتعديل عيه من خلال css يتميز بالقابلية للتكبير والتصغير بدون التأثير على الجودة إطلاقاً لذلك تستخدم في للشعارات والأيقونات والرسومات المتكررة