Scalable Vector Graphics (SVG) عبارة عن تنسيق صورة مكتوب بلغة XML. باستخدام SVG ، يمكنك رمز رسومات ثنائية الأبعاد قابلة للتطوير. بعد ذلك ، يمكنك تنفيذها وتعديلها في CSS و JavaScript.

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

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

1. أيقونات SVG الطبية بواسطة القطط

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

حلقة الوصل

2. تحوم بواسطة SeanMcCaffery

الرسوم المتحركة العالمية التي يمكنك وضعها على أي موقع تفاعلي. إن المظهر الخفي للحدود عند المرور يجعلك تشعر بالرضا ويدعوك إلى النقر فوق الرابط.

حلقة الوصل

3. اسحب لأسفل للتحديث (طائرة ورقية) بقلم نيكولاي تالانوف

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

4. استمروا في العمل من قبل دياكو م. لطف الله

رسم SVG يوضح إمكانات Scaling Vector. حركة دقيقة وسلسة لجسم الإنسان هو التنويم.

حلقة الوصل

5. مرشحات SVG أضيفت إلى فيديو HTML5

نظر Paul Irish من فريق Google Chrome في كيفية قيام SVG بتعديل المحتوى خارج الرسومات المتجهة. لقد جمع بين CSS و SVG لعمل مرشحات بصرية مذهلة لإظهار أن الرسوم المتحركة لـ SVG يمكن أن تكون إضافة جيدة لمقطع فيديو جاهز.

حلقة الوصل

6. اللغز

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

حلقة الوصل

7. بطانة التدرج من باتريك يونغ

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

حلقة الوصل

8. دعنا نسافر عن طريق jjperezaguinaga

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

حلقة الوصل

9. الساعة محمد محبفر

رسم SVG بسيط لساعة متحركة يعرض الوقت الحالي. الحركة المهدئة للمؤشرات والتصميم البسيط تفعل العجائب لهذه الرسوم المتحركة.

حلقة الوصل

10. أيقونات متحركة بواسطة لويجي دي روزا

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

11. جميع الأجهزة في SVG بواسطة كريس غانون

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

حلقة الوصل

12. الشلال بواسطة كريس غانون

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

حلقة الوصل

13. مولد النبات بليك بوين

الآن هذا هو شيء آخر. عند النقر فوق الزر "إنشاء" ، سترى النباتات تنمو وتنمو. ولكن في كل مرة تنقر فوقها ، سوف تتشكل أنماط مختلفة.

حلقة الوصل

14. أيقونة قابلة للنقر بواسطة هاميش ويليامز

SVG تفاعلية أخرى تقوم بتشغيل الرسوم المتحركة بمجرد النقر عليها. سيبدأ هذا الرسم المتحرك "إرسال" بمجرد النقر فوقه.

حلقة الوصل

15. نيو كيك بواسطة ماركو بريا

الرسوم المتحركة المثيرة للاهتمام التي تظهر صنع طبقة كعكة طبقة. إنه رسم SVG مثير للإعجاب ومناسب لبطاقة عيد الميلاد.

16. تمزيق الورق من كريس غانون

إذا كنت تستمتع بمشاهدة تمزيق الورق ، فستستمتع بهذه الرسوم المتحركة التي تصور ورقة تمزيق الورق في أوقات غير محدودة من الورق في تسلسل سلس.

حلقة الوصل

17. انخفاض PolyLion بواسطة GRAYGHOST

هذا رسم توضيحي مثير للعقل ويظهر رأس أسد يظهر ويختفي في شكل مضلعات متحركة.

حلقة الوصل

18. الساعة الرملية لودر بواسطة ليلا

حركة أخرى فعالة تستخدم SVG فقط. كل 5 ثوانٍ ، سوف تنقلب الساعة الرملية رأسًا على عقب وتبدأ دورة جديدة.

حلقة الوصل

19. البقرة المستجيبة بواسطة سارة دراسينر

هذه رسوم متحركة تفاعلية مضحكة تتيح لك النقر فوق بقرة وسحبها حول القمر بينما ينظر إليها رائد فضاء حير.

20. طالب من قبل دوماني

طالب متحمس يبدو مستعدا للتعلم! إنها رسوم متحركة رائعة حيث تتحول صفحات الكتب بدقة. لا وميض من الطالب ، ولكن هذا لا يزال الرسوم المتحركة مرتبة تماما لإبرام هذه القائمة.

حلقة الوصل

دورك

ما هي رسوم متحركة SVG المفضلة لديك غير المدرجة في هذه القائمة؟ مشاركة اللقطات الخاصة بك في التعليقات أدناه!