فوائد استخدام Scalable Vector Graphics
تلعب Vector Graphics أو SVG دورًا مهمًا في تصميم مواقع الويب اليوم. إذا كنت لا تستخدم حاليا SVG في أعمال التصميم الويب الخاص بك، وهنا بعض الأسباب لماذا يجب أن تبدأ في فعل ذلك، وكذلك fallbacks يمكنك استخدامها للالمتصفحات القديمة التي لا تدعم هذه الملفات.
القرار
أكبر فائدة لـ SVG هي استقلالية القرار. نظرًا لأن ملفات SVG هي عبارة عن رسومات متجهة بدلاً من الصور النقطية المستندة إلى وحدات البكسل ، يمكن تغيير حجمها دون فقد أي جودة للصورة. هذا مفيد بشكل خاص عندما تقوم بإنشاء مواقع ويب سريعة الاستجابة تحتاج إلى مظهر جيد وتعمل بشكل جيد عبر مجموعة كبيرة من أحجام الشاشة والأجهزة .
يمكن زيادة حجم ملفات SVG لأعلى أو لأسفل لاستيعاب تغيير حجم وتخطيط احتياجات موقع الويب سريع الاستجابة ، ولا داعي للقلق بشأن تلك الرسومات التي قد تؤثر على الجودة في أي خطوة على الطريق.
حجم الملف
تتمثل إحدى التحديات في استخدام الصور النقطية (JPG و PNG و GIF) على مواقع الويب المتجاوبة في حجم ملف تلك الصور. نظرًا لأن الصور النقطية لا تعمل على قياس الطريقة التي تعمل بها الصور النقطية ، فإنك تحتاج إلى توصيل الصور التي تستند إلى وحدات البكسل بأكبر حجم يتم عرضه به. هذا لأنك دائمًا ما تجعل الصورة أصغر وتحتفظ بجودتها ، لكن الشيء نفسه ليس صحيحًا في جعل الصور أكبر. والنتيجة النهائية هي أن لديك في الغالب صورًا أكبر بكثير مما يتم عرضه على شاشة الشخص ، مما يعني أنه يضطر إلى تنزيل ملف كبير جدًا دون داع.
يعالج SVG هذا التحدي. نظرًا لأن الرسومات المتجهة قابلة للقياس ، يمكنك الحصول على أحجام ملفات صغيرة جدًا بغض النظر عن حجم الصور التي قد تحتاج إلى عرضها. سيكون لهذا تأثيرًا إيجابيًا في نهاية المطاف على الأداء الكلي وسرعة التنزيل للموقع.
تصميم CSS
يمكن أيضًا إضافة شفرة SVG مباشرة إلى HTML الخاص بالصفحة. هذا هو المعروف باسم "SVG المضمنة." واحدة من فوائد استخدام مضمنة SVG هو أنه منذ الرسومات يتم رسمها في الواقع من قبل المتصفح على أساس التعليمات البرمجية، ليست هناك حاجة لتقديم طلب HTTP لجلب ملف صورة. فائدة أخرى هي أن SVG المضمنة يمكن تصميمها باستخدام CSS.
هل تحتاج إلى تغيير لون رمز SVG؟ بدلاً من الحاجة إلى فتح هذه الصورة في نوع معين من برامج التحرير وتصدير الملف وتحميله مرة أخرى ، يمكنك ببساطة تغيير ملف SVG ببضع سطور من CSS.
يمكنك أيضًا استخدام أنماط CSS الأخرى على رسومات SVG لتغييرها في حالات التمرير أو لاحتياجات تصميم معينة. يمكنك حتى تحريك هذه الرسومات لإضافة بعض الحركة والتفاعل إلى صفحة.
الرسوم المتحركة
نظرًا لأنه يمكن تنسيق ملفات SVG المضمنة باستخدام CSS ، يمكنك استخدام الرسوم المتحركة بتنسيق CSS عليها أيضًا. تعد تحويلات CSS وانتقالاتها طريقتين سهلتين لإضافة بعض الحياة إلى ملفات SVG. يمكنك الحصول على تجارب شبيهة بالفلاش على الصفحة دون الخضوع للجوانب السلبية التي تأتي مع استخدام Flash على مواقع الويب اليوم.
استخدامات SVG
لا يمكن لهذه الرسومات ، مثلها مثل SVG ، أن تحل محل كل أشكال الصور الأخرى التي تستخدمها على موقعك الإلكتروني. ستظل الصور التي تتطلب عمقًا عميقًا في الألوان بحاجة إلى JPG أو ربما ملف PNG ، ولكن الصور البسيطة مثل الرموز تكون مناسبة تمامًا ليتم تنفيذها كـ SVG.
يمكن أن يكون SVG أيضًا مناسبًا لمزيد من الرسوم التوضيحية المعقدة ، مثل شعارات الشركة أو الرسوم البيانية والرسوم البيانية. ستستفيد جميع الرسومات من قابلية التوسع ، وقادرة على التصميم باستخدام CSS ، والمميزات الأخرى المذكورة في هذه المقالة.
دعم المتصفحات القديمة
الدعم الحالي لـ SVG جيد جدًا في متصفحات الويب الحديثة. المتصفحات الوحيدة التي تفتقر إلى دعم هذه الرسومات هي الإصدارات الأقدم من Internet Explorer (الإصدار 8 والإصدارات الأقل) وبعض الإصدارات القديمة من Android. وبشكل عام ، لا تزال نسبة صغيرة جدًا من السكان المستعرضين تستخدم هذه المتصفحات ، ويستمر هذا العدد في التقلص. هذا يعني أنه يمكن استخدام SVG بأمان على مواقع الويب اليوم.
إذا كنت تريد توفير ميزة احتياطية لـ SVG ، فيمكنك استخدام أداة مثل Grumpicon من Filament Group. سيأخذ هذا المورد ملفات صور SVG وينشئ خرق PNG للمتصفحات القديمة.
حرره جيريمي جيرارد في 1/27/17