SVG Icons vs Icon Fonts: الفروقات الأساسية
تبدو الأيقونات غالبا كأنها تفصيل صغير في التنفيذ إلى أن تبدأ في التأثير على سهولة الوصول وجودة العرض وحجم الحزمة وسير عمل التصميم. لهذا السبب ما زال القرار بين SVG و icon font مهما. كلتا الطريقتين يمكن أن تنجحا، لكن كل واحدة منهما تحل مشكلة مختلفة وتتعطل بطريقة مختلفة.
إذا كنت تبني واجهة حديثة اليوم، فعادة ما يكون SVG هو الخيار الأقوى بشكل افتراضي. فهو يمنحك تحكما أكبر في الدلالة والأسلوب وسلوك fallback. ومع ذلك، ما زالت icon fonts موجودة في كثير من قواعد الشفرة المستخدمة في الإنتاج، خصوصا في أنظمة التصميم الأقدم والمشاريع التي نمت حول مكتبات مثل Font Awesome. السؤال المهم ليس أي تنسيق هو الأكثر انتشارا. السؤال الأهم هو أيهما يناسب العمل فعلا من دون خلق احتكاك للمستخدمين أو للفريق الذي سيحافظ عليه.
ما هو icon font وكيف يختلف عن SVG
icon font هو ملف خطوط يتم فيه استبدال الحروف برموز. وبدلا من أن يتعامل المتصفح مع الأيقونة على أنها صورة أو جزء من SVG markup، فإنه يتعامل معها كنص. يمكن ربط glyph بحرف Unicode أو private-use code point ثم إدراجه عبر CSS أو markup.
هذا السلوك الشبيه بالنص هو الفرق الأساسي عن SVG. أيقونة SVG هي vector markup تحتوي على shape و path و viewBox وسمات يمكن للمتصفح فحصها مباشرة. يمكنك تضمينها inline داخل HTML أو تحميلها كـ sprite أو الإشارة إليها كملف خارجي. وبما أنها markup، فمن الأسهل تسميتها بشكل صحيح، وإخفاؤها عندما تكون زخرفية، وتنسيقها بدقة.
أصبحت icon fonts شائعة لأن ملف خط واحدا كان يمكنه احتواء عدد كبير من الأيقونات، ولأن المطورين كانوا يعرفون بالفعل كيف يضبطون حجم النص ولونه. لكن المقابل هو أن الخطوط تجلب معها مشاكل تحميل الخطوط ومشاكل fallback وحالات الوصول الطرفية التي لا تؤثر في SVG بالطريقة نفسها.
كيفية إضافة SVG icons من دون استخدام font library
لا تحتاج إلى font library لاستخدام SVG icons في موقع ويب. أبسط خيار هو inline SVG. ضع SVG مباشرة داخل HTML في المكان الذي تحتاج فيه إلى الأيقونة، ثم قم بتنسيقه باستخدام CSS. هذا يناسب الشعارات والأزرار والتنقل وأي أيقونة تحتاج إلى تنسيق يعتمد على الحالة.
خيار شائع آخر هو SVG sprite. في هذا الإعداد، تعيش عدة أيقونات داخل ملف sprite واحد على شكل symbols، ثم تتم الإشارة إلى كل أيقونة من markup في المكان المطلوب. هذا يقلل التكرار عندما تظهر الأيقونات نفسها في أنحاء المنتج. وبالنسبة للمشاريع الصغيرة، قد تكون SVG files المنفصلة كافية أيضا.
يمكن للمصممين تصدير الأيقونات، ويمكن للمطورين تحسينها، ثم يمكن استخدام الملفات داخل component مثل أي asset آخر. وإذا كنت تحتاج إلى نقطة بداية، فيمكنك download free SVG icons واستخدامها inline أو ضمن sprite من دون بناء font pipeline أولا.
التحول المهم هنا هو تحول مفاهيمي. عند استخدام SVG فأنت تعمل مع graphic markup. أما مع icon font فأنت تعمل حول فكرة أن الرسومات تعامل كنص. وهذا الفرق يشكل كل ما يأتي بعده.
SVG icons vs icon fonts من حيث الأداء وحجم الملفات
لسنوات طويلة، كانت الفكرة التسويقية وراء icon fonts بسيطة. طلب واحد يمكنه أن يجلب عددا كبيرا من الأيقونات. كان ذلك مفيدا عندما كان HTTP overhead مشكلة أكبر وعندما كانت أدوات SVG أقل نضجا. أما اليوم فالمقارنة في الأداء لم تعد بهذا الوضوح.
قد يكون SVG أخف لأنك لا ترسل إلا الأيقونات التي تستخدمها فعلا. يضيف inline SVG بعض markup إلى الصفحة، لكنه يزيل تحميل الخطوط ويتجنب تأخر العرض المرتبط بـ custom fonts. كما يمكن أن يكون SVG sprite فعالا عندما تظهر مجموعة الأيقونات نفسها عبر صفحات كثيرة. عمليا، تعتمد الفروق في الحجم بين SVG sprite و icon font file على عدد الأيقونات وتعقيد path ومدى قوة تحسين assets. لا يوجد فائز دائم إذا نظرنا فقط إلى عدد البايتات.
ما يكون أكثر أهمية عادة هو السلوك. إذا تأخر تحميل icon font أو فشل، فقد يرى المستخدمون glyph مفقودة أو fallback characters أو تحركات في layout. يتجنب SVG هذا النوع المحدد من الإخفاق. كما أنه يظل حادا في أي حجم من دون تنازلات hinting التي قد تضيفها الخطوط أحيانا. في عمل واجهات الاستخدام، تكون هذه الموثوقية غالبا أهم من توفير بضعة kilobytes في asset file واحدة.
سهولة الوصول و screen readers وتجاوزات الخطوط
هذا هو الجزء الذي يغير التوصية بالنسبة إلى كثير من الفرق. تتعامل screen readers مع SVG و icon fonts بشكل مختلف لأن المتصفح نفسه يراهما بشكل مختلف.
مع SVG يمكنك أن تحدد ما إذا كانت الأيقونة زخرفية أو ذات معنى. يمكن إخفاء الأيقونات الزخرفية باستخدام aria-hidden="true". ويمكن تسمية الأيقونات المعلوماتية بشكل مضبوط أو إقرانها بنص ظاهر. وهذا يجعل accessible name أكثر قابلية للتوقع.
تحتاج icon fonts إلى عناية أكبر. فـ glyph التي يتم حقنها باستخدام CSS generated content قد تعلنها assistive technology إذا لم يتم إخفاؤها بشكل صحيح. وإذا كانت الأيقونة مرتبطة بـ private Unicode value، فقد يحاول screen reader قراءة شيء غير متوقع. وهذا أحد الأسباب التي تجعل كثيرا من الفرق التي تركز على سهولة الوصول تفضل SVG لأيقونات الواجهة.
كما أن تجاوزات الخطوط مهمة أيضا. بعض المستخدمين، بمن فيهم أشخاص لديهم عسر قراءة، يثبتون خطوطا مخصصة للقراءة أو يعتمدون على إعدادات المتصفح والإضافات التي تغير الطباعة. إذا كانت أيقوناتك تعتمد على وجود custom font وعدم العبث بها، فقد تؤدي هذه التجاوزات إلى كسرها أو استبدالها بـ glyph بلا معنى. SVG أكثر صمودا هنا لأنه لا يعتمد على خط النص في الصفحة أصلا.
استخدام النظامين معا ومعرفة وقت الانتقال
يمكن أن تعيش SVG icons و icon fonts معا داخل المشروع نفسه. وهذا أمر شائع أثناء الانتقال. فقد يحتفظ منتج ناضج بـ icon font الحالية داخل legacy templates بينما تستخدم components الجديدة inline SVG أو SVG sprite. وغالبا ما تكون هذه المرحلة الهجينة هي الطريق الأكثر أمانا لأنها تتجنب استبدالا خطيرا للواجهة كاملة دفعة واحدة.
ويأتي الوقت المناسب للانتقال من icon font مثل Font Awesome إلى inline SVG عادة عندما تستمر أخطاء سهولة الوصول في الظهور، أو يحتاج المصممون إلى تحكم بصري أدق، أو يكون الفريق بالفعل بصدد تحديث design system. كما أن SVG يناسب سير عمل التصميم الحديث بشكل أكثر طبيعية. فكثيرا ما يستخدم المصممون SVG assets داخل Figma كعناصر من الدرجة الأولى، ثم يسلمون المتجهات نفسها إلى فريق engineering من أجل التحسين والتنفيذ. وإذا كان المنتج ما يزال يستخدم web icon font، فعادة ما تحافظ الفرق على سير عمل مزدوج مؤقت يجمع بين SVG في ملفات التصميم و font classes في الشاشات الأقدم. يمكن إدارة ذلك لفترة، لكنه يميل إلى خلق انحراف في التسمية ومشكلات في versioning.
إذا كنت تحتاج إلى كتالوج واسع من أجل prototyping أو البناء الفعلي، فإن line-style icons for your project يسهل تكييفها مع سير عمل يعتمد على inline SVG أو sprite.
ملاحظة أخيرة حول Font Awesome. النسخة المجانية منه مستخدمة على نطاق واسع في المشاريع التجارية، لكن الإجابة الدقيقة تعتمد على package و license المرتبطين بالأصول المحددة التي تستخدمها. تحقق من شروط الترخيص الحالية للإصدار ولمجموعة الأيقونات في stack لديك قبل أن تعتمدها كمعيار.
الخلاصة المختصرة بسيطة. لقد حلت icon fonts مشكلة حقيقية في توزيع الأصول على الويب، لكن SVG يناسب بشكل أفضل الطريقة التي تصمم بها الفرق الواجهات وتبنيها اليوم. فهو يمنحك دلالة أنظف، وفخاخا أقل في سهولة الوصول، وسير عمل أكثر مرونة من Figma إلى production.