SVG أم PNG: شرح الصور المتجهية والنقطية

كيف تختلفان

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

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

متى تستخدم SVG

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

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

متى تستخدم PNG

للقطات الشاشة والصور ذات التفاصيل المعقدة، وللأماكن التي لا تقبل SVG، مثل كثير من الشبكات الاجتماعية وبرامج البريد. صيغة PNG دون فقدان، فيبقى النص في لقطات الشاشة واضحًا، وهي تدعم الشفافية. أما الصور الفوتوغرافية العادية فعادةً ما تكون JPG أو WebP أصغر من PNG.

اختر PNG حين تحتاج نتيجة ثابتة تبدو متطابقة في كل مكان، مثل صورة مرفقة ببريد إلكتروني أو شريحة عرض تقديمي أو منشور اجتماعي.

مثال تطبيقي (توضيحي)

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

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

تحويل SVG إلى PNG

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

وإذا احتجت عدة أحجام، مثل 256 و512 و1024 بكسل، فارسم كلًا منها من SVG على حدة. وافحص الحواف على خلفية داكنة وأخرى فاتحة للتأكد من أن الشفافية تبدو صحيحة.

أخطاء شائعة

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

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

احذر من ملفات SVG غير الموثوقة

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

قائمة مراجعة سريعة

• شعار أو أيقونة مسطحة للويب: SVG
• صورة فوتوغرافية أو معقدة: JPG أو WebP أو PNG
• المنصة ترفض SVG: صدّر PNG
• اختر عرض PNG قبل التصدير
• احتفظ بـ SVG نسخةً رئيسية

نفّذ ذلك مع DoneImg في متصفحك

افتح أداة التحويل، وأضف ملف SVG واختر PNG مخرجًا. اضبط العرض الذي تحتاجه ونزّل النتيجة. وتبقى المناطق الشفافة شفافة.

يتم التحويل في متصفحك، فلا يُرفع ملفك. ومع ذلك، افتح ملفات SVG التي تثق بها فقط.

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