SVG أم PNG: أي تنسيق تختار؟

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

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

فرق واحد يفسر الباقي

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

لهذا يستطيع ملف SVG واحد أن يخدم ثلاث حالات استخدام، بينما يحتاج PNG إلى نسخة لكل مقاس. شعار بعرض 300 بكسل وارتفاع 100 يستهلك 30,000 بكسل عند العرض الطبيعي، و120,000 عند ضعف الدقة، و270,000 عند ثلاثة أضعافها. ثلاث نسخ إن كان PNG، وملف واحد إن كان SVG.

ما يعنيه «بلا فقدان» في كل منهما

PNG صيغة بلا فقدان: تُفك إلى القيم نفسها التي حُفظت، وقد تحمل قناة ألفا. «بلا فقدان» هنا تعني أن الضغط لا يرمي معلومات، لا أنه يزيد التفاصيل.

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

الشفافية والحجم على الشبكة

الاثنان يدعمان الشفافية، فلا يحسم أحدها القرار بهذا البند. الفرق في الثمن.

صورة مربعة 2,400 × 2,400 بكسل بقناة ألفا تساوي 5.76 مليون بكسل، وأربعة بايتات لكل بكسل تعني نحو 23 ميغابايت من البيانات الخام قبل الضغط. أما أيقونة بسيطة في SVG فتبقى كيلوبايتات قليلة لأنها تحفظ الأرقام لا الشبكة.

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

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

حيث يخدعك الاسم

«SVG دائماً أصغر» عبارة لا تصح. و«SVG دائماً أحدّ» تصح فقط فيما هو متجهي فعلاً. الملف الذي يحمل صورة فوتوغرافية مدمجة لن يكبر بسلاسة، وسيبدو عند التكبير كصورة مكبّرة مهما كان امتداده.

و«PNG صالح للطباعة» عبارة تحتاج تحفظاً. PNG جيد للشاشة وللشفافية، لكن دقته محددة سلفاً، والتكبير لا يضيف تفاصيل. من احتاج مخرجات طباعة بمقاس محدد فليحسب البكسلات المطلوبة أولاً، بدل أن يضاعف المقاس بعد التصدير.

ومن الخدع أيضاً الاعتقاد أن إعادة حفظ PNG بمرات متعددة تُحسّن الجودة. الضغط بلا فقدان لا يحسّن، وإعادة الحفظ ببرامج مختلفة قد تغيّر البيانات الوصفية فقط.

كيف تجرب القرار على أصل واحد

خذ الشعار الأصلي. صدّره بصيغتي SVG و PNG من محرر المتجهات ثم افتح الاثنين بالحجم الذي سيظهران به فعلاً في الموقع. كبّر مرة ومرتين. إن ظهرت الحواف خشنة في PNG وحدّاً في SVG، فالملف متجهي فعلاً واستحق الصيغة.

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

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

أيها تختار في النهاية

اختر SVG للأيقونات والشعارات والرسوم والخطوط البسيطة، ولأي أصل سيظهر بأكثر من حجم. اختر PNG للصور الفوتوغرافية، وللقطات الشاشة، وللأصول التي ستُستهلك كما هي مرة واحدة.

وإن كان القرار بين حاويات متجهية مختلفة، لا بين متجه ونقطي، فالمقارنة في SVG أم AI أم EPS. وإن كان اختيارك SVG ويقلقك وزنه عند التسليم، فـ تجهيز ملفات SVG وتحسينها للويب يعالج الحجم والأرقام والصورة المدمجة.