تعد SVG و canvas بمثابة تقنيات يمكنك استخدامها لرسم شيء ما على صفحات الويب. لذلك ، ينبغي مقارنتها وفهمها عند استخدام SVG ، ومتى يجب استخدام قماش. حتى الفهم السطحي للغاية لجوهر هذه التقنيات يتيح لك اتخاذ قرار مستنير للغاية. في الواقع ، إليك حالتان نموذجيتان ، في أحدهما يجب عليك تفضيل SVG ، وفي الحالة الأخرى - قماش:
- تحتاج إلى رسم رمز صغير؟ هذا هو بالتأكيد إقليم SVG.
- هل تحتاج إلى إنشاء لعبة متصفح تفاعلية؟ هنا ، بالتأكيد ، نحن بحاجة إلى تكنولوجيا قماش.
يقول مؤلف المقال ، الذي ننشره اليوم ، إنه يعرف أنه لم يكشف بعد عن أسباب هذا الاختيار. لكنه يأمل أن تصبح هذه الأسباب واضحة تمامًا بعد مشاركة بعض التفاصيل حول SVG و canvas.
SVG - الرسومات المتجهة الموصوفة بالتعريف
إذا كنت تعلم أنك بحاجة إلى وضع صورة متجهة على صفحة ويب ، فإن هذا يعني أن SVG مناسب لك. عادة ما تبدو الصور المتجهات أفضل من الصور النقطية المماثلة المخزنة ، على سبيل المثال ، في ملفات JPG. بالإضافة إلى ذلك ، تكون ملفات الصور المتجهة عادة أصغر من ملفات الصور النقطية.
والنتيجة هي أن SVG يستخدم غالبًا لرسم
الشعارات . يمكن تضمين كود يصف هذه الصور مباشرة في HTML. يبدو وكأنه مجموعة من التعليمات التصريحية:
<svg viewBox="0 0 100 100"> <circle cx="50" cy="50" r="50" /> </svg>
إذا كنت بحاجة إلى صور تتسم بالمرونة والاستجابة ، فإن SVG هو اختيارك.
Canvas - JavaScript API للرسم
لإنشاء صور قماشية في كود HTML للصفحة ، ضع
<canvas> ، وبعد ذلك ، باستخدام JavaScript ، "يرسمون" على هذا العنصر. بمعنى آخر ، يعطي المبرمج تعليمات المتصفح بشأن كيفية احتياجه لرسم شيء ما (هذا النهج أقرب إلى الضرورة منه إلى التصريح). إليك ما يبدو عليه:
<canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var centerX = canvas.width / 2; var centerY = canvas.height / 2; var radius = 70; context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.fillStyle = 'green'; context.fill(); </script>
يتم تخزين صور SVG في DOM
إذا كنت على دراية بأحداث DOM ، مثل
click و
mouseDown ،
mouseDown على أن هذه الأحداث يمكن استخدامها أيضًا عند العمل مع SVG. في هذا الصدد ، لا يختلف عنصر SVG
<circle> عنصر HTML
<div> .
<svg viewBox="0 0 100 100"> <circle cx="50" cy="50" r="50" /> <script> document.querySelector('circle').addEventListener('click', e => { e.target.style.fill = "red"; }); </script> </svg>
يعد SVG أفضل لجعل محتوى الصفحة متاحًا
يمكن تعيين عنصر قماش بديل النص الخاص به:
<canvas aria-label="Hello ARIA World" role="img"></canvas>
يمكن القيام بنفس الشيء لعنصر SVG. ولكن نظرًا لأن صور SVG وآلياتها الداخلية يتم تخزينها مباشرة في DOM ، فإن SVG عادة ما تُعتبر تقنية تُستخدم في الحالات التي تنشئ فيها مشاريع يمكن للأشخاص ذوي الإعاقة الوصول إليها.
بمعنى آخر ، يمكنك إنشاء صورة SVG ، مع عناصر يمكن للتقنيات المساعدة أن تساعد مستخدميها في تصفح صفحات الويب.
البيانات النصية التي تعد جزءًا من الصور هي الحالة أيضًا عندما يكون من الأفضل استخدام SVG. يحتوي SVG على عنصر خاص -
<text> . يسمح لك بعرض حروف واضحة للنصوص ، يتم إدراكها بواسطة
التكنولوجيا المساعدة . إذا كنت تستخدم عنصر canvas لتصور النصوص ، فغالبًا ما يتم عرض هذه النصوص بشكل
سيئ وتبدو غير واضحة.
قماش هو أفضل للعمل مع الصور بكسل الفردية
في ما يلي ، نقدم العديد من الجداول التي تم تجميعها على أساس مقارنة SVG و canvas من قبل العديد من الخبراء. في واحدة من هذه المقارنة ، التي تؤديها سارة درازنر ، يقال أنه باستخدام قماش يمكنك جعل بكسل الرقص. هذه ، بالطبع ، مزحة ، ولكن ، في جوهرها ، ما هي عليه.
تعتبر اللوحة Canvas رائعة لإنشاء صور تفاعلية تحتوي على الكثير من التفاصيل المعقدة ، وتحولات الألوان المتدرجة والمزيد. لهذا السبب ، يتم استخدام canvas في تطوير عدد أكبر بكثير من ألعاب المتصفح من SVG. بالرغم من ذلك ، بالطبع ، يمكنك دائمًا أن تجد انحرافات عن الاتجاهات العامة.
هنا ، على سبيل المثال ، هي لعبة يتم إنشاء رسوماتها باستخدام أدوات SVG.
لعبة SVGيرجى ملاحظة أن مكونها البياني بسيط للغاية ويبدو "متجهًا" تمامًا.
يمكن أن تتأثر صور CSS باستخدام CSS
قلنا بالفعل أن عناصر SVG مخزنة في DOM ، ويمكن الحصول على الوصول إلى هذه العناصر من كود JavaScript. في حالة CSS ، تكرر هذه القصة نفسها:
<svg viewBox="0 0 100 100"> <circle cx="50" cy="50" r="50" /> <style> circle { fill: blue; } </style> </svg>
يرجى ملاحظة أنه في الأمثلة ، يتم وضع الكتل
<script> و
<style> داخل الكتلة
<svg> . هذا طبيعي تماما. ولكن مع الأخذ في الاعتبار حقيقة أن عنصر SVG موجود في تعليمات HTML البرمجية البسيطة ، اتضح أنه يمكن إزالة كتل
<script> و
<style> بالكامل منه. بالإضافة إلى ذلك ، إذا لزم الأمر ، يمكنك العمل على عنصر SVG باستخدام الأنماط والبرامج النصية الخارجية.
فيما يلي الكثير من المواد حول خصائص عناصر SVG و CSS. الشيء الأكثر أهمية هنا هو أن كل ما يمكن القيام به مع عناصر الصفحة باستخدام CSS ينطبق على SVG. على سبيل المثال ، يستخدم هذا
:hover pseudo-
:hover و عناصر موحية.
إليك مثال على تنشيط عنصر
<circle> باستخدام CSS.
<svg viewBox="0 0 100 100"> <circle cx="50" cy="50" r="50" /> <style> circle { fill: blue; animation: pulse 2s alternate infinite; } @keyframes pulse { 100% { r: 30; } } </style> <script> document.querySelector('circle').addEventListener('click', e => { e.target.style.fill = "red"; }); </script> </svg>
الرسوم المتحركة عنصر CSS باستخدام CSSمزيج من SVG والقماش
من الناحية الفنية ، لا يمكن تسمية تقنيات Canvas و SVG بشكل متبادل. على سبيل المثال ، يمكن عرض صور SVG في عناصر
<canvas> . في الوقت نفسه ، كما يتضح في
هذا المثال ، يمكن أن تظل صور SVG المعروضة في عنصر
<canvas> واضحة جدًا وذات جودة عالية.
إخراج صورة SVG إلى عنصر <canvas>الآن دعونا نلقي نظرة على بعض الجداول التي تلخص المقارنات بين SVG والقماش الذي أعده خبراء مختلفون.
مقارنة SVG والقماش
روث جون
هنا هو المشروع الذي تم بناء الجدول التالي على أساسه.
سارة دراسنر
يعتمد الجدول التالي على
هذه التغريدة.
ir شيرلي وو
يعتمد الجدول التالي على
هذه التغريدة.
يعتقد الكثير من الناس أن القماش أفضل للعمل مع عدد كبير من الكائنات (وفقًا لشيرلي - عندما يكون هناك أكثر من 1000).
SVG هو الخيار القياسي. قماش هو تراجع
فيما يلي الإجابة على تغريدة حول خيارات استخدام SVG وقماش. يقول مؤلف هذه الإجابة أن الاختيار بين SVG و canvas يجب أن يتم مثل هذا: "استخدم canvas عندما لا تستطيع استخدام SVG." من بين المواقف التي يتعذر فيها استخدام SVG بشكل طبيعي ، يمكننا أن نذكر تلك التي تحتاج فيها إلى تحريك الآلاف من الكائنات ، والعمل مع كل بكسل محدد في الصورة ، وما إلى ذلك.
النتائج
في بداية هذه المقالة ، قدمنا استخدامين نموذجيين لـ SVG و canvas. سنعود إليهم ونوسع أوصافهم مع مراعاة ما تعلمناه للتو.
- تحتاج إلى رسم رمز صغير؟ هذا هو بالتأكيد إقليم SVG. والحقيقة هي أن وصف صورة SVG يتم تخزينه في DOM ، نتيجة لـ SVG يعتبر رائعًا لرسم ما يشبه الأيقونة على زر. وغني عن القول ، يمكن أن تتأثر صور SVG بـ CSS ، وباستخدام JavaScript ، يمكنك توصيل معالجات الأحداث بعناصرها.
- هل تحتاج إلى إنشاء لعبة متصفح تفاعلية؟ هنا ، بالتأكيد ، نحن بحاجة إلى تكنولوجيا قماش. بالتأكيد ، ستحتوي لعبة المتصفح على العديد من العناصر المتحركة والرسوم المتحركة المعقدة. سوف تتفاعل عناصر عالم اللعبة مع بعضها البعض ، مما يعني بعض متطلبات الأداء. قماش كبيرة لحل مثل هذه المشاكل.
تجدر الإشارة إلى أنه بين هذين الخيارين المتطرفين هناك منطقة متوسطة كبيرة. على سبيل المثال ، كمطور ومصمم ويب ، أعتقد أن SVG أكثر ملاءمة من الناحية العملية. لا أعرف حتى إذا كنت سأقوم بمشروع حقيقي باستخدام قماش. ربما يكون هذا جزئيًا لأنني لست معتادًا على قماش الرسم بشكل كافٍ. وأنا معتاد على SVG جيدًا. لقد درست هذه التكنولوجيا ، وكتب
كتابا عن ذلك. كنتيجة لذلك ، أنا أعرف معلومات كافية عن SVG حتى تتمكن هذه التكنولوجيا من مساعدتي في القيام بما أحتاج إليه.
أعزائي القراء! في أي المواقف تستخدم SVG وفي أي قماش؟
