Scalable Vector Graphics ، أو SVG ، تلعب دورًا مهمًا في تصميم مواقع الويب اليوم. إذا كنت لا تستخدم SVG حاليًا في أعمال تصميم الويب الخاصة بك ، فإليك بعض الأسباب التي تجعلك تبدأ في القيام بذلك ، بالإضافة إلى العناصر الاحتياطية التي يمكنك استخدامها للمتصفحات القديمة التي لا تدعم هذه الملفات.
القرار
أكبر فائدة من SVG هي استقلالية القرار. نظرًا لأن ملفات SVG عبارة عن رسومات متجهة (على عكس الصور النقطية القائمة على البكسل) ، يمكنك تغيير حجمها دون فقد جودة الصورة. يكون هذا مفيدًا بشكل خاص عند إنشاء مواقع ويب سريعة الاستجابة يجب أن تبدو جيدة وتعمل بشكل جيد عبر مجموعة كبيرة من أحجام الشاشات والأجهزة.يمكنك توسيع نطاق ملفات SVG لأعلى أو لأسفل لاستيعاب الحجم المتغير واحتياجات التخطيط لموقع الويب المتجاوب الخاص بك دون المساس بجودتها بأي شكل من الأشكال.
بشكل عام ، تتمتع صور SVG بمظهر أكثر سلاسة ووضوحًا من الصور ذات التنسيقات الأخرى ، بغض النظر عن الحجم.
حجم الملف
أحد التحديات التي تواجه استخدام الصور النقطية (مثل-j.webp
على النقيض من ذلك ، فإن الرسومات المتجهة قابلة للتطوير ، لذا يمكنك استخدام أحجام ملفات صغيرة جدًا بغض النظر عن الحجم الذي قد تحتاج إلى عرض هذه الصور. يؤدي هذا في النهاية إلى تحسين الأداء العام للموقع وسرعة التنزيل.
نمط CSS
يمكنك بسهولة إضافة SVG مباشرة إلى HTML للصفحة. يُعرف هذا باسم SVG المضمّن. تتمثل إحدى فوائد استخدام SVG المضمّن في أنه نظرًا لأن الرسومات يتم رسمها بالفعل بواسطة المتصفح ، فلا داعي لطلب HTTP لجلب ملف صورة.
فائدة أخرى: يمكنك تصميم SVG المضمن باستخدام CSS. هل تحتاج إلى تغيير لون رمز SVG؟ بدلاً من تحرير تلك الصورة في برنامج تحرير الرسومات ثم تصدير الملف وتحميله مرة أخرى ، يمكنك تغيير ملف SVG ببساطة ببضعة أسطر من CSS. يمكنك استخدام CSS لتغيير SVG لحالات التمرير واحتياجات التصميم الأخرى أيضًا.
الخط السفلي
نظرًا لأنه يمكنك نمط ملفات SVG المضمنة باستخدام CSS ، يمكنك استخدام الرسوم المتحركة CSS عليها أيضًا. تعد عمليات التحويل والانتقالات في CSS طريقتين سهلتين لإضافة بعض الحياة إلى SVGs. يمكنك الحصول على تجارب ثرية شبيهة بـ Flash على الصفحة دون استخدام Flash - الذي لم يعد iPad يدعمه. في الواقع ، تعمل Adobe على التخلص التدريجي من Flash بحلول نهاية عام 2020.
استخدامات SVG
بقوة SVGs ، لا يمكنها استبدال كل تنسيق صورة آخر. يجب أن تكون الصور التي تتطلب عمق ألوان غني بتنسيق-j.webp
SVG مناسب أيضًا لبعض الرسوم التوضيحية المعقدة ، مثل الرسوم البيانية والمخططات وشعارات الشركة. تستفيد كل هذه الرسومات من كونها قابلة للتطوير ويمكن تصميمها باستخدام CSS.
دعم المتصفحات القديمة
الدعم الحالي لـ SVG جيد جدًا في متصفحات الويب الحديثة. المتصفحات الوحيدة التي تفتقر إلى دعم هذه الرسومات هي الإصدارات القديمة من Internet Explorer (التي لم تعد Microsoft تدعمها) وبعض الإصدارات القديمة من Android. بشكل عام ، لا تزال نسبة صغيرة جدًا من مستخدمي التصفح تستخدم هذه المتصفحات ، ويستمر هذا العدد في التقلص. هذا يعني أنه يمكنك استخدام SVG على موقع الويب الخاص بك دون قلق.
إذا كنت تريد توفير احتياطي لـ SVG ، فاستخدم أداة مثل Grumpicon من Filament Group. ينشئ هذا المورد PNGs من ملفات صور SVG.
