SVG مقابل PNG: متى تستخدم الصور المتجهية ومتى تستخدم النقطية
يحل SVG وPNG مشكلتين مختلفتين. يصف SVG الهندسة المتجهية ويمكنه أيضاً تضمين محتوى نقطي، بينما يخزن PNG شبكة ثابتة من وحدات البكسل. يعتمد الاختيار الصحيح على العمل الأصلي وحدود الأمان وإمكانية الوصول ومسار التحرير وسلوك العرض وحجم الملف المقاس.
الفرق الأساسي بين SVG وPNG
يتوافق الفرق بين SVG وPNG مباشرة مع الفرق الأوسع بين الرسوميات المتجهية والرسوميات النقطية.
SVG (الرسوميات المتجهية القابلة للتحجيم) قائم على XML ويمكنه وصف الأشكال والمسارات والنصوص والمرشحات والأنماط والموارد المضمنة. يعاد رسم الأجزاء المتجهية بالحجم المعروض، لكن الوضوح يظل معتمداً على الهندسة والحدود والتأثيرات ومحاذاة البكسل وأي صور نقطية مضمنة.
PNG (رسومات الشبكة المحمولة) صيغة نقطية تخزن شبكة ثابتة من وحدات البكسل. يحتاج التكبير إلى إعادة أخذ العينات وقد يبدو ناعماً أو متكسراً. قد يزيد تقديم مصدر أكبر بكثير من مساحة العرض عمل النقل وفك الترميز، ما لم تسمح البدائل المتجاوبة للمتصفح باختيار ملف مناسب.
يؤثر هذا الفرق في كل شيء: حجم الملف، وقابلية التحجيم، ومسار التحرير، وأنواع الصور التي تتعامل معها كل صيغة جيداً.
متى تستخدم SVG
يعد SVG خياراً قوياً للأعمال المتجهية التي خضعت للمراجعة عندما تكون متطلبات الأمان وإمكانية الوصول والعرض والتضمين مفهومة:
- الشعارات — يمكن لملف SVG نظيف واحد تغطية أحجام عرض متعددة من دون تكبير نقطي. وقد تحتاج العلامات الصغيرة جداً إلى تبسيط بصري أو تعديل الحدود أو إصدار مخصص.
- الأيقونات — يمكن لأيقونات الواجهة والتنقل والشبكات الاجتماعية مشاركة هندسة وأنماط قابلة لإعادة الاستخدام. قد يكون SVG أصغر من عدة درجات دقة نقطية، لكن المسارات المعقدة أو تكرار العلامات المضمنة قد يعكس النتيجة.
- الرسومات التوضيحية والمخططات — مخططات تقنية وخرائط تدفق وخرائط ورسوم معلوماتية بخطوط نظيفة وألوان مسطحة. يمكن أن يظل نص SVG قابلاً للتحديد إذا كان ممثلاً كنص، لكن إمكانية الوصول والفهرسة تتطلبان علامات وتضميناً صحيحين.
- الرسوم المتحركة — يمكن تحريك عناصر SVG باستخدام CSS أو JavaScript أو آليات SVG. ولا بد من مراجعة تفضيلات الحركة وكلفة المعالج وCSP وإمكانية الوصول وتعقيد التفاعل.
- أيقونات الموقع — تستطيع المتصفحات الرئيسية الحالية استخدام favicon بصيغة SVG، بينما قد تتضمن المجموعة الكاملة بدائل نقطية أو ICO لمستهلكين آخرين. أنشئ المخرجات الشائعة من صورة مدعومة عبر مولّد Favicon.
يحظى SVG بدعم واسع في المتصفحات الحالية وأدوات التصميم الشائعة. لا تعني الشعبية أن أصلاً بعينه يجب أن يكون متجهياً؛ قارن التعقيد والأمان واستراتيجية التخزين المؤقت وإمكانية الوصول والعرض.
متى تستخدم PNG
يعد PNG خياراً قوياً عندما تكون وحدات البكسل النقطية بلا فقد أو شفافية ألفا مهمة، وعندما يناسب الحجم الناتج ميزانية التسليم:
- الصور الفوتوغرافية الشفافة — يدعم PNG شفافية ألفا وترميز البكسل بلا فقد، لكن الصورة التفصيلية قد تكون كبيرة. قارن بدائل WebP/AVIF ذات ألفا، بلا فقد أو مع فقد، عندما تدعمها الأنظمة؛ ومن دون شفافية اختبر JPEG وصيغ الصور الحديثة.
- لقطات الشاشة — تتضمن واجهة نقطية ونصوصاً ذات حواف ناعمة وتدرجات. يمكن أن يحافظ PNG على قيم البكسل المرمّزة، بينما تبقى الملفات اللونية والبيانات الوصفية وتغيير الحجم وتحويل لوحة الألوان مسائل منفصلة.
- الأعمال المعقدة كثيرة الألوان — اللوحات الرقمية التفصيلية والأنسجة والرسومات الواقعية التي لا يمكن تبسيطها إلى أشكال متجهية نظيفة.
- الرسوم النقطية التي تتضمن نصاً — عندما تحتاج إلى عرض دقيق على مستوى البكسل حول حواف النص، يتجنب PNG شوائب الضغط التي تقدمها الصيغ ذات الفقد.
حجم الملف والأداء
بالنسبة إلى الأيقونات والشعارات والرسومات البسيطة، قد يكون SVG المحسن أو البديل النقطي أصغر بحسب الهندسة والأبعاد والتكرار والضغط واستراتيجية التخزين المؤقت:
| نوع الرسم | حجم PNG | حجم SVG | التوفير |
|---|---|---|---|
| أيقونة بسيطة | حجم نقطي واحد لكل بديل | هندسة متجهية مدمجة غالباً | قس كليهما |
| شعار | قد يتطلب درجات دقة متعددة | غالباً خيار قوي عند وجود مصدر متجهي | قس كليهما |
| مجموعة أيقونات | قد تضيف الملفات المنفصلة طلبات وبايتات | تختلف كلفة التخزين المؤقت بين sprite والملفات الخارجية والعلامات المضمنة | قس الصفحة كاملة |
| رسم توضيحي بسيط | يزداد الحجم مع أبعاد البكسل والتفاصيل | يزداد الحجم مع تعقيد المسارات والأنماط والمرشحات | يعتمد على المحتوى |
يمكن أن يقلل ضغط النصوص مثل Brotli أو gzip حجم نقل SVG، وتختلف النتيجة بحسب العلامات وإعداد الخادم. قارن البايتات المضغوطة المنقولة، لا حجم الملف الأصلي على القرص فقط.
يتجنب SVG المضمن طلباً منفصلاً، لكنه يزيد حجم HTML ولا يمكن تخزينه مؤقتاً بشكل مستقل. ويمكن لملف SVG الخارجي الاستفادة من ذاكرة المتصفح المؤقتة. لا تحتاج الهندسة المتجهية عادةً إلى بدائل لكثافات نقطية مختلفة، لكن SVG المعقد أو الذي يتضمن صورة نقطية قد يظل بحاجة إلى معالجة متجاوبة. اختر طريقة التضمين بقياس الصفحة كاملة.
بالنسبة إلى الصور الفوتوغرافية والأنسجة التفصيلية، ينشئ التتبع المتجهي عادةً هندسة مفرطة أو يزيل التفاصيل. ويضيف تضمين الصورة النقطية الأصلية داخل SVG حاوية وغالباً عبء base64 من دون تحويلها إلى رسم متجهي. استخدم صيغة نقطية مناسبة مثل PNG أو JPEG أو WebP أو AVIF.
مقارنة سريعة: SVG مقابل PNG
| الميزة | SVG | PNG |
|---|---|---|
| نوع الصورة | متجهية (أشكال ومسارات) | نقطية (شبكة بكسل) |
| قابلية التحجيم | يعاد رسم الأجزاء المتجهية، وتظل تفاصيل العرض مهمة | شبكة بكسل ثابتة؛ قد يؤدي التكبير إلى النعومة |
| الشفافية | نعم | نعم (قناة ألفا) |
| محتوى فوتوغرافي | غير مناسب عادةً إلا كنقطي مضمن | خيار ألفا بلا فقد؛ قارن حجم التسليم |
| الأيقونات/الشعارات | قوي عند وجود مصدر متجهي نظيف خضع للمراجعة | مناسب عند أبعاد البكسل المعدّة |
| الرسوم المتحركة | نعم (آليات SVG/CSS/JS) | امتداد APNG |
| التحرير بالشفرة | نعم (قائم على XML) | لا |
| النص وإمكانية الوصول | ممكنان مع علامات وتضمين صحيحين | يتطلب نصاً محيطاً أو بديلاً مكافئاً |
| دعم المتصفحات | المتصفحات الرئيسية الحالية؛ تختلف قواعد التضمين | واسع جداً |
| حجم الملف | يعتمد على الهندسة والعلامات | يعتمد على الأبعاد والمحتوى |
مثال عملي: إعادة تصميم موقع شركة
تخيل أنك تعيد تصميم موقع شركة. لديك شعار العلامة التجارية و30 أيقونة للتنقل والميزات وصورة رئيسية وعدة لقطات شاشة للمنتج. يمكنك توزيع الصيغ هكذا:
- الشعار → استخدم SVG عند وجود مصدر متجهي نظيف. يغطي ملف واحد مراجع عدة أحجام عرض؛ اختبر الحدود ووضوح القراءة في الحجم الصغير.
- مجموعة الأيقونات → يمكن لنظام sprite أو المكونات بصيغة SVG إعادة استخدام الهندسة. تحقّق من إمكانية الوصول وسلوك التخزين المؤقت وCSP وإجمالي العلامات المنقولة.
- الصورة الرئيسية → اختبر بدائل JPEG وWebP وAVIF بالأبعاد والجودة المرئية نفسها، واحتفظ بالبدائل التي يحتاجها الجمهور. راجع دليل تحسين الصور.
- لقطات شاشة المنتج → ابدأ بـPNG عندما يلزم الحفاظ على وحدات البكسل بعد فك الترميز، ثم قارن البدائل الأخرى بلا فقد وأي إصدار تسليم ذي فقد مقبول.
كيفية التحويل بين SVG وPNG
يمكنك تحويل الملفات المدعومة في المتصفح من دون تثبيت برنامج. يعالج Vizua الملف المحدد داخل المتصفح ولا يرسله إلى خادم معالجة الصور لدينا، مع أن خدمات الصفحة قد تظل تستخدم الشبكة:
- SVG إلى PNG — حوّل SVG مدعوماً إلى صورة نقطية وفق مقياس إخراج متاح ثم افحص النتيجة
- تحويل الصورة إلى متجهات — يتتبع الصور النقطية المدعومة إلى مسارات SVG تقريبية ولا يستعيد الهندسة المتجهية الأصلية
- مولّد Favicon — أنشئ مخرجات favicon شائعة من صورة مصدر مدعومة
لإلقاء نظرة أوسع على أبعاد البدائل وميزانيات البايت الخاصة بكل صفحة، راجع دليل أحجام ملفات الصور.
الأسئلة الشائعة
هل يمكن أن يحل SVG محل PNG بالكامل؟
لا. يناسب SVG الرسوم والأيقونات والرسومات التوضيحية، لكنه لا يمثل الصور الفوتوغرافية بكفاءة. ستكون الصورة داخل SVG إما ضخمة عند تضمينها كبيانات نقطية بترميز base64، أو ستفقد تفاصيلها عند تتبعها إلى أشكال مبسطة. استخدم SVG للمحتوى الملائم للمتجهات، واستخدم PNG أو JPEG أو WebP للصور الفوتوغرافية والصور النقطية المعقدة.
هل ملفات SVG آمنة للاستخدام في مواقع الويب؟
SVG محتوى نشط قائم على XML، وقد يتضمن نصوصاً برمجية ومعالجات أحداث ومراجع خارجية وروابط وCSS ومرشحات وميزات أخرى. تعامل مع SVG غير الموثوق مثل الشفرة: تحقّق منه وفق قائمة سماح، ونظّفه بأداة تحظى بالصيانة، وقدّمه بنوع محتوى وعزل مناسبين، وطبّق CSP. يقلل المصدر الموثوق المخاطر لكنه لا يغني عن المراجعة.
لماذا يبدو SVG ضبابياً؟
يمكن إعادة رسم الهندسة المتجهية بأحجام مختلفة من دون تكبير صورة نقطية، لكن قد يظل SVG ناعماً بسبب المحاذاة الكسرية أو الحدود أو المرشحات أو التحويلات أو تنعيم الحواف أو الصور النقطية المضمنة أو الشاشة. افحص viewBox والأبعاد المعروضة وسلوك الحدود وأي محتوى نقطي.
هل أستخدم SVG أم خط أيقونات لأيقونات الموقع؟
غالباً ما يكون SVG مناسباً لأن كل أيقونة يمكن أن تحمل اسماً واضحاً لإمكانية الوصول أو تُخفى إذا كانت زخرفية، ويمكن حصر تنسيقها. لكنه ليس أسرع أو أيسر وصولاً تلقائياً: تزيد العلامات المضمنة حجم HTML، ويمكن تخزين ملفات sprite الخارجية مؤقتاً، ويجب تطبيق ARIA بصورة صحيحة. قارن احتياجات نظام الأيقونات بدلاً من اعتماد قاعدة واحدة.
هل يمكنني تحويل PNG إلى SVG؟
نعم. تحوّل أداة تحويل الصورة إلى متجهات من Vizua الصور النقطية مثل PNG أو JPEG إلى مسارات SVG تقريبية. تعطي أفضل النتائج مع الشعارات والأيقونات والرسومات البسيطة ذات الألوان المحدودة والحواف الواضحة، لا مع الصور الفوتوغرافية المعقدة.
حوّل صورك
لا يلزم إنشاء حساب. تتم معالجة الملف المحدد في المتصفح ولا يُرسل إلى خادم معالجة الصور لدينا.