SVG vs PNG لرسومات الويب: متى يجب استخدام كل تنسيق

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

SVG (Scalable Vector Graphics) هو تنسيق متجه يعتمد على XML. بدلاً من تخزين بيانات البكسل، فإنه يصف الأشكال والمسارات والنص باستخدام الإحداثيات الرياضية. ملف SVG هو في الأساس رمز - يمكنك فتحه في محرر نصوص وقراءة الإرشادات التي تخبر المتصفح بكيفية رسم الصورة.

يمكن تصميم ملفات SVG باستخدام CSS ومعالجتها باستخدام JavaScript. يمكنك تغيير الألوان عند التمرير، وتحريك العناصر الفردية، وجعل ملفات SVG سريعة الاستجابة عن طريق ضبط سمات viewBox. بالنسبة للرسومات البسيطة مثل الشعارات والأيقونات، عادةً ما يتراوح حجم ملفات SVG من 1 إلى 5 كيلوبايت.

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

تتفوق PNG في إعادة إنتاج الصور المعقدة: لقطات الشاشة، والصور الفوتوغرافية ذات الشفافية، والأنسجة التفصيلية، والتدرجات اللونية الناعمة. ومع ذلك، نظرًا لأنه يخزن كل بكسل، يمكن أن تكون ملفات PNG كبيرة الحجم. يمكن أن يتجاوز حجم لقطة الشاشة بدقة 4K بتنسيق PNG 5 ميغابايت بسهولة.

بالنسبة لشعار الشركة النموذجي، قد يكون حجم إصدار SVG من 2 إلى 5 كيلو بايت. نفس الشعار الذي تم تصديره بتنسيق PNG بدقة 2x لشاشات شبكية العين يمكن أن يتراوح حجمه بسهولة بين 30 و80 كيلو بايت. هذا هو الفرق 10-15x.

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

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

هذه هي الميزة المميزة لـ SVG. يبدو SVG مثاليًا للبيكسل سواء تم عرضه بعرض 32 بكسل أو 3200 بكسل. لا يوجد مفهوم للدقة، حيث يقوم المتصفح بإعادة رسم مسارات المتجهات بأي حجم مطلوب.

وهذا مهم على الشاشات التي تتراوح من 72 نقطة لكل بوصة لشاشات سطح المكتب إلى 460+ نقطة لكل بوصة للهواتف. يغطي ملف SVG واحد كل جهاز. واحد PNG لا.

تحتوي PNG على شبكة بكسلات ثابتة. قم بعرض صورة PNG بحجم 200 × 200 وبدقة 400 × 400 بكسل (وهو ما يحدث على شاشات Retina)، ويقوم المتصفح بإقحام الصورة، مما يجعل الصورة تبدو ناعمة أو ضبابية. الحل البديل هو تصدير ملفات PNG بدقة 2x أو 3x، ولكن هذا يزيد من حجم الملف بشكل متناسب - يمكن أن تكون مجموعة الرموز 3x أكبر 9 مرات.

PNG هو الاختيار الصحيح عندما تكون الصورة فوتوغرافية أو معقدة من الناحية الفوتوغرافية. لقطات الشاشة، وصور المنتجات ذات الشفافية، والأنسجة المعقدة، والصور التي تحتوي على آلاف الألوان والتدرجات الدقيقة - كل ذلك ينتمي إلى التنسيقات النقطية.

تفوز PNG أيضًا بفن البكسل والصور حيث يكون كل بكسل مهمًا بحجم معين. يتم تقديم الصور المتحركة للعبة، وتفاصيل الأيقونة المفضلة بحجم 16 × 16، والصور التي يحتاج فيها سلوك مكافحة التعرج إلى تحكم دقيق، بشكل أفضل كصور PNG.

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

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

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

بالنسبة لقارئات الشاشة، قم بتضمين ملفات SVG مع ملفات مناسبة role و aria-label توفر السمات إمكانية وصول أفضل من الصور النقطية. صور PNG تعتمد كليا على بديل سمة إمكانية الوصول.

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

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

لإجراء تغييرات سريعة على التنسيق دون تثبيت أي برنامج، iformat.io يتعامل مع كلا التحويلين مباشرة في متصفحك. التحميل والتحويل والتنزيل في أقل من 10 ثوانٍ.

استخدم SVG للشعارات والأيقونات والرسوم التوضيحية وأي شيء ذي أشكال واضحة - فهو يتكيف بشكل مثالي ويحافظ على حجم الملفات صغيرًا (من 1 إلى 5 كيلوبايت نموذجيًا). استخدم PNG للحصول على لقطات شاشة وصور ذات شفافية وأعمال فنية دقيقة البكسل. بالنسبة لمعظم مشاريع الويب، سيؤدي تحويل مجموعة الأيقونات الخاصة بك من PNG إلى SVG إلى تقليل وزن الصفحة وتحسين العرض على الشاشات ذات DPI العالية. اختبر كلا التنسيقين عندما تكون في شك - تستغرق مقارنة حجم الملف 30 ثانية وعادة ما يكون الاختيار الصحيح واضحًا.