SVG أم PNG: أيهما للشعارات والأيقونات والرسوم التوضيحية؟

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

أشكال مقابل بكسلات

ملف SVG نص: قائمة من الأشكال مثل «دائرة هنا، قطرها 3 وحدات، مملوءة بالأخضر». يرسم المتصفح أو البرنامج تلك الأشكال من جديد بأي حجم مطلوب، فتبقى الحواف دائمًا حادة بقدر ما تسمح الشاشة. أما PNG فشبكة من البكسلات محفوظة دون فقدان. تبدو مثالية بحجمها الأصلي، ولا بد من مطّها، وبالتالي تمويهها، لتُعرض أكبر.

هذا يجعل SVG الصيغة الطبيعية لكل ما يتكون من أشكال: الشعارات والأيقونات والرسوم التوضيحية والمخططات والخرائط. أما الصور الفوتوغرافية فمكونة من ملايين البكسلات المختلفة قليلًا، بلا أشكال تُوصف، فمكانها صيغة بكسلات مثل JPEG أو WebP أو AVIF، كما اختبرنا في JPG أم PNG أم WebP أم AVIF.

ملفات الاختبار

• أيقونة: كاميرا من مجموعة Lucide المفتوحة المصدر، شكلان.
• شعار: شعار Tooloat، ثلاثة أشكال.
• علم: علم البرازيل، 17 شكلًا بما فيها الكتابة.
• ختم: الختم الأكبر للولايات المتحدة، رسم توضيحي مفصل من 776 شكلًا.
• خريطة العالم: خريطة عالم فارغة كل بلد فيها شكل مستقل، 2,316 شكلًا إجمالًا.

العلم والختم والخريطة ملفات في الملك العام من Wikimedia Commons. مرّ كل ملف SVG عبر مُصغّر SVG لدينا بإعداداته الافتراضية وحُوّل إلى PNG بأربعة أحجام بـمحوّل SVG إلى PNG.

أحجام الملفات

بعد الضغط كانت الأيقونة والشعار والعلم أصغر حتى من PNG بعرض 64 بكسل لها، وأصغر بـ50 إلى 250 مرة من نسخة بعرض 1024 بكسل، مع خدمة كل أحجام الشاشات في آن واحد. لهذا تُوزَّع مجموعات الأيقونات والشعارات بصيغة SVG.

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

الحدة

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

PNG صُنع بعرض 256 بكسلSVG

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

تحويل PNG إلى SVG

إذا لم يكن لديك من شعارك إلا PNG، فيمكن لأداة التتبع أن تعيد بناءه كأشكال. حوّلنا ثلاثة ملفات PNG بـمحوّل PNG إلى SVG لدينا مستخدمين إعداداته المسبقة:

• الشعار، 512 بكسل: 6 أشكال في SVG بحجم 1.5 كيلوبايت يبدو كالأصل. الألوان المسطحة والحواف النظيفة هي أفضل ما يتقنه التتبع.
• الختم، 1024 بكسل: 943 شكلًا و401 كيلوبايت، أكبر من SVG الأصلي وبتفاصيل أقل في الخطوط الدقيقة. تتبع رسم توضيحي ينجح، لكن الأصل المتجهي الحقيقي أفضل دائمًا.
• صورة بومة، 1000 بكسل: 7,039 شكلًا و1.8 ميغابايت، أربعة عشر ضعف ملف JPEG للصورة نفسها بحجم 129 كيلوبايت.

أين لا ينجح SVG

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

الحل المعتاد هو الاحتفاظ بـSVG كملف رئيسي وتصدير ملفات PNG منه حيث تُطلب صيغة بكسلات.

أيهما تستخدم

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