Canvas vs SVG

تعد كل من SVG و Canvas تقنيتان يمكنها رسم أشياء في متصفحات الويب ، لذا فهي تستحق المقارنة والفهم عندما يكون أحدهما أكثر ملاءمة من الآخر.

الفرق بين SVG و Canvas

SVG

SVG إختصار لـ Scalable Vector Graphics هو تنسيق صورة مستند إلى XML يتم استخدامه لتعريف رسومات متجهة ثنائية الأبعاد للويب.

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

توضيح أكثر:

• تم تطوير SVG بواسطة منظمة W3C.
• تم إصداره لأول مرة في عام 2001.
• امتدادات الملفات هي svg. و svgz.
• نوع وسائط الإنترنت الخاص بها هو image / svg + xml ومعرف النوع الموحد هو public.svg-image.
• يمكن إنشاء صور SVG عن طريق محرر الرسومات مثل Inkscape و Adobe Illustrator و Adobe Flash.
• لا تعتمد SVG على الدقة ، مما يعني أنها مستقلة، إذا كبرت الصورة فلن تفقد شكلها.
• تم تطوير رسومات SVG بشكل أساسي باستخدام الوظائف والصيغ الرياضية التي تتطلب بيانات أقل ليتم تخزينها في الملف المصدر.
• يوفر SVG قابلية تطوير أفضل حيث يمكن طباعته بجودة عالية بأي دقة.

متى تستخدم SVG؟

ليست كل الإستخدامات، بل الأكثر إستخدامًا:

• عندما تكون بحاجة إلى فن فيكتور.
• عندما تكون بحاجة إلى رسم النصوص بشكل أفضل وأكثر مرونة.
• عندما تكون بحاجة إلى إنشاء رسومات للتطبيقات.
• عندما تكون بحاجة إلى أداء أفضل مع عدد أقل من الكائنات.
• عندما تكون بحاجة إلى طباعة بجودة عالية (بأي دقة لا يحدث أى نوع من البكسلة).

تعلم كيفية الرسم عن طريق SVG بالتفصيل: SVG Graphics.

Canvas

الـ canvas هى طريقة سهلة وفعالة لرسم الرسومات باستخدام JavaScript.

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

توضيح أكثر:

• تعد Canvas تفاعلية للغاية وتستجيب لتفاعل المستخدم مع أي أحداث تعمل باللمس.
• يسمح Canvas بخيار حفظ الصور png. أو jpeg.
• تعد Canvas فعالة للغاية في التعامل مع عناصر متعددة في وقت واحد ويمكن تحريك الكائن الذي يتم رسمه.
• تعتمد Canvas بشكل أساسي على الدقة ولديها تصورات معقدة قد تكون بطيئة في بعض الأحيان في رسم مناطق كبيرة.
• هناك العديد من الاستراتيجيات المتاحة لرسم أشكال مختلفة مثل المسارات والمربعات والدوائر والنص وإضافة الصور.
• في Canvas ، لرسم الرسومات ، هناك العديد من الاستراتيجيات التي يجب تطويرها.

متى تستخدم Canvas؟

ليست كل الإستخدامات، بل الأكثر إستخدامًا:

• عندما تكون بحاجة إلى إنشاء رسومات للألعاب.
• عندما تكون بحاجة إلى أداء أفضل مع عدد أكبر من الكائنات.
• عندما تكون بحاجة إلى طلاء أو دهان (paint) البرامج.

تعلم كيفية الرسم عن طريق Canvas بالتفصيل: Canvas Graphics.