HTML5 Canvas مقابل SVG

Canvas و SVG يسمحان لك بإنشاء رسومات في المتصفح، ولكنهم مختلفان في جوهرهم.

SVG

SVG هو لغة يستخدمها لوصف الرسومات 2D باستخدام XML.

SVG قائم على XML، مما يعني أن كل عنصر في DOM لـ SVG متاح. يمكنك ربط معالج أحداث JavaScript مع عنصر معين.

في SVG، يتم اعتبار كل رسم كعنصر. إذا تغيرت خصائص عنصر SVG، يمكن للمتصفح إعادة إظهار الرسم تلقائيًا.

Canvas

يتم رسم الرسومات 2D بواسطة JavaScript في Canvas.

يتم رسم Canvas على أساس البكسل.

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

مقارنة بين Canvas و SVG

الجدول أدناه يوضح بعض الفروق بين Canvas و SVG.

Canvas

  • يعتمد على الدقة
  • لا يدعم معالج الأحداث
  • قدرة ضعيفة في رسم النصوص
  • يمكن حفظ الصور الناتجة بصيغة .png أو .jpg
  • مناسب بشكل مثالي لتطبيقات العاب الصور، حيث يتم رسم العديد من العناصر بشكل متكرر

SVG

  • لا يعتمد على الدقة
  • دعم معالج الأحداث
  • مناسبة بشكل مثالي لتطبيقات تحتوي على مناطق رسم كبيرة (مثل Google Maps)
  • تعقيد عالي يمكن أن يبطئ عملية الرسم (تطبيقات DOM التي تستخدم بشكل مفرط ليست سريعة)
  • غير مناسبة للعروض التفاعلية