يعتبر التنسيقان SVG و PNG من أكثر تنسيقات الصور المستخدمة على صفحات مواقع الويب، وقد يختلط الأمر على كثير من مصممي الويب ولا يميزون الفارق بينهما..
في هذا المقال نستعرض لكم الاختلافات الأساسية بينها ونعطيكم نصائح لأفضل الممارسات لتطبيقها على المواقع التي تقومون بتصميمهما.
أولاً- التنسيق SVG:
هو اختصار لـ Scalable Vector Graphics أي الرسومات المتجهة القابلة لتغيير حجمها.
ويتم إنشاء هذا النوع من الصور من خلال برامج مخصصة للرسم المتجه مثل Sketch و Adobe Illustrator.
ويُستَخدم لعرض الصور المعتمدة على الأشعة الرياضية فهو يحصل على بيانات مسار الشعاع ويحولها إلى تعليمات بلغة XML لعرضها داخل مستعرض الويب، ونظراً لكون هذه الصور تتكون بالكامل من التعليمات البرمجية، فيمكن تغيير حجمها إلى أي حجم نريده دون أن تفقد من جودتها ودقتها مما يجعلها الحل المثالي للصور التي نريد عرضها على الويب بدقات مختلفة.
من ميزات تنسيق SVG:
- دعم تكبير الحجم بشكل غير محدود.
- يمكن تعديل كل عنصر في الصورة أو تحريكه.
- حجم ملف الصورة صغير.
- لذا ننصح باستخدام تنسيق SVG لعرض صور شعار الموقع والأيقونات والصور المرسومة ببرامج الرسم المتجه.
ثانياً- التنسيق PNG:
هو اختصار لـ Portable Network Graphics أي رسومات الشبكة المحمولة، وهو تنسيق الصور الأكثر شيوعًا على الويب. وقد تم تطويره ليكون إصداراً محسناً وأكثر دقة من تنسيق GIF.
تم ابتكار هذا التنسيق عام 1994 ليكون تنسيقاً للصور لا يوجد فيه فقدان بيانات عند الضغط. وهو يعتمد على البيانات النقطية ويدعم فضاء ألوان 32 بت (ما يعادل 16 مليون لون إجمالي) و 256 مستوى من الشفافية، في حين يدعم تنسيق GIF كحد أقصى ( 256 لون إجمالي) ومستويين فقط من الشفافية هما 0 أو 100. وهذا يعني أنه يمكن استخدام صور PNG بشفافية جزئية وجعلها تتداخل مع العناصر الأخرى في الموقع مما يجعلها خياراً مُفَضَّلاً لكثير من مصممي الويب.
من ميزات تنسيق PNG:
- دعم فضاء لوني RGB-A كامل مكون من (32 bit)
- دعم الشفافية الجزئية
- إمكانية ضغطها بلا خسارة في بيانات الصورة.
- لذا ننصح باستخدام تنسيق PNG للصور التي تحتاج لشفافية والصور الملونة البسيطة (مع وضع حجم الملف في الاعتبار لأن الدقة الأكبر تساوي حجم ملف أكبر).
- أما إذا كانت الصورة تحتوي الكثير من الألوان المختلفة ففي هذه الحالة ينصح باستخدام تنسيق آخر هو JPEG.
ما هي الاختلافات الرئيسية بين تنسيق SVG و PNG ؟
يمكن تحويل صورة SVG إلىPNG ، لكن بالمقابل لا يمكن تحويل PNG إلى SVG لأن الأخيرة تعتمد على المتجهات، فلا يمكن مثلاً تحويل الصور الملتقطة بالهاتف مثل الصور العائلية إلى تنسيق SVG بينما يمكن تحويل صور الأيقونات أو الشعارات إلى تنسيق PNG وستظهر الفروق بينهما فقط عند تكبير الصورة أو تصغيرها. وذلك لأن PNG عبارة عن مجموعة محددة من البكسلات pixels وأي تغيير في قياسها سيجبر هذه البكسلات على أن تمتزج وتتحد مع بعضها البعض ويتسبب في فقدان جودة الصورة.
لكل من SVG و PNG ميزاتها وعيوبها وهناك قواعد وأسس لاستخدام كل منهما، فلا تستخدم واحدة مكان الأخرى وكن دقيقاً في وضعها بالشكل الأنسب ضمن صفحات موقعك لتحصل على تصميم أنيق.
اقرأ أيضًا
كيف احدد الألوان المناسبة للتصاميم بصورة صحيحة؟
أسهل طريقة لتعرف ما هو الخط المستخدم في أي موقع
ليست هناك تعليقات :
إرسال تعليق