لماذا يجب عليك استخدام صور SVG: كيفية تحريك صور SVG وجعلها فائقة السرعة

لماذا نستخدم SVG؟

ينمو قطاع تطوير الويب بوتيرة سريعة ، وأصبحت صور SVG (الرسومات المتجهة القابلة للتطوير) أكثر شيوعًا. كصور متجهة ، تتكون SVGs من معادلات رياضية تحدد موضع ولون الخطوط والمنحنيات التي تشكل أشكال الرسوم والنصوص بتنسيق XML. تُستخدم صور SVG للأيقونات والشعارات وتصميمات الرسوم والخطوط.

يعد استخدام SVGs خيارًا سهلاً بمجرد التفكير في المزايا التي تقدمها. بالنسبة للعميل ، تحصل على جودة رائعة على أي جهاز. بالنسبة لنا كمطورين ، هناك المزيد من الأسباب لاستخدام SVG.

دعنا نناقش بعض فوائد SVG الآن.

1. تنسيق قائم على النص

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

2. قابلية التوسع

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

قابلية التوسع

3. أداء عالي

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

4. حجم ملف صغير

يتم تحديد حجم ملفات SVG البسيطة من خلال الألوان والطبقات والتدرجات والتأثيرات والأقنعة التي تحتوي عليها. يتم تحديد حجم ملف PNG أو أي ملف رسومات نقطية آخر بعدد وحدات البكسل التي يتكون منها. كلما كانت صورة PNG أكبر ، زاد حجمها. هذا ليس هو الحال بالنسبة لأيقونات SVG. أيضًا ، يمكن تحسين SVGs ، وسأشرح كيف ذلك لاحقًا في هذه المقالة.

حجم ملف SVG

5. العديد من فرص التحرير والتحريك

على عكس الصور النقطية ، يمكن تحرير الصور المتجهة في كل من برامج الرسم المتجه الخاصة ومباشرة في محرر النصوص. يمكنك أيضًا تحرير ألوان أو أحجام رموز SVG مباشرةً عبر CSS. أما بالنسبة لتحريك SVGs ، فيمكن إجراؤه بمساعدة SMIL أو Web Animations API أو WebGL أو CSS animation. قم بالتمرير لأسفل لمعرفة المزيد حول الرسوم المتحركة لـ CSS لصور SVG.

6. التكامل مع HTML و XHTML و CSS

تم تصميم SVG "للتكامل مع تقنيات منصات الويب المفتوحة البارزة الأخرى وتوسيع نطاقها ، مثل X / HTML و CSS و Javascript" ، وفقًا لـ W3C. لذلك ، على عكس تنسيقات الصور المختلفة ، يمكن دمج هذا التنسيق بسهولة مع المستندات والتقنيات الأخرى.

7. دعم نموذج كائن المستند W3C

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

ما هي مضايقات SVG؟

العدد الكبير للأجزاء الصغيرة يجعل استخدام تنسيق SVG غير منطقي. كلما زاد عدد الأجزاء التي تتكون منها الصورة ، زاد حجمها.

على سبيل المثال ، إليك خريطتا SVG للولايات المتحدة. الثانية أكثر تفصيلاً قليلاً من الأولى. لكن المستوى الأعلى من التفاصيل يكلف ما يقرب من خمسة أضعاف حجم الملف - 33 كيلوبايت مقارنة بـ 147 كيلوبايت. إذا لم تكن هذه الخريطة أحادية اللون ، فستكون الزيادة أكبر بكثير.

خرائط SVG

إذا كانت الصورة خطية وتحتوي على ألوان قليلة - يعد SVG حلاً. ومع ذلك ، إذا كانت التفاصيل مهمة وكان هناك الكثير منها ، فقد تكون PNG أو JPEG أكثر ملاءمة.

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

كيفية تحسين صور SVG

عند تقديم تنسيق متجه ، يتعين علينا كتابة بعض رموز SVG الإضافية. يجب تحسين النتيجة النهائية باستخدام خدمات مختلفة. في أغلب الأحيان ، من أجل تحسين SVG ، أستخدم أداة Node.js SVGO. إنه سهل الاستخدام ولا داعي لتحميل الصور على مواقع أخرى.

مثال على تحسين SVG باستخدام SVGO

كيفية تحريك SVG

يمكن تحريك رسومات SVG على الويب بعدة طرق:

  1. SMIL ، وهي مواصفات الرسوم المتحركة الأصلية لـ SVG
  2. واجهة برمجة تطبيقات Web Animations ، وهي واجهة برمجة تطبيقات JavaScript أصلية تتيح لك إنشاء رسوم متحركة متسلسلة أكثر تعقيدًا دون تحميل أي برامج نصية خارجية
  3. WebGL
  4. الرسوم المتحركة CSS

دعونا ننظر في آخر واحد.

تُستخدم الرسوم المتحركة لـ CSS لتجنب إثقال خدمتك بالمكتبات الكبيرة لتحريك الرموز وأدوات التحميل.

لمشاهدة مثال SVG ، تحقق من صفار الرسوم المتحركة ، الذي تم رسم التصميم الرسومي له في البداية في Sketch.

SVG gif

كما ترى هنا ، أستخدم بنية Keyframe Animation للرسوم المتحركة. يتم تنفيذه عن طريق تحديد الموضع الأولي لعنصر عن طريق المعرف (0٪) والانتقال (50٪) والموضع النهائي (100٪). لتحقيق حركة سلسة ، تكون القيم الأولية والنهائية متساوية.

فيما يلي بعض فوائد استخدام نهج CSS في رسوم SVG المتحركة:

  1. أنت لا تحتاج إلى مكتبة خارجية.
  2. تسمح لك المعالجات الأولية (مثل Sass أو أقل) بإنشاء متغيرات.
  3. يمكنك استخدام onAnimationEnd وبعض روابط الرسوم المتحركة الأخرى مع JavaScript الأصلي.
  4. هذا الأسلوب سهل الاستخدام لتطوير تصميم الويب سريع الاستجابة لأنه يمكنك تعديل الرسوم المتحركة باستخدام استعلامات الوسائط.

و سلبيات استخدام CSS الرسوم المتحركة هي ما يلي:

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

فمثلا

ومع ذلك ، يمكننا عمل بعض المشاريع المثيرة للاهتمام بمساعدة الرسوم المتحركة البسيطة والبسيطة من CSS. على سبيل المثال ، لقد قمت بإنشاء فيديو لعبة بسيط باستخدام HTML و CSS وقليلًا من JavaScript. تم رسم جميع SVGs في Sketch. الهدف من هذه اللعبة هو إنقاذ الأميرة. في أي حالة ، فقط انقر فوق. يمكنك العثور على المشروع في جيثب الخاص بي.

للختام

تعد SVGs تنسيقًا رائعًا للصور. فهي قابلة للتطوير وخفيفة الوزن وقائمة على النصوص وفعالة. من السهل تعديلها وتحريكها ودمجها. الأهم من ذلك ، أنها مدعومة من قبل أي متصفح تقريبًا باستثناء Internet Explorer 8 و Android 2.3.

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

هل لديك فكرة لمشروع برمجي؟

شركتي KeenEthics عبارة عن فريق من مطوري تطبيقات الويب ذوي الخبرة. إذا كنت بحاجة إلى تقدير مجاني لمشروع مماثل ، فلا تتردد في الاتصال بنا .

يمكنك قراءة المزيد من المقالات المماثلة على مدونة Keen الخاصة بي. اسمح لي أن أقترح عليك قراءة قيمة اختبار المستخدم أو 7 حالات يجب ألا تستخدم فيها Docker.

ملاحظة

كما أود أن أقول "شكراً" لمرينا يانول على مشاركتها في تأليف هذا المقال وكذلك للقراء على إنجازه حتى النهاية!

يمكن العثور على المقالة الأصلية المنشورة على مدونة KeenEthics هنا: منظور جديد حول لماذا ومتى وكيفية استخدام SVG.