مقارنة بين Canvas و SVG لـ HTML5
- الصفحة السابقة SVG لـ HTML5
- الصفحة التالية وسائط HTML
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 بشكل مفرط بالسرعة)
- غير مناسبة للعروض التفاعلية
- الصفحة السابقة SVG لـ HTML5
- الصفحة التالية وسائط HTML