PNG مقابل SVG.

النقطية مقابل vector.

في الغالب الفرق الأساسي بين ملفات PNG وSVG هو أن أحدهما نوع ملف نقطي والآخر vector.

ملف PNG هو تنسيق صورة نقطي؛ أي أنه يستند إلى البكسل. وعند تكبير صورة نقطية إلى درجة كبيرة جدًا، تصبح محببة ومبكسلة. وبالمثل، إذا كانت الصورة صغيرة جدًا، يمكن أن تصبح غير واضحة. بينما تستطيع ملفات PNG التعامل مع الدقة المرتفعة جدًا، إلا أنه لا يمكن تمديدها بدرجة لا نهائية.

وعلى الجانب الآخر، تستند ملفات SVG إلى vector؛ فلقد تم تصميمها باستخدام شبكة رياضية معقدة تتألف من الخطوط والنقاط والأشكال والخوارزميات. يمكن تمديدها إلى أي حجم دون فقد دقتها.

اكتشاف المزيد حول الملفات النقطية مقابل Vector

أحجام الملفات.

في الغالب تكون أحجام ملفات PNG كبيرة حتى تستطيع التعامل مع الدقة المرتفعة. وحجمها يعني أنها تستغرق فترة أطول للمعالجة والمشاركة والحفظ والفتح. بالإضافة إلى أنها قد تعمل على إبطاء أوقات تحميل الصفحة

ولهذا تعتبر ملفات JPEG أكثر شيوعًا في التصوير الفوتوغرافي عبر الإنترنت. وعلى الرغم من هذا، هناك نوع PNG أصغر 8 بت، إلا أنه لا يدعم سوى 256 لونًا.

تعتبر ملفات SVG أصغر بكثير من ملفات PNG، ولا تؤدي إلى إبطاء سرعة جهاز الكمبيوتر أو موقع الويب الذي تعمل عليه. (على الرغم من هذا، قد تؤدي التصميمات ذات التفاصيل الكثيرة إلى إبطاء سرعة ملف SVG.) نظرًا لأنه تنسيق ملف vector، يمكنك زيادة حجم ملفات SVG أو تقليله دون فقد في الجودة.

الضغط.

تقدم ملفات SVG ضغطًا غير مُهدر للبيانات

مما يعني أنه يمكن ضغطها إلى أحجام ملفات أصغر دون تأثير في تعريفها أو تفاصيلها أو جودتها.

كما تستفيد ملفات PNG من الضغط غير المُهدر للبيانات بنسبة 5-20%، مما يمكن أن يساعد في التعويض عن حجم الملف الكبير الذي تتسم به. وعلى الرغم من هذا، لا تزال تعتبر أكبر من ملفات SVG.

تصوير فوتوغرافي.

لا تعتبر ملفات PNG اختيارًا شائعًا لصور الويب، كما ذكرنا آنفًا. وعلى الرغم من هذا، يمكنها التعامل مع الصور الرقمية ذات التفاصيل الكثيرة والجودة المرتفعة للطباعة والتحرير وغيرها من الأغراض. فهي تنسيق ملف شائع في Adobe Photoshop.

وعلى الجانب الآخر، فإن ملفات SVG لا تستخدم البكسلات ؛ ولهذا فإنها تكافح لعرض الصور الفوتوغرافية وفقًا لمعايير مرتفعة.

استخدام الويب.

تستطيع كلا ملفات PNG وSVG عرض مستويات معقدة من التفاصيل لرسومات الويب والرسوم التوضيحية والشعارات ومخططات المعلومات والجداول.

وعلى الرغم من هذا، تتسم ملفات SVG بميزة أساسية وذلك بفضل لغة برمجتها XML. وهذا يعني أن كل ملف SVG يظهر على الشاشة مكتوب باستخدام النص، بدلاً من التعليمات البرمجية. ونتيجة لذلك، تستطيع أدوات قراءة الشاشة ومحركات البحث تحليلها؛ وبهذا تعتبر رائعة لأغراض إمكانية الوصول وتحسين محركات البحث.

ملفات SVG أيضًا تكون أصغر في الغالب، مما يجعل تحميلها على الصفحة أسرع. تعتبر أوقات تحميل الصفحة عنصرًا هامًا آخر لتصنيفات محركات البحث.

تدعم ملفات PNG أيضًا الرسومات المستندة إلى النص ؛ لكن ليس بنفس القدر.

التوافق التعقد.

تعتبر ملفات SVG أنواع ملفات أكثر تقدمًا من ملفات PNG، إلا أنها غير متوافقة حقًا مع كل مستعرض ونظام تشغيل. بالإضافة إلى هذا، فإن لغة برمجتها وتراكبها المستند إلى vector قد يكون غير مألوف لدى المستخدمين الجُدد ومخيفًا بالنسبة لهم.

وعلى الجانب الآخر، فإن ملفات PNG تعتبر تنسيقات قياسية عبر الإنترنت تحصل على دعم كبير من مستعرضات الويب وأنظمة التشغيل.

الرسوم المتحركة.

ملفات PNG لا تدعم الرسوم المتحركة؛ وذلك على عكس ملفات الصور المشابهة المستندة إلى النقاط، وهي ملفات GIF.

لا تدعم ملفات SVG الرسوم المتحركة، ولكي ليس بنفس القدر في أنواع الملفات الأخرى مثل تنسيق AI الأصلي في Adobe Illustrator.

معرفة المزيد حول ملفات AI

الشفافية.

تدعم ملفات PNG وSVG الشفافية

وبهذا يعتبر كلاهما اختيارًا رائعًا للرسومات والشعارات عبر الإنترنت.

من الجدير بالذكر أن ملفات PNG أفضل اختيار للملفات الشفافة المستندة إلى النقاط. إذا كنت تعمل على بكسلات وشفافية، تعتبر ملفات PNG خيارًا أفضل من SVG.

1. افتح Adobe Illustrator.
2. انقر فوق File (ملف) > Open (فتح) وحدد الصورة من جهاز الكمبيوتر لديك.
3. انقر فوق Open (فتح).
4. انقر فوق الخيار Trace (تتبع) من القائمة العلوية وحدد Image Trace (تتبع الصورة).
5. اضبط التحويل وفقًا لمواصفاتك الخاصة ؛ قد يشمل هذا تغيير اللون.
6. بعد اكتمال العملية، حدد الصورة التي يتم تتبعها وانقر فوق Ungroup (إلغاء التجميع). سيؤدي هذا إلى فصل أشكال اللون.
7. انقر فوق File (ملف) > Export (تصدير).
8. احفظ الملف بتنسيق SVG.

1. افتح Adobe Photoshop.
2. انقر فوق File (ملف) > Open (فتح).
3. حدد ملف SVG من جهاز الكمبيوتر لديك.
4. انقر فوق Export (تصدير) > Export As (تصدير بتنسيق) > PNG.
5. احفظ الملف بتنسيق PNG.