نظرة عامة
هذا الدليل يقارن بين PNG و SVG عبر أهم المعايير لمساعدتك في اختيار التنسيق المناسب لاحتياجاتك.
SVG هو تنسيق متجه ويتوسع بلا حدود؛ PNG هو تنسيق نقطي وهو الأفضل للصور المعقدة.
مقارنة مباشرة
قابلية التوسع
PNG: تصبح PNG ضبابية عند توسيعها إلى ما بعد دقتها الأصلية.
SVG: تتوسع SVG إلى أي حجم بشكل مثالي دون فقدان الجودة.
Winner: SVG
حجم الملف
PNG: تكون PNG أكبر للرسومات البسيطة لكنها مشابهة لـ SVG للصور المعقدة.
SVG: تكون SVG صغيرة للرسومات البسيطة (الشعارات، الأيقونات) لكنها كبيرة للرسوم التوضيحية المعقدة.
Winner: تعادل
حالة الاستخدام
PNG: تكون PNG الأفضل للصور الفوتوغرافية والصور المعقدة ذات الألوان المتعددة.
SVG: تكون SVG الأفضل للشعارات، الأيقونات، الرسوم التوضيحية، وأي شيء يحتاج إلى التوسع.
Winner: تعادل
قابلية التحرير
PNG: لا يمكن تعديل بكسلات PNG بشكل فردي دون استخدام محررات الصور.
SVG: يمكن تعديل مسارات SVG بسهولة باستخدام محررات النصوص أو أدوات الرسوم المتجهة.
Winner: SVG
دعم الويب
PNG: يتم دعم PNG عالميًا من قبل كل متصفح.
SVG: يتم دعم SVG من قبل جميع المتصفحات الحديثة.
Winner: تعادل
النقطي مقابل المتجهي
التمييز الأساسي هو بين النقطي والمتجهي. يخزن PNG شبكة صريحة من البكسلات، مضغوطة بدون فقدان باستخدام DEFLATE ومرشحات التنبؤ لكل صف، بحيث يصف الملف قيم الألوان الدقيقة بدقة ثابتة.[1][2]بدلاً من ذلك، يصف SVG الصورة كتعليمات XML، ومسارات، وأشكال، ونصوص، وتدرجات، يرسمها العارض حسب الحاجة.[3]لأن SVG هو وصف رياضي وليس مصفوفة بكسلات، فليس له دقة متأصلة.
التحجيم والوضوح
يمكن تحجيم SVG إلى أي حجم ويبقى حاداً تماماً، لأن أشكاله تُحسب مجدداً بالدقة المستهدفة.[4]يصبح PNG ضبابياً أو مربعاً عند تكبيره بما يتجاوز أبعاد البكسل الأصلية، لأن العارض يجب أن يستكمل البكسلات التي لم يتم تخزينها أبداً. على العكس من ذلك، SVG غير عملي للصور الفوتوغرافية: تمثيل ملايين البكسلات المتغيرة بدقة كبدائل متجهة ينتج ملفات ضخمة وغير فعالة، بينما يتعامل PNG مع التفاصيل المعقدة حسب البكسل بشكل طبيعي.[1]
سلوك حجم الملف
الصيغتان تتحجمان بطريقة معاكسة حسب المحتوى. يعتمد حجم SVG على عدد الأشكال التي يحتويها، وليس على أبعاد عرضه، لذلك يبقى الشعار البسيط صغيراً سواء عُرض بحجم رمز أو على لافتة إعلانية.[3]يعتمد حجم PNG على أبعاد البكسل والتعقيد البصري؛ مضاعفة العرض والارتفاع تقريباً تضاعف عدد البكسلات أربع مرات. للرسومات البسيطة، SVG عادة ما يكون أصغر بكثير؛ للصور النقطية المفصلة، PNG أكثر كفاءة.
القابلية للتحرير والتفاعل
لأن SVG قائم على XML نصي، يمكن تحريره في محرر أكواد، وتنسيقه باستخدام CSS، وتحريكه، وبرمجته، والبحث فيه، وتظل عناصره الفردية قابلة للعنونة.[3]PNG هي مصفوفة بكسلات معتمة يمكن تحريرها فقط كصورة. كلاهما يدعم الشفافية: PNG من خلال قناة ألفا، SVG بشكل متأصل، لأن المناطق غير المرسومة ببساطة لا تُرسم.[2]
التوحيد والتطبيقات
يُعرّف PNG من قبل W3C و IETF (RFC 2083) و ISO/IEC 15948؛ SVG هو معيار W3C.[1][2][3]يُستخدم SVG للشعارات والرموز والمخططات والرسومات الخطية التي يجب أن تتحجم عبر أحجام الشاشات، بينما يُستخدم PNG للقطات الشاشة والرسومات المفصلة والأعمال الفنية النقطية التي تتطلب بكسلات بدون فقدان والشفافية.[4]كلاهما مدعوم من قبل جميع المتصفحات الرئيسية.
المراجع
أسئلة شائعة
هل يجب أن أستخدم SVG أم PNG لشعاري؟
استخدم SVG للشعارات - فهي تتوسع بشكل مثالي وصغيرة في حجم الملف. استخدم PNG عندما لا يتم دعم SVG.
هل يمكنني استخدام SVG على المواقع الإلكترونية؟
نعم، يتم دعم SVG بالكامل من قبل جميع المتصفحات الحديثة وهو التنسيق الموصى به للرموز والشعارات على الويب.
هل SVG أفضل من PNG للرموز؟
نعم، رموز SVG مستقلة عن الدقة، تبدو مثالية على أي كثافة شاشة، وعادة ما تكون أصغر في حجم الملف.
هل يمكنني تحويل PNG إلى SVG؟
التحويل التلقائي يحول PNG إلى SVG لكن النتائج تختلف. الصور المعقدة لا تتحول بشكل جيد. الشعارات البسيطة تتحول بشكل جيد.
هل تدعم البريد الإلكتروني SVG؟
لا، معظم عملاء البريد الإلكتروني لا يدعمون SVG. استخدم PNG لصور البريد الإلكتروني.