اللوحة البيضاوية vs SVG: اختيار الأداة المناسبة للعمل

HTML5 Canvas و SVG هما تقنيتان مبنيتان على المعايير في HTML5 يمكنك استخدامهما لإنشاء رسومات وتجارب بصرية مذهلة. السؤال الذي أطرحه في هذا المقال هو التالي: هل يهم أيهما تستخدم في مشروعك؟ بتعبير آخر، هل هناك حالات استخدام تفضل HTML5 Canvas على SVG؟

أولاً، دعونا نقضي بضع كلمات لتعريف HTML5 Canvas و SVG.

ما هو HTML5 Canvas؟

إليك كيف يعرض مواصفات WHATWG عنصر canvas:

يوفر عنصر canvas للبرمجيات سطحاً بيتماسك حسب الدقة للصور النقطية التي يمكن استخدامها لعرض الرسوم البيانية والألعاب والفن أو غيرها من الصور المرئية على الطاولة.

بتعبير آخر، تكشف العلامة <canvas> سطحًا حيث يمكنك إنشاء والتلاعب بالصور النقطية بالبكسل عن طريق واجهة برمجة JavaScript.

إليك نموذج أساسي للتعليمات البرمجية:

ال HTML:

<canvas id="myCanvas" width="800" height="800"></canvas>

ال JavaScript:

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
context.fillStyle = '#c00';
context.fillRect(10, 10, 100, 100);

يمكنك الاستفادة من طرق وخصائص واجهة برمجة HTML5 Canvas من خلال الحصول على مرجع لكائن سياق 2D. في المثال أعلاه، لقد رسمت مربع أحمر بسيط بحجم 100 x 100 بكسل، موضوع 10 بكسل من اليسار و 10 بكسل من الأعلى من سطح الرسم <canvas> الرسم.

يعتمد على الدقة التصميمية، قد تفقد الصور التي تقوم بإنشائها على <canvas> جودة عندما تتم مضاعفة الحجم أو عرضها على شاشات Retina.

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

ما هو SVG؟

SVG تعني Scalable Vector Graphics. وفقًا للمواصفات:

SVG هي لغة لوصف الرسومات ثنائية الأبعاد. كتنسيق مستقل أو عندما يتم دمجه مع XML أو HTML5، يستخدم بناء جملة XML أو HTML5 على التوالي. …

يمكن أن تكون رسومات SVG تفاعلية وديناميكية. يمكن تحديد الرسوم المتحركة وتشغيلها إما بشكل إعلاني (عن طريق دمج عناصر SVG للرسوم المتحركة في محتوى SVG) أو عبر البرمجة.

SVG هو نظام تشفير XML مصمم لإنشاء الرسومات المتجهة. كونه قابل للتوسيع له ميزة تتيح لك زيادة أو تقليل صورة متجهة دون فقدان حدتها وجودتها العالية. (لا يمكن القيام بذلك مع الصور التي تم إنشاؤها بواسطة HTML5 Canvas.)

إليك نفس المربع الأحمر (الذي تم إنشاؤه سابقًا باستخدام HTML5 Canvas) هذه المرة رسم باستخدام SVG:

<svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 600 600">
  <desc>Red rectangle shape</desc>
  <rect x="10" y="10" width="100" height="100" fill="#c00"  />  
</svg>

يمكنك استخدام SVG في معظم الأشياء التي يمكنك القيام بها باستخدام Canvas، مثل رسم الأشكال والمسارات، والتدرجات، والأنماط، والتحريك، وما إلى ذلك. ومع ذلك، تعمل هاتان التقنيتان بطرق مختلفة في الأساس. على عكس الرسومات القائمة على Canvas، يحتوي SVG على DOM، وعليه يمكن لكل من CSS وJavaScript الوصول إليه. على سبيل المثال، يمكنك تغيير مظهر وشعور الرسم البياني SVG باستخدام CSS، وتحريك عقده باستخدام CSS أو JavaScript، وجعل أي جزء منه يستجيب لحدث الماوس أو لوحة المفاتيح بنفس طريقة <div>. كما سيصبح أكثر وضوحًا في الأقسام التالية، يلعب هذا الفرق دورًا كبيرًا عند الحاجة إلى اختيار بين Canvas وSVG لمشروعك التالي.

الوضعية الفورية والوضعية المحتفظ بها

من المهم تمييز بين الوضعية الفورية والوضعية المحتفظ بها. HTML5 Canvas هو مثال على الأول، وSVG على الآخر.

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

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

كونه نظام رسوميات فوري، لا يملك Canvas نموذج كائنات المستند DOM، أو Document Object Model. مع Canvas، ترسم بكسلاتك وينسى النظام عنها كل شيء، مما يقلل من الذاكرة الزائدة اللازمة للحفاظ على نموذج داخلي لرسمك. مع SVG، يتم إضافة كل كائن ترسمه إلى نموذج داخلي للمتصفح، مما يجعل حياتك كمطور أسهل بعض الشيء، لكن بتكلفة من حيث الأداء.

بناءً على التمييز بين الوضعية الفورية والمحتفظ بها، وبالإضافة إلى الخصائص المحددة لـ Canvas و SVG على التوالي، من الممكن تحديد بعض الحالات التي قد يخدمك استخدام تقنية واحدة على الأخرى بشكل أفضل في تحقيق أهداف مشروعك.

HTML5 Canvas: مواقف وعيوب

مواصفات HTML5 Canvas توصي بوضوح أن المؤلفين يجب عدم استخدام عنصر <canvas> حيثما كانت هناك وسائل أكثر ملاءمة لديهم متاحة.

على سبيل المثال، لعنصر <header> غني بالرسومات، أفضل الأدوات هي HTML و CSS، وليس <canvas> (ولا SVG أيضًا). د. أبستراكت، مبتكر ومؤسس للإطار الزمني Zim JS canvas framework، يؤكد هذا الرأي حيث يكتب:

الـ DOM وإطارات DOM جيدة في عرض المعلومات وخاصة المعلومات النصية. بالمقارنة، اللوحة الرسومية هي صورة. يمكن إضافة النص إلى اللوحة الرسومية وجعلها تتجاوب، لكن النص لا يمكن تحديده أو البحث عنه بسهولة كما في الـ DOM. الصفحات الطويلة ذات التمرير المتتابع للنص أو النص والصور هي استخدام ممتاز للـ DOM. الـ DOM رائع لمواقع التواصل الاجتماعي، المنتديات، التسوق، وجميع تطبيقات المعلومات التي اعتدنا عليها. — “متى يجب استخدام مكتبة أو إطار JavaScript للوحة الرسومية”

لذا، هذا مثال واضح على متى لا يجب استخدام <canvas>. لكن متى يكون <canvas> خيارًا جيدًا؟

هذا تغريدة سارة دراسنر تلخص بعض الإيجابيات والسلبيات الرئيسية لميزات اللوحة الرسومية وقدراتها، والتي يمكن أن تساعدنا في تحديد بعض استخدامات هذه التكنولوجيا القوية:

I had this slide in a lot of talks and workshops over the years: pic.twitter.com/4K0C7mNzg2

— Sarah Drasner (@sarah_edo) October 2, 2019

يمكنك مشاهدة الصورة من التغريدة هنا.

ما يمكن أن يكون HTML5 Canvas رائعًا له

الفين وان قام بمقارنة اللوحة الرسومية والـ SVG من حيث الأداء سواء فيما يتعلق بعدد الكائنات التي يتم رسمها أو فيما يتعلق بحجم الكائنات أو اللوحة نفسها. يعرض نتائجه على النحو التالي:

في المجمل، فإن الحد الأقصى لتقديم DOM أكثر وضوحًا عند التلاعب بمئات إن لم تكن آلاف الكائنات؛ في هذا السيناريو، يكون Canvas هو الفائز الواضح. ومع ذلك، فإن اللوحة و SVG ثابتان في أحجام الكائنات. بالنظر إلى المجموع النهائي، فإن اللوحة تقدم انتصارًا واضحًا في الأداء.

رسمًا بما نعرفه عن Canvas، وخاصة أدائه الممتاز في رسم الكثير من الكائنات، إليك بعض السيناريوهات المحتملة التي قد تكون مناسبة، وحتى مفضلة لـ SVG.

الألعاب والفن التوليدي

لـالألعاب الغزيرة بالرسومات، والألعاب التفاعلية للغاية، وكذلك لـالفن التوليدي، يكون Canvas عادةً الطريق للذهاب.

تتبع الأشعة

تتبع الأشعة هي تقنية لإنشاء رسومات ثلاثية الأبعاد.

يمكن استخدام تتبع الأشعة لتحييد صورة من خلال تتبع مسار الضوء عبر بكسل في مستوى الصورة ومحاكاة الآثار الناجمة عن لقاءاته مع الأشياء الافتراضية. … التأثيرات التي يحققها تتبع الأشعة، … تتراوح من … إنشاء صور واقعية من رسومات متجهية بسيطة إلى تطبيق مرشحات تشبه الصور الفوتوغرافية لإزالة العين الحمراء. — SVG مقابل Canvas: كيفية الاختيار، وثائق Microsoft Docs.

إذا كنت فضوليًا، هنا تطبيق أشعة في العمل من قبل مارك ويبستر.

ومع ذلك، على الرغم من أن HTML5 Canvas هو بالتأكيد أفضل مناسب للمهمة مما يمكن أن يكون SVG على الإطلاق، إلا أنه لا يتبع بالضرورة أن تتبع التتبع الضوئي هو الأفضل التنفيذ على عنصر <canvas>. في الواقع، الضغط على معالج الكمبيوتر قد يكون كبيرًا جدًا، إلى درجة أن متصفحك قد يتوقف عن الاستجابة.

رسم عدد كبير من الكائنات على سطح صغير

مثال آخر هو سيناريو حيث تحتاج التطبيق الخاص بك لرسم عدد كبير من الكائنات على سطح نسبيًا صغير – مثل تصورات البيانات غير التفاعلية في الوقت الحقيقي مثل تمثيلات الرسمية لأنماط الطقس.

الصورة أعلاه هي من هذا المقال MSDN، الذي كان جزءًا من بحثي لهذه القطعة.

استبدال البكسلات في مقاطع الفيديو

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

ما HTML5 Canvas ليس عظيمًا جدًا له

من ناحية أخرى، هناك عدد من الحالات التي قد لا يكون فيها Canvas هو الخيار الأفضل مقارنة بـ SVG.

مرونة

معظم السيناريوهات التي يكون فيها التمدد مفيدًا ستكون أكثر استجابة للاستخدام الرسومات SVG بدلاً من Canvas. الرسومات المعقدة ذات الجودة العالية مثل مخططات البناء والرسومات الهندسية، الرسومات التنظيمية، الرسومات البيولوجية، إلخ، هي أمثلة لذلك.

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

أيضًا، غالبًا ما تكون هذه الرسومات تفاعلية. فكر في خرائط المقاعد عندما تحجز تذكرة طيرانك عبر الإنترنت كمثال، مما يجعلها حالة إستخدام رائعة لنظام الرسومات المحتفظ به مثل SVG.

ومع ذلك، بمساعدة بعض المكتبات الرائعة مثل CreateJS و Zim (التي تمد CreateJS)، يمكن للمطورين دمج الأحداث الماوس بسرعة نسبية، واختبارات الضرب، وتعاملات الإصالة المتعددة، والقدرة على السحب والإفلات، والتحكم، وأكثر، في إبداعاتهم المستندة إلى Canvas.

الوصولية

على الرغم من وجود خطوات يمكنك اتخاذها لجعل رسم Canvas أكثر وصولية – ويمكن أن تكون مكتبة Canvas جيدة مثل Zim مفيدة هنا لتسريع العملية – فإن Canvas لا يتميز عندما يتعلق الأمر بالوصولية. ما ترسمه على سطح اللوحة هو مجرد مجموعة من البكسلات، والتي لا يمكن قراءتها أو تفسيرها بواسطة التقنيات المساعدة أو خوادم البحث. هذا هو مجال آخر يفضل فيه SVG: SVG هو XML، مما يجعله قابل للقراءة من قبل البشر والآلات.

لا تعتمد على JavaScript

إذا كنت لا ترغب في استخدام JavaScript في تطبيقك، فإن Canvas ليس صديقك المفضل. في الواقع، الطريقة الوحيدة للعمل مع عنصر <canvas> هي باستخدام JavaScript. على العكس، يمكنك رسم رسومات SVG باستخدام برنامج تحرير براهيمي قياسي مثل Adobe Illustrator أو Inkscape، ويمكنك استخدام CSS النقي للتحكم في مظهرها وإجراء تحريكات دون الوصول إلى المتصفح والتفاعلات الدقيقة.

الجمع بين HTML5 Canvas و SVG في سيناريوهات متقدمة

هناك حالات تكون فيها تطبيقاتك قادرة على الحصول على أفضل من كلا العالمين من خلال الجمع بين HTML5 Canvas و SVG. على سبيل المثال، يمكن للعبة تحقيق أسطر من الصور SVG التي تم إنشاؤها بواسطة برنامج تحرير براهيمي، للاستفادة من القابلية للقياس وحجم التنزيل المنخفض مقارنة بالصورة PNG. أو يمكن لبرنامج الرسم أن يكون تصميم واجهة المستخدم باستخدام SVG، مع عنصر <canvas> مضمن، والذي يمكن استخدامه للرسم.

أخيرًا، تجعل مكتبة قوية مثل Paper.js إمكانية جار البرمجة للرسومات البراهيمية على رأس HTML5 Canvas، وبالتالي تقديم طريقة مريحة للعمل مع كل من التقنيات.

الخاتمة

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

ما هو الجواب؟

يتفق Chris Coyier مع Benjamin De Cock، كما يغرد الأخير:

إجابة مبسطة للغاية هي “استخدم القماش عندما لا يمكن استخدام SVG” (حيث قد يعني “لا يمكن” تحريك آلاف الكائنات ، والتلاعب بكل بكسل بشكل فردي ، إلخ). وبعبارة أخرى ، يجب أن يكون SVG هو خيارك الافتراضي ، والقماش هو خطة الإغاثة.

— Benjamin De Cock (@bdc) October 2, 2019

يقدم الدكتور أبستراكت قائمة طويلة من الأشياء التي يكون الاستخدام للقماش هو الأفضل ، مثل الشعارات التفاعلية والإعلانات ، والرسوم البيانية التفاعلية ، وتطبيقات التعلم الإلكتروني ، وغيرها الكثير.

في رأيي ، لا توجد قواعد ثابتة وصارمة لتحديد أفضل وقت لاستخدام القماش بدلاً من SVG. الفرق بين الوضع الفوري والوضع المحتجز يشير إلى أن HTML5 Canvas هو الفائز غير المتأثر عند بناء أشياء مثل الألعاب غير المكثفة بالرسومات ، ويفضل SVG لأشياء مثل الصور المسطحة ، والرموز ، وعناصر الواجهة المستخدم. ومع ذلك ، في المنتصف هناك فرصة لتوسيع نطاق HTML5 Canvas ، خاصة بالنظر إلى ما يمكن أن تجلبه المكتبات القوية المختلفة للقماش. ليس فقط أنها تسهل العمل مع كلتا التقنيتين في نفس العمل التصويري ، بل أيضاً تجعل بعض الميزات الصعبة التنفيذ في مشروع قائم على القماش الأصلي – مثل التحكم التفاعلي والأحداث ، والاستجابة للوسائط ، وميزات الوصول ، وما إلى ذلك – قد تكون الآن في متناول أصحاب الأيدي الأكثر ، مما يتيح الباب لإمكانية إستخدامات أكثر إثارة للاهتمام لـ HTML5 Canvas.

الأسئلة الشائعة (FAQs) حول القماش مقابل SVG