لماذا استخدام ملفات SVG بدلا من JPG

مزايا SVG

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

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

SVG هي تكنولوجيا المتجهات

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

SVG يستند إلى نص

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

هو SVG XML ويعمل ضمن تنسيقات لغة أخرى

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

يتم تحرير SVG بسهولة

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

صور JPG يمكن أن تكون ثقيلة

إذا كنت تريد أن تنمو صورتك بالحجم الفعلي ، فسيزيد حجمها أيضًا. مع SVG ، لا يزال الباوند رطلًا مهما كان حجمه. يزن المربع الذي يبلغ عرضه 2 بوصة نفس المربع الذي يبلغ عرضه 100 بوصة. لا يتغير حجم الملف ، وهو ممتاز من وجهة نظر أداء الصفحة!

إذن أيهما أفضل؟

فما هو الشكل الأفضل - SVG أو JPG؟ هذا يعتمد على الصورة نفسها. هذا مثل سؤال "ما هو أفضل ، مطرقة أو مفك؟" ذلك يعتمد على ما تحتاج لإنجازه! وينطبق الشيء نفسه على تنسيقات الصور هذه. إذا كنت بحاجة إلى عرض صورة ، فإن JPG هي أفضل خيار لك. إذا كنت تضيف رمزًا ، فمن المحتمل أن يكون SVG خيارًا أفضل. يمكنك معرفة المزيد حول الوقت المناسب لاستخدام ملفات SVG هنا .

المقالة الأصلية لجنيفر كرينين. حرره جيرمي جيرارد في 6/6/17