Ahmed Atoui 🇩🇿🇸🇦
Ahmed Atoui 🇩🇿🇸🇦

@ahmedatouii

9 تغريدة 158 قراءة Sep 12, 2019
تسمع عن صور Svg فما هي ؟ ومتى تستخدمها ؟
SVG (Scalable Vector Graphics)
هي صور ليست كالصور العادية التي تم انشاءها من عدد من المربعات صغيرة(بيكسل) بل هي عبارة عن اشكال هندسية ومعادلات رياضية تحدد طريقة ربط تلك الاشكال ويتم بناء هذه الصور باستخدام لغة الترميز xml خاصيتها انها..?
لاتفقد جودتها مهما كبرتها وهذا أمر جد مفيد خاصة عندما تريد بناء تصميم توافقي responsive فمثلا تريد عرض logo الموقع في نسخة ويب بحجم كبير وبحجم صغير في نسخة الجوال فلن تلاحظ فرق بين الصورتين رغم اختلاف حجمهما
بعض الاستخدامات:
- تستخدم svg ايضا في بناء fonts فكما تعلم ان الخطوط..?
يمكنك تكبيرها وتصغيرها وتغيير لونها كما تشاء فهي في الاصل رسومات svg ،كذلك الايقونات المستخدمة في الويب مثل @fontawesome
- يمكنك تعديل او اعادة بناء صورة 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..?
ارجوا ان اكون قد اوصلت لكم الفكرة ?
هل كان الشرح واضح ؟
#تطوير_الويب
#مفاهيم_برمجية

جاري تحميل الاقتراحات...