ماهي صور SVG ؟ ومتى تستخدمها ؟

ماهي صور SVG ؟ ومتى تستخدمها ؟

SVG (Scalable Vector Graphics) هي صور ليست كالصور العادية التي تم انشاءها من عدد من المربعات صغيرة (بيكسل) ، بل هي عبارة عن اشكال هندسية ومعادلات رياضية تحدد طريقة ربط تلك الاشكال، ويتم بناء هذه الصور باستخدام لغة الترميز xml ،خاصيتها انها لاتفقد جودتها مهما كبرتها وهذا أمر جد مفيد خاصة عندما تريد بناء تصميم توافقي responsive فمثلا تريد عرض logo الموقع في نسخة ويب بحجم كبير وبحجم صغير في نسخة الجوال فلن تلاحظ فرق بين الصورتين رغم اختلاف حجمهما.

 بعض الاستخدامات

- تستخدم svg ايضا في بناء fonts فكما تعلم أن الخطوط يمكنك تكبيرها وتصغيرها وتغيير لونها كما تشاء فهي في الأصل رسومات svg ،كذلك الأيقونات المستخدمة في الويب مثل fontawsome

- يمكنك تعديل أو إعادة بناء صورة svg أو تغيير نصوص داخلها كما تشاء عن طريق تعديل محتوى ملف xml سواء يدويا أو برمجيا أو عن طريق برامج تصميم

- تستخدم svg في بناء animations وبما انها لاتتأثر بتكبير او تصغير فإنها خيار ممتاز لبناء انيمشن متوافقة مع كل الاحجام ، مثلا loading icon الذي يظهر عند تحميل صفحة ، ويمكنك حتى انشاء انميشن معقدة.

- يتم استخدام svg بكثرة في الويب لانها ليست مثل الصورة العادية في التحميل بل اسرع لأنها تتشكل من ربط للأشكال كما شرحنا ، وهذا اسرع من تحميل الملايين من المربعات الصغيرة بيكسل للصور العادية png/jpg ، لذلك تخيل لديك موقع فيه عديد من صور وتقوم بتغييرها الى svg فإن سرعة تحميلها تزيد بشكل كبير!

اذا لماذا نلجأ لاستخدام الصور العادية في حين توفر كل هذه الامكانيات في svg؟

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

- يمكنك تحويل الصورة العادية الى svg عن طريق مواقع متخصصة بشرط أن تكون الصورة لاتحتوي على ألوان معقدة مثل صورة user avatar تستطيع تحويلها الى svg ثم استخدامها كـ font خاص بك

الخلاصة:

إذا اردت استخدام صور ذات الوان غير معقدة او بناء animation تستخدم svg ، وكذلك اذا اردت بناء font خاص بك او icon font اما اذا كان لديك صور ذات تمثيل لوني عالي معقد وتحتاج دقة فاستخدم امتدادات الصور الاخرى png،jpg ، أو gif في حالة اردت صور متحركة animation