Scalable Vector Graphics (SVG) عبارة عن تنسيق صورة مكتوب بلغة XML. باستخدام SVG ، يمكنك رمز رسومات ثنائية الأبعاد قابلة للتطوير. بعد ذلك ، يمكنك تنفيذها وتعديلها في CSS و JavaScript.
يسمح SVG بثلاثة أنواع من الرسومات: الأشكال المتجهة (الخطوط المستقيمة والمنحنية في جميع الاتجاهات والأشكال) والصور والنص. بسبب إمكانياتها المتنوعة ، يلجأ مصممو الويب إلى SVG لعمل رسوم متحركة معقدة. إنها سهلة التثبيت ، ولا تفقد الجودة عند تغيير حجمها ولا تتطلب تشغيل أي تطبيقات تابعة لجهات أخرى.
نظرًا لأن الرسوم المتحركة لا تزال تزداد شعبية ، فإن معظمهم ليسوا على دراية بها. ستسلط هذه المقالة الضوء على 20 رسمًا رائعًا لـ SVG تعرض إمكانات هذا التنسيق.
1. أيقونات SVG الطبية بواسطة القطط
روابط سريعة
- 1. أيقونات SVG الطبية بواسطة القطط
- 2. تحوم بواسطة SeanMcCaffery
- 3. اسحب لأسفل للتحديث (طائرة ورقية) بقلم نيكولاي تالانوف
- 4. استمر فقط من قبل دياكو م. لطف الله
- 5. مرشحات SVG أضيفت إلى فيديو HTML5
- 6. اللغز
- 7. بطانة التدرج من قبل باتريك يونغ
- 8. دعنا نسافر عن طريق jjperezaguinaga
- 9. الساعة محمد محبفر
- 10. أيقونات متحركة لويجي دي روزا
- 11. جميع الأجهزة في SVG من كريس غانون
- 12. الشلال بواسطة كريس غانون
- 13. مولد النبات بليك بوين
- 14. أيقونة قابلة للنقر بواسطة هاميش ويليامز
- 15. نيو كيك ماركو بريا
- 16. تمزيق الورق من كريس غانون
- 17. انخفاض PolyLion بواسطة GRAYGHOST
- 18. الساعة الرملية لودر بواسطة ليلا
- 19. استجابة البقرة بواسطة سارة دراسنر
- 20. طالب من قبل دوماني
- دورك
تعد هذه الرسوم المتحركة الدافئة والناعمة مثالية لأي موقع ويب يتعلق بالصحة. أثناء سرد المواضيع المختلفة ، ستظهر الصور بمهارة. سوف تصنع سيارة الإسعاف أو الذرة ، وسوف تفتح العين ، وسوف يقفز الطبيب. تظهر هذه الرسوم المتحركة كل المتعة والديناميكية لـ 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 المفضلة لديك غير المدرجة في هذه القائمة؟ مشاركة اللقطات الخاصة بك في التعليقات أدناه!
