2026-07-28·4 min read

PNG مقابل SVG: أي صيغة للشعارات والأيقونات والرسوم؟

مقارنة عملية بين صيغتَي PNG وSVG — متى تستخدم كل منهما للشعارات والأيقونات والرسوم التوضيحية والرسوم على الويب.

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

PNG مقابل SVG: الفرق الجوهري

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

متى تستخدم PNG؟

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

متى تستخدم SVG؟

الشعارات والعلامات التجارية: تبقى شعارات SVG حادةً بأي حجم
الأيقونات: تتوسّع بشكل مثالي على شاشات Retina/HiDPI
الرسوم التوضيحية المكوّنة من أشكال: المخططات والرسوم البيانية والإنفوغرافيك
الرسوم المتحركة: يدعم SVG رسوم CSS وJavaScript
تصميم الويب المتجاوب: يتوسّع SVG تلقائيًا مع نافذة المتصفح

مقارنة PNG مقابل SVG

الميزة	PNG	SVG
قابلية التوسع	حجم ثابت (بيكسلات)	لا محدودة (متجهات)
حجم الملف (شعار)	20–200 كيلوبايت	5–50 كيلوبايت
دعم الصور الفوتوغرافية	نعم	لا
الشفافية	نعم	نعم
الرسوم المتحركة	لا	نعم (CSS/JS)
دعم البريد الإلكتروني	شامل	محدود

استخدامهما معاً

كثير من سير العمل تستخدم كلا الصيغتَين:
احتفظ بـ SVG كـ ملف الشعار الرئيسي للتحرير والتوسيع
صدّر نسخ PNG بأحجام محددة لوسائل التواصل الاجتماعي والبريد الإلكتروني
استخدم PNG بضعف الحجم (مثلاً 400×400 لشعار 200×200) لشاشات Retina

جرّبه مجاناً — بدون تسجيل

غيّر الحجم واضغط وحوّل الصور فوراً في متصفحك.

مزيد من الأدلة

→ العودة إلى المدونة