مقدمة لاستخدام الأيقونات المتجهة SVG في الويب

كتبه هبة فريد 11 مارس 2014

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

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

مميزات أيقونات الخطوط Icon Fonts
مميزات أيقونات الخطوط 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 وخصائصها، إذ أنها:

إمكانيات صور 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.

colors-svg
برنامج InkScape هو بديل مجانى لبرنامج ادوبي اليستريتور

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

lab-svg
تحديد المسارات التي تحتوى علي الوان مختلفة

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

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

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

يمكن تقليل حجم الملف باستخدام SVG Optimizer
يمكن تقليل حجم الملف باستخدام SVG Optimizer

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

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

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

1
2
3
4
5
<svg width=”0″ height=”0”>
<g id=”logo”>
/* مسارات الملف */
</g>
</svg>

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

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

1
2
3
< svg height=”400” width=”102”>
<use xlink:href=”#logo”>
</svg>

والآن لنبدأ التحكم في الأيقونة عن طريق 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 كما ترى:

1
<object type=image/svg+xml data=logo.svg class=logo“></object>

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

1
2
3
4
5
6
<svg …>
<style>
/* تضع هنا خيارات تنسيق CSS الخاصة بالأيقونة*/
</style>

</svg>

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

1
<?xml-stylesheet type=text/css href=svg.css ?>

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

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

thenounproject
موقع يوفر ايقونات عالية الجودة وبامتداد SVG من نوع FIlled او Outlined

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

المصدر:

عن كاتب المقال

هبة فريد
مصممة ومطورة مواقع، مستخدمة ومشجعة كبيرة لـ Linux والبرمجيات المفتوحة، مهتمة بمعرفة كل جديد في عالم تطوير الويب، ولدي خبرة في Wordpress وJoomla، أمارس تصميم الجرافيكس ببرنامج Gimp وامارس هواية الرسم المحببة لي في برنامج الرسم المتجهي Inkscape، أؤمن بأن "سأصير يوماً ما أريد".


كل مقالات الكاتب

اترك تعليقك على المقال 6 تعليقات

  • موضوع جميل شكرا لكم
    يمكن الاضافة انه svg لا يدعمه كل المتصفحات , و تدعمه المتصفحات الحديثة
    http://caniuse.com/svg
    كما يوجد مكاتب تسهل العمل على svg التي تتوافق مع المتصفحات الحديثة كذالك مثل Snap.svg.

    شكرا على المواضيع القيمة

  • احس ان الموضوع ذو قيمة كبيرة جدا لكني وقع على لبس في بعض النقاط اتمنى منكم مزيد من الشرح حول الموضوع ولكم جزيل الشكر

  • شكراً لكم على مواكبتكم تطور الويب أول بأول 🙂

    وهذا أيضاً موقع يعتبر مصدر كبير للـ SVG عالية الجودة

    http://fontawesome.io/

  • بالنسبة لمن يواجه مشكلة عدم دعم بعض المتصفحات لل SVG توجد مجموعة من الطرق احداها في حالة استعمال SVG كخلفية :

    .my-element {
    background-image: url(fallback.png);
    background-image: url(image.svg), none;
    }
    في حالة عدم دعم المتصفح لSVG فانه لحسن الحظ لن يدعم كذلك الخلفيات المتعددة ، ولن تظهر الخلفية الثانية التي تشير الى ملف SVG.

  • ممكن كتاب عربى عن تعلم svg من البدايه الى الاحتراف
    اكون شاكر افضالكم

  • http://petercollingridge.appspot.com/svg-editor

    لماذا لا يطلع لي ما كتبته في صورة يطلع لي فقط رجل عجوز

اترك تعليقاً على المقال

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