شبكة الانترنت تتغير بوتيرة سريعة مما كانت عليه في أي وقت مضي . وهذا يشكل تحدياً جديداً للمصممين . وانتشار الشاشات عالية الجودة مثل ” Apple’s Retina” يٌجبر المصممين لاتخاذ خطوة للوراء وتقييم طريقة عمل صور الويب لتجنب الضبابية Blur التي تظهر علي الصور في شاشات HiDPI .

 

 

مقارنة بين الأيقونات الخطية Font Icons والأيقونات المتجهة SVG

 

• الأيقونات الخطية FONT ICONS

الأيقونات الخطية هي ملف خط او مجموعة من ملفات الخطوط تتكون من العديد من الأيقونات تحل مكان الحروف .

 

 

لماذا يجب عليك استخدام الأيقونات الخطية Font Icons [المميزات]

• أول سبب لان ملفات الخطوط حجمها صغير جدا مقارنة بصور PNG أو ملفات XML المعقدة . يمكنك الحصول علي كل أيقوناتك بطلب HTTP واحد .وكلا العاملان يقوما بجعل الصفحات تحمل بشكل أسرع وهذا جيد للسيو ولإرضاء المستخدم (فلا يريد أي شخص الانتظار لتحميل الصفحة).
• يمكنك تنسيقها بنفس طريقة تنسيق أي نص عادي كتغيير اللون والاطارات والظل والحجم باكواد CSS بسيطة بدلا من إنشاء صور متعددة ومعقدة .

يوجد مجموعة كبيرة ومتنوعة من الأيقونات الخطية للاختيار من بينها وادوات لإنشاء أيقوناتك الخاصة.

• FontAwesome 
• Foundation Icons
• Fontello Icon Font Library/Generator

 

عيوب الأيقونات الخطية FONT ICONS

الأيقونات الخطية ليست خالية من العيوب ولكن يوجد بعض السلبيات في الإعتماد عليها لأيقوناتك

• الجانب الأكثر تقييدا في الأيقونات الخطية أنها بلون واحد فلا يمكن تلوينها بأكثر من لون فاذا كنت تحتاج لأيقونة ملونة باكثر من لون أو ايقونة مظللة فانت تحتاج لاستخدام الايقونات المتجهة SVG او PNG .
• عند استخدام الأيقونات الخطية icon fonts ستواجه بعض المشاكل في النصوص التي تعاني منها في متصفحات عديدة .التفاصيل الدقيقة يمكن أن تختفي في بعض المتصفحات عند عرضها بأحجام صغيرة أو عريضة والأيقونات البسيطة يكون لديها تباين أقل في المظهر.
• استخدام الأيقونات الخطية يسبب مشاكل لان استخدام أيقونة في نص لن تمكنك من اضافة خصائص كخاصية نص بديل alt text كما في الصورة . وهذا يسبب مشاكل عند استخدام متصفحات لا تدعم الأيقونات الخطية كمتصفح أوبرا ميني Opera Mini. وتحليل السوق يساعدك في تحديد ما اذا كان هذا مصدر قلق تحتاج إلي معالجته في موقعك أم لا .

 

الأيقونات الخطية FONT ICONS في التأثير

Orbit Media

في موقع  Orbit Media تم استخدام الأيقونات الخطية في كل أيقونات الموقع.

Timepiece

Timepiece تم استخدام الأيقونات الخطية بشكل ذكي لعرض ساعة تناظرية .

CSS Tricks

موقع CSS Tricks لديه صفحة تجريبية حيث يمكنك من تخصيص الأيقونات الخطية وتغيير شكلها وحجمها ولونها .

 

• الأيقونات المتجهة SVG

 SVG هي اختصار لـ Scalable Vector Graphics وقد استخدمت بكثرة في تصميم المواقع الحديثة وهي تقدم شكل جديد من الصور الموجهة للويب. صور SVG قامت بحل الكثير من المشاكل في كل من الويب للجوال والشاشات عالية الدقة.

لماذا تستخدم الأيقونات المتجهة SVG [المميزات]

• الصور المتجهة هي في الواقع ملف XML الذي يتم عرضه في المتصفح ,بدلا من أن يكون خط أو صورة. والأمر متروك للمتصفح لعرض XML والحفاظ علي وضوح الصور في أي حجم. كما يوفر ملف XML امكانية تحريك الصور animate  وتخصيص الصورة باستخدام الكود دون الحاجة إلي محرر رسومات .

• الصور المتجهة SVG لديها ميزة أساسية عن الأيقونات الخطية Font Icons وهي القدرة علي الحصول علي صور متعددة الألوان .ويفضل استخدام لون واحد للأيقونات الصغيرة فهذا أفضل للتصميم. ولكن الأيقونات الكبيرة والأكثر تعقيدا يفضل استخدام أكثر من لون .

 

عيوب الأيقونات المتجهة SVG

• أول عيب أنها غير مجمعة معا وسيكون لديك طلبات HTTP كثيرة علي عكس الأيقونات الخطية FONT ICONS .
• الأيقونات المتجهة SVG حجمها أكبر من الأيقونات الخطية ICON FONTS . وهو أمر يجب تراعيه عند تصميم كل صفحة حيث يزيد وقت تحميل الصفحة وهو عامل مهم جدا للسيو (ناهيك عن نفاذ صبر زوار الموقع).
• الأيقونات المتجهة SVG الناشئة من برامج تحرير الصور الشائعة تحتوي علي أكواد اضافية والتي تقوم بزيادة حجم الملف. ويتطلب القليل من الذكاء لمعرفة ما هو الكود الغير مرغوب به والكود الضروري ولكن للحفاظ علي الملفات صغيرة بقدر الإمكان تحتاج لحذف الأكواد الغير ضرورية.

 

الأيقونات المتجهة SVG في التأثير

Playground

موقع Playground  قام باستخدام الأيقونات SVGs المتجهة وقام بتحريكهم بطريقة رائعة وجميلة .

Font Bureau

Font Bureau موقع يستخدم الأيقونات المتجهة لعرض نماذج للخطوط.

Vox Media

موقع Vox Media قام بعمل رسوم متحركة مذهلة باستخدام SVG .

 

هل قمت باستخدام الأيقونات الخطية Font Icons أو الأيقونات المتجهة SVG في تصميمك؟ أيهما تفضل ولماذا؟