SVG مقابل PNG: متى تستخدم الصور المتجهية ومتى تستخدم النقطية
SVG وPNG تحلّان مشكلتين مختلفتين جوهرياً. SVG تخزّن الصور كأشكال رياضية تتكبّر بلا نهاية بدون فقدان الجودة. PNG تخزّن الصور كشبكة من البكسلات الملونة. اختيار الصيغة الخاطئة يكلّفك إما في الأداء أو في الجودة البصرية.
ما الذي يجعل SVG وPNG مختلفتين جوهرياً
الفرق بين SVG وPNG يعكس التمييز الأوسع بين الرسوميات المتجهية والرسوميات النقطية.
SVG (Scalable Vector Graphics) هي صيغة مبنية على XML تصف الصور باستخدام تعريفات رياضية للأشكال والخطوط والمنحنيات والألوان. عندما تكبّر SVG، المتصفح يعيد حساب ورسم كل شكل بالحجم الجديد. النتيجة دائماً حادة، سواء عُرضت كأيقونة بحجم 16 بكسل أو كلوحة إعلانية بحجم 16,000 بكسل.
PNG (Portable Network Graphics) هي صيغة نقطية تخزّن الصور كشبكة من البكسلات، كل منها بقيمة لون محددة. الصورة لها دقة ثابتة. كبّرها أكبر من أبعادها الأصلية وتصبح ضبابية ومبكسلة. صغّرها وأنت تحمّل بيانات أكثر مما تحتاج.
هذا التمييز يحدد كل شيء: حجم الملف، قابلية التكبير، سير العمل في التحرير، وأنواع الصور التي تتعامل معها كل صيغة جيداً.
متى تكون SVG الخيار الأفضل
SVG تتفوق في أي رسم أُنشئ أصلاً كعمل فني متجهي. استخدم SVG لـ:
- الشعارات — الشعار يحتاج أن يبدو حاداً بكل حجم، من أيقونة المتصفح بحجم 32 بكسل إلى بانر بعرض كامل الصفحة. SVG تتعامل مع هذا بملف واحد. مع PNG، ستحتاج دقات متعددة.
- الأيقونات — أيقونات الواجهة، أيقونات التنقّل، أيقونات التواصل الاجتماعي. مثال عملي: موقع تجارة إلكترونية بـ 50 أيقونة تصنيف كانت تزن 1.2 ميجابايت كملفات PNG انخفضت إلى 95 ك.ب فقط بعد التحويل إلى SVG.
- الرسوم التوضيحية والمخططات — المخططات التقنية، مخططات التدفق، الخرائط، والإنفوجرافيك بخطوط نظيفة وألوان مسطحة. SVG تبقي النصوص قابلة للتحديد والبحث.
- الحركات — عناصر SVG يمكن تحريكها بـ CSS أو JavaScript، ما يتيح مؤشرات تحميل خفيفة وتفاعلات دقيقة ورسوم بيانية تفاعلية بدون ملفات فيديو.
- الأيقونات المفضّلة — المتصفحات الحديثة تدعم أيقونات مفضّلة بصيغة SVG، وتظهر حادة على أي كثافة شاشة. يمكنك إنشاء أيقونات مفضّلة من أي صورة باستخدام مولّد الأيقونات المفضّلة.
وفقاً لـ W3Techs، 65.5% من جميع المواقع تستخدم SVG الآن، ما يجعلها ثالث أكثر صيغة صور شيوعاً بعد PNG وJPEG. اعتمادها ينمو بنسبة 8% تقريباً سنوياً، مدفوعاً باحتياجات التصميم المتجاوب ومزايا الأداء.
متى تكون PNG الخيار الأفضل
PNG هي الخيار الصحيح عندما تهم الدقة على مستوى البكسل أو عندما يكون محتوى الصورة نقطياً بطبيعته:
- الصور الفوتوغرافية مع شفافية — قصّ المنتجات على خلفيات شفافة، تركيبات صور طبقية. PNG تدعم الشفافية الكاملة مع الحفاظ على التفاصيل الفوتوغرافية. (للصور بدون شفافية، JPEG عادة أفضل.)
- لقطات الشاشة — لقطات الشاشة تحتوي عناصر واجهة بدقة بكسل، ونصوص مصقولة، وتدرجات دقيقة هي نقطية بطبيعتها. PNG تحافظ عليها بالضبط.
- الأعمال الفنية المعقدة بألوان كثيرة — اللوحات الرقمية المفصّلة، القوام، والرسوم التوضيحية الواقعية التي لا تتبسّط إلى أشكال متجهية نظيفة.
- الرسوميات النقطية مع طبقات نص — عندما تحتاج عرضاً دقيقاً على مستوى البكسل لمحتوى صورة ونص مدمج، PNG تضمن عدم وجود تشوّهات ضغط حول حواف النص.
حجم الملف والأداء
لأنواع الرسوميات التي تتعامل معها SVG جيداً (أيقونات، شعارات، رسوم توضيحية بسيطة)، توفير حجم الملف كبير:
| نوع الرسم | حجم PNG | حجم SVG | التوفير |
|---|---|---|---|
| أيقونة بسيطة (64×64) | ~25 ك.ب | ~2 ك.ب | 92% |
| شعار (500×200) | ~45 ك.ب | ~8 ك.ب | 82% |
| 50 أيقونة تصنيف | ~1.2 م.ب إجمالي | ~95 ك.ب إجمالي | 92% |
| رسم توضيحي بسيط | ~150 ك.ب | ~20 ك.ب | 87% |
ملفات SVG أيضاً تنضغط بشكل ممتاز مع Gzip أو Brotli (قياسي على معظم خوادم الويب)، وغالباً تنكمش 50-70% إضافية أثناء النقل. ملف SVG بحجم 20 ك.ب قد يُنقل بحجم 6-8 ك.ب فقط عبر الشبكة.
مكاسب الأداء تتجاوز حجم الملف. ملفات SVG يمكن تضمينها مباشرة في HTML، ما يلغي طلب HTTP بالكامل. تُعرض بدقة الجهاز الأصلية بدون الحاجة لسمات srcset أو ترميز الصور المتجاوب. ولأنها نصية، هي صديقة للتخزين المؤقت وصديقة للمقارنة في أنظمة التحكم بالإصدار.
للصور المعقدة — الفوتوغرافية، القوام المفصّلة، الصور بآلاف الألوان الفريدة — SVG لا تقدّم ميزة. صورة فوتوغرافية "محوّلة" إلى SVG إما تضمّن البيانات النقطية كـ base64 (فتصبح أكبر لا أصغر) أو تتبّع الصورة كأشكال مبسّطة (فتفقد التفاصيل). لتلك الصور، PNG أو JPEG أو صيغ حديثة مثل WebP وAVIF هي الأدوات المناسبة.
مقارنة سريعة: SVG مقابل PNG
| الميزة | SVG | PNG |
|---|---|---|
| نوع الصورة | متجهية (أشكال ومسارات) | نقطية (شبكة بكسلات) |
| قابلية التكبير | لا نهائية (حادة دائماً) | دقة ثابتة (تتشوّش عند التكبير) |
| الشفافية | نعم | نعم (قناة ألفا) |
| مناسبة للصور | لا | نعم (مع شفافية) |
| مناسبة للأيقونات/الشعارات | نعم | مقبولة لكن بملفات أكبر |
| الحركة | نعم (CSS/JS) | لا (APNG بدعم محدود) |
| قابلة للتحرير بالكود | نعم (مبنية على XML) | لا |
| SEO (النص قابل للفهرسة) | نعم | لا |
| دعم المتصفحات | جميع المتصفحات الحديثة | جميع المتصفحات |
| حجم ملف نموذجي (أيقونة) | 1-5 ك.ب | 10-50 ك.ب |
سيناريو عملي
تخيّل أنك تعيد تصميم موقع شركة. العلامة التجارية لديها شعار، ومجموعة من 30 أيقونة تنقّل وميزات، وصورة بطل فوتوغرافية، وعدة لقطات شاشة للمنتج. إليك كيف توزّع الصيغ:
- الشعار ← SVG. يظهر في الرأسية (صغير) والتذييل (متوسط) وصفحة "من نحن" (كبير). ملف SVG واحد يتعامل مع الثلاثة أحجام، يبقى حاداً على شاشات Retina، ويزن حوالي 5 ك.ب.
- 30 أيقونة ← SVG sprite. كل الأيقونات في ملف واحد، حوالي 40-60 ك.ب إجمالي. هذا أقل مما تزنه أيقونتان أو ثلاث بصيغة PNG. CSS يتحكّم بلونها وحجمها.
- الصورة الفوتوغرافية الرئيسية ← ليست SVG، ليست PNG. استخدم JPEG أو WebP لأصغر ملف بجودة مقبولة. راجع دليل تحسين الصور لأفضل الممارسات.
- لقطات شاشة المنتج ← PNG. لقطات الشاشة تحتوي نصوص واجهة وعرض بكسل دقيق يحتاج الحفاظ عليه بدون خسارة.
كيفية التحويل بين SVG وPNG
يمكنك التحويل بين هذه الصيغ مباشرة في متصفحك — بدون رفع لأي خادم، بدون تثبيت برامج. Vizua تعالج كل ملف محلياً على جهازك:
- SVG إلى PNG — تحويل ملفات SVG إلى صور نقطية بأي دقة تحتاجها
- تحويل الصور إلى متجهات — تحويل الصور النقطية (PNG وJPEG) إلى صيغة SVG المتجهية
- مولّد الأيقونات المفضّلة — إنشاء ملفات أيقونات مفضّلة من أي صورة، بما في ذلك إخراج SVG للمتصفحات الحديثة
لنظرة أوسع على اختيار الصيغة المناسبة لكل صورة على موقعك، دليل أحجام ملفات الصور يسرد الأبعاد والصيغ الموصى بها حسب الاستخدام.
الأسئلة الشائعة
هل يمكن لـ SVG أن تحل محل PNG بالكامل؟
لا. SVG ممتازة للرسومات والأيقونات والرسوم التوضيحية، لكنها لا تستطيع تمثيل الصور الفوتوغرافية بكفاءة. صورة فوتوغرافية محوّلة إلى SVG ستكون إما ضخمة (بيانات رسترية مضمّنة بترميز base64) أو تفقد كل التفاصيل الفوتوغرافية (متتبّعة كأشكال مبسّطة). استخدم SVG للمحتوى المتجهي واستخدم PNG أو JPEG أو WebP للصور.
هل ملفات SVG آمنة للاستخدام على المواقع؟
ملفات SVG يمكن أن تحتوي على JavaScript، ما يعني أن SVG خبيثة يمكنها نظرياً تنفيذ كود في المتصفح. إذا كنت تقبل رفع SVG من المستخدمين، قم دائماً بتنظيفها بإزالة وسوم السكريبت ومعالجات الأحداث. لملفات SVG التي تنشئها بنفسك أو تحصل عليها من مصممين موثوقين، لا يوجد خطر عملي.
لماذا تبدو بعض ملفات SVG ضبابية؟
ملفات SVG نفسها لا تفقد الجودة عند التكبير أبداً، لكنها قد تظهر ضبابية إذا عرضها المتصفح بحجم بكسل كسري، أو إذا كانت SVG تستخدم صوراً رسترية مضمّنة بدلاً من مسارات متجهية حقيقية، أو إذا لم يُبنَ التصميم على شبكة بكسل. تأكد أن SVG تستخدم أشكالاً متجهية نظيفة وتُحاذي الخطوط الرئيسية لإحداثيات بكسل كاملة.
هل أستخدم SVG أم خطوط الأيقونات لأيقونات الموقع؟
SVG هي أفضل ممارسة حديثة. خطوط الأيقونات كانت شائعة في العقد الثاني من الألفية، لكنها تأتي مع مشاكل إمكانية الوصول (قارئات الشاشة قد تعلنها بشكل خاطئ)، وقيود في التنسيق، وعبء تحميل ملف خط كامل لبضع أيقونات. أيقونات SVG المضمّنة تُحمّل أسرع، وتُنسّق فردياً بـ CSS، ومتاحة افتراضياً عند إضافة سمات ARIA المناسبة.
حوّل صورك الآن
مجاني، خاص، كل شيء يعمل في متصفحك. بدون رفع، بدون حساب.