الإهتمام بسرعة وخفة الموقع من إحدى أهم واجبات مصمم/مطور الويب، لاسيما في ظروف شبكة الانترنت السيئة والزيادة في استخدام الهواتف الذكية والحواسيب اللوحية في التصفح، ومن إحدى العناصر التي تبرز هنا، الأيقونات Icons، كم عدد المرات التي تحتاج فيها أن تغير لون وحجم الأيقونات التي تستخدمها في التصميم في الحالات المختلفة؟ مثلاً تغيير لون الايقونة في حالة “الهوفر”، مما يعني انك ستحتاج إلى صور إضافية -مساحة اضافية- لتمثل الحالات المختلفة للأيقونات التي تستخدمها في التصميم، من ثم يتم استدعاء ملفي صور على الأقل لكل أيقونة ( الحالة العادية وحالة الـ Hover )، وقد يختلف الأمر أيضاً عندما تحتاج إلى عدد من الأحجام المختلفة لكل أيقونة. الخلاصة، تستهلك “الأيقونات النقطية Raster Icons” مساحة أكبر وعدد أكثر من استدعاءات الملفات HTTP Requests، وهو أمر لا نفضله على الإطلاق.

لحل هذه المشكلة ظهرت “أيقونات الخطوط Icon Fonts”، وهي عبارة عن خط تم استبدال الحروف فية برموز أيقونية، وبالتالي يمكن اخضاعها لعدد من تأثيرات ال CSS مثل تكبير الحجم وتغير اللون وخلافه، ويمكن إجمالاً جمع مميزات أيقونات الخطوط Icon Fonts في:-

• سهولة ضغطها بنسبة قد تصل إلى ٩٥٪ نظراً لأنها تتكون من نصوص.
• سهولة التحكم في لونها وحجمها دون الإضرار بالجودة أو المساحة عن طريق CSS.
• تقليل استدعاءات الملفات HTTP Requests لأن كل “الايقونات/الحروف” مجمّعة في ملف واحد.
• دعم المتصفحات القديمة (Internet Explorer 6 كمثال).

لكن لا يخلو الأمر من بعض السلبيات، مثل:

• ثبات الأيقونات، أي عدم إمكانية إضافة تأثيرات الحركة عليها.
• عدم إمكانية تلوين التفاصيل بألوان مختلفة (تتلون الأيقونة كلها بنفس اللون).
• إنحصار التأثيرات المتاحة للأيقونات في تأثيرات النصوص فقط (تظليل النص Text shadow على سبيل المثال).

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

SVG هي اختصار لـ Scalable Vector Graphics بمعنى رسومات المتجهة/فيكتور القابلة لإعادة التحجيم، والتي تتميز بكل مميزات الصور المتجهه Vector التي ترسمها على Adobe Illustrator، أفضل وصف قرأته للصور من نوع SVG هو ما جاء علي احدى مقالات موقع جريدة الرياض:

الصور من نوع SVG تسمح للمستخدم بتكبير الصور أو تصغيرها zooming دون فقدان أي تفصيل من تفاصيل الصور. ومن فوائد الصور SVG الأخرى، مقارنة بالصور من نوع GIF مثلا، هي أن لوحة الألوان palette لها تدعم عرض 16مليون لون، مع دعم كامل لسجلات الألوان color profiles (وذلك لضمان ظهور الألوان كما هي عند استعراضها باستخدام أدوات، أو متصفحات مختلفة).

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

يمكننا استخدام SVG على شبكة الإنترنت بسهولة جدا، ولكن هناك بعض الامور التي يجب أن نعرفها أولاً، دعونا نلخص إمكانيات صور SVG وخصائصها، إذ أنها:

• سهلة التحكم في حجمها ولون تفاصيلها دون الإضرار بالجودة عن طريق CSS.
• تتميز بالعرض الواضح الثابت عبر جميع المتصفحات وأنظمة التشغيل الداعمة لها.
• لها مجال واسع من التأثيرات SVG Filter Effects.

وهي مدعومة في جميع المتصفحات تقريباً ما عدا Internet Explorer 8 وAndroid 2.3 والإصدارات السابقة لهما، في هذه الحالة يمكن استخدام أداة SVGeezy.js التي تستبدل صور SVG غير المدعومة بصور PNG مماثلة لها في الحجم والألوان.

كيف تستخدم صور SVG كأيقونات والتحكم بها

يمكن إضافة SVG كصورة عن طريق وسم <img>

1
<img src="logo.svg" alt="" />

أو كوضعها صورة خلفية في تنسيق CSS

1
2
3
.logo{

background-img:url('logo.svg') ;

}

لكن ستتم معاملتها في هذه الحالة كأي صورة عادية ولن نستطيع التحكم في تفاصيلها عن طريق CSS وهو ما نريده هنا.

اضافة صور SVG بالطريقة الصحيحة

سنضيف أيقونات SVG بشكل نصي/كود في وسم ضمن نص HTML، وسنأخذ هنا أيقونة معمل ألوان التي أعددتها سريعاً في برنامج Inkscape وهو البديل مفتوح المصدر لبرنامج Adobe Illustrator.

كما تلاحظون، فإن الأيقونة تتكون من مسارين Paths مسار يكوّن كلمة “معمل” مع نقطة النون وقد أعطيته الاسم “lab”، ومسار يكوّن كلمة “ألوان” باسم “colors”، سيتضح لاحقاً أهمية تسمية المسارات، ثم حفظت الملف باسم logo.svg

الآن نفتح ملف logo.svg بأي برنامج نصي بسيط (مثل Notepad)، وفي حالتنا هذه سيكون الملف كما يلي:-

See the Pen Avygc by Heba (@HebaF) on CodePen.0

هناك العديد من النصوص والبيانات الوصفية metadata التي تتبع البرنامج غير مطلوبة وتأخذ حيزاً في الملف مما يزيد من حجمه، وحل ذلك هو باستخدام SVG Optimizer (يمكنك استخدام نسخة جافاسكريبت من التطبيق، وهي ما أنصح بها)، قم بتنفيذ الإعدادات الموضحة في الصورة، ستلاحظ أن حجم الملف تقلص إلى 4.3 كيلوبايت (أي حوالي 46.5٪ من الحجم الأصلي) وذلك دون الإخلال بالجودة.

وأصبح نص ملف SVG كالتالي:

See the Pen hDLoI by Heba (@HebaF) on CodePen.0

ستجد وسمين باسم path وكلاً منهما لهما id وهو الذي عرفناه مسبقاً في البرنامج، ليساعدنا على تمييز المسارين.
نعود إلى ملف HTML المراد إضافة الأيقونات إليه، ونضيف نص ملف SVG السابق ذكره مباشرة بعد بداية وسم Body، مع تغيير الطول والعرض إلى صفر، وضم المسارين في مجموعة واحدة عن طريق إضافة وسم <g> مع إضافة “id=”logo إليه.

يتم استخدام وسم <g> مع الصور من امتداد SVG، ومهمته تجميع اشكال الـ SVG معا بحيث يمكنك التعامل معها كما لو كانت شكل واحد.

وذلك كي نستطيع تكرار استدعاء الأيقونة في أي مكان من ملف HTML دون الحاجة إلى نسخ النص الطويل مجدداً، عن طريق استخدام وسم use وتعيين xlink:href إلى مجموعة Icon:

والآن لنبدأ التحكم في الأيقونة عن طريق CSS، لنختر لون كلمتي معمل وألوان، وذلك عن طريق Fill، ويمكنك تعيين لون إطار عن طريق Stroke كما ترى:

See the Pen avlkE by Heba (@HebaF) on CodePen.0

تتمتع ملفات SVG بميزة التأثيرات SVG filter effects، مثل الظل الساقط Drop Shadow، والظل الداخلي Inset Shadow وما إلى ذلك من التأثيرات المختلفة التي تدعمها W3C.

ﻹضافة التأثير، مثل تأثير الظل مثلاً، أولاً تتم إضافة اختيارات التأثير ونوعه قبل نهاية وسم svg في أول استدعاء لملف SVG، ثم إضافة وسم <g> مع filter=”اسم التأثير المطلوب إضافته” في الاستدعاء الثاني كما ترى في الأمثلة:

تأثير Drop Shadow

See the Pen krAJz by Heba (@HebaF) on CodePen.0

تأثير Inset Shadow

See the Pen mcgEz by Heba (@HebaF) on CodePen.0

يمكن استدعاء الأيقونة مرات متعددة وتغيير أشكالها كما ترى:

See the Pen AEiHD by Heba (@HebaF) on CodePen.0

عيوب طريقة لصق كود SVG مباشرة في HTML

ولكن من عيوب هذه الطريقة في استدعاء SVG (أي نسخ نص ملف SVG إلى داخل HTML) أنها لا تخزن في الذاكرة المخبئة Cache، بالرغم من أنها لا تحتاج أي استدعاءات للملفات HTTP Requests، يمكنك استدعاء ملف SVG عن طريق وسم object مع الحفاظ على إمكانية التحكم في الأيقونة عن طريق CSS كما ترى:

هذه طريقة تساعد على تخزين الملفات بدعم أكبر ولكن سيتعين عليك إما وضع خيارات CSS المتعلقة بالأيقونة داخل ملف SVG النصي نفسه:

أو إضافة هذا السطر إلى ملف SVG لربطه بملف CSS خارجي:

مصادر لأيقونات SVG عالية الجودة

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

في النهاية، تجد أن كل نوع من الأيقونات (رسوم نقطية Raster | نصية Font | رسوم متجهة SVG) له عدد من الإيجابيات والسلبيات، وربما تجد حيرة في معرفة أيهم الأفضل، لا يوجد نوع أفضل من الآخر، والقرار هنا يعتمد على حاجة موقعك، فما يناسب موقعاً قد لا يناسب الآخر، وهذه هي المهمة الأساسية لمطوري\مصممي الويب، معرفة أفضل ما يحقق هدف الموقع ويحسن تجربة المستخدم.

المصدر:

• using SVG | CSS Tricks
• SVG icons FTW | codedrops