SVG Symbol

بديل لخطوط الأيقونات — استخدام صور SVG المتراكبة الرمزية لتضمين أيقونات قابلة للتوسع ومتعددة الألوان مباشرةً في HTML.

ما هي صور SVG المتراكبة الرمزية؟

تجمع صور SVG المتراكبة الرمزية أيقونات SVG متعددة في ملف واحد. تُعرَّف كل أيقونة داخل عنصر <symbol> بمعرّف id فريد. لاستخدام أيقونة، تُشير إليها بـ<use href="#icon-id">. تُحمَّل الصورة المتراكبة مرة واحدة — إما مضمّنة أو كملف خارجي — وتُصيَّر الأيقونات الفردية في أي مكان في الصفحة.

هذا أسلوب مختلف جذرياً عن خطوط الأيقونات. بدلاً من تعيين نقاط كود Unicode إلى حروف رسومية في الخط، تستخدم عناصر SVG الأصلية. تحتفظ كل أيقونة بقدراتها الكاملة في SVG: ألوان متعددة وتدرجات ومرشحات وخصائص إمكانية وصول دقيقة. المقايضة هي ترميز أكثر تعقيداً قليلاً واصطلاحات تنسيق مقارنةً بالأسلوب CSS الصرف لخطوط الأيقونات.

كيف يعمل

ملف الصورة المتراكبة هو مستند SVG عادي يحتوي على عنصر <symbol> واحد أو أكثر. يُعرّف كل رمز أيقونة مستقلة بـviewBox خاص بها:

icons.svg (ملف الصورة المتراكبة)

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M3 12l9-9 9 9M5 10v10a1 1 0 001 1h3a1 1 0 001-1v-4..."/>
  </symbol>
  <symbol id="icon-search" viewBox="0 0 24 24">
    <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
  </symbol>
</svg>

يُخفى العنصر الخارجي <svg> بـstyle="display:none" كي لا يشغل مساحة في الصفحة. الرموز داخله غير مرئية حتى يُشار إليها. لتصيير أيقونة، استخدم عنصر <use>:

استخدام الرموز في HTML

<svg class="icon"><use href="#icon-home"></use></svg>
<svg class="icon"><use href="#icon-search"></use></svg>

نسّق الأيقونات بـ CSS مستخدماً fill وstroke بدلاً من خاصية color المعتمدة على الخطوط:

CSS لأيقونات SVG

.icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
  stroke: none;
}

يُتيح استخدام fill: currentColor للأيقونة أن ترث لون نص العنصر الأب، مشابهاً لطريقة عمل خطوط الأيقونات مع خاصية color.

الرموز مقابل خطوط الأيقونات

مزايا الرموز

دعم متعدد الألوان — كل مسار يمكن أن يمتلك تعبئته وحده الخاص
كل أيقونة عنصر SVG حقيقي بإمكانية وصول أفضل
لا حاجة لتعيين Unicode — يُشار إلى الأيقونات بأسماء مقروءة
تصيير أحد — لا مشكلات hinting ولا بُقع تحت البكسل
يمكن تحريك الأجزاء الفردية للأيقونة باستقلالية
يعمل مع أي ميزة SVG: تدرجات ومرشحات ومسارات قطع وأقنعة

عيوب الرموز

ترميز أكثر تفصيلاً (<svg><use> مقابل <i class="icon">)
لا يمكن تنسيقه بسهولة بـ CSS color — يتطلب fill/stroke
للصور المتراكبة الخارجية تبعات CORS عند التحميل عبر مصادر مختلفة
إجمالي حجم الملف أكبر من تنسيقات الخطوط المضغوطة
وزن HTML أكبر عند كل استخدام للأيقونة
لا دعم لعناصر زائفة ::before/::after

استراتيجيات التحميل

هناك ثلاثة طرق رئيسية لتحميل صورة SVG المتراكبة الرمزية في صفحة، لكل منها مقايضات مختلفة:

الصورة المتراكبة المضمّنة

الصق SVG الكامل للصورة المتراكبة مباشرةً في عنصر HTML <body>. إنه أبسط أسلوب — لا مشكلات CORS ولا طلب HTTP إضافي. الرموز متاحة فوراً لأي مرجع <use> في الصفحة. الأنسب للتطبيقات ذات الصفحة الواحدة أو مجموعات الأيقونات الصغيرة (أقل من ~50 أيقونة).

الصورة المتراكبة الخارجية

حمّل الصورة المتراكبة كملف خارجي عبر <use href="icons.svg#home">. يُبقي هذا HTML نظيفاً ويتيح للمتصفح تخزين الصورة المتراكبة مؤقتاً بصورة منفصلة عن الصفحة. إلا أنه له تبعات CORS: يجب تقديم الصورة المتراكبة من المصدر ذاته، أو يجب أن يضبط الخادم رؤوس Access-Control-Allow-Origin المناسبة. لاحظ أن Internet Explorer لا يدعم مراجع <use> الخارجية — استخدم polyfill svg4everybody إذا احتجت دعم IE.

الحقن عبر JS

حمّل ملف الصورة المتراكبة عبر fetch() وأدرجه في DOM وقت التشغيل. يجمع هذا قابلية التخزين المؤقت للصور المتراكبة الخارجية مع موثوقية الصور المتراكبة المضمّنة — يصبح SVG المُدرَج جزءاً من المستند، لذا تعمل مراجع <use> بلا قيود CORS. يُولّد Bobcorn هذا الأسلوب: ملف JS يجلب جميع الرموز ويسجّلها عند تحميله.

أسلوب الحقن عبر JS (مخرجات Bobcorn)

<!-- تحميل صورة JS المتراكبة المُولَّدة -->
<script src="icons-symbol.js"></script>

<!-- ثم الاستخدام بصورة طبيعية: -->
<svg class="icon"><use href="#icon-home"></use></svg>
<svg class="icon"><use href="#icon-search"></use></svg>

يُنشئ ملف JS عنصر <svg> مخفياً يحتوي على جميع تعريفات <symbol> ويُلحقه بجسم المستند. بعد التحميل، يُشار إلى الأيقونات بالطريقة ذاتها كأسلوب المضمّن.

متى تستخدم رموز SVG

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

الأيقونات متعددة الألوان — حين تستخدم الأيقونات أكثر من لون واحد أو تدرجات أو تعبئات معقدة لا يستطيع خط بحرف رسومي واحد تمثيلها
إمكانية الوصول أولوية قصوى — يمكن أن تتضمن كل أيقونة عنصر <title> وخاصية aria-label، مما يمنح قارئات الشاشة أوصافاً ذات معنى
أجزاء الأيقونة المتحركة — تحتاج إلى تحريك مسارات أو مجموعات فردية داخل أيقونة (مثل ترس دوّار داخل أيقونة الإعدادات)
المشاريع الكثيفة في SVG — تطبيقك يستخدم بالفعل SVG المضمّن على نطاق واسع، لذا تتلاءم الرموز بشكل طبيعي مع البنية الموجودة
أقصى حدة تصيير — يمكن أن يُسبّب hinting الخط مشكلات محاذاة في الأحجام الصغيرة؛ تُصيَّر رموز SVG بدقة بكسل كاملة في أي بُعد

متى تلتزم بخطوط الأيقونات

تبقى خطوط الأيقونات الخيار الأفضل في عدة سيناريوهات شائعة:

مجموعات الأيقونات الكبيرة (200+) — ملف خط WOFF2 مضغوط أصغر بكثير من صورة SVG متراكبة بالعدد ذاته من الأيقونات
جميع الأيقونات أحادية اللون — إذا كانت كل أيقونة بلون واحد، توفر خطوط الأيقونات أبسط تكامل بلا مقايضات
التكامل بـ CSS فقط — تتطلب خطوط الأيقونات رابط ورقة أنماط وفئات CSS فحسب، دون JavaScript أو ترميز إضافي
الأنظمة القديمة — المشاريع التي تستخدم خطوط الأيقونات بالفعل لا تستفيد بما يكفي من التبديل لتبرير جهد الترحيل
دعم العناصر الزائفة — تحتاج إلى أيقونات في العناصر الزائفة ::before أو ::after التي تعمل فقط مع حروف الخطوط الرسومية

في Bobcorn

يستطيع Bobcorn تصدير أيقوناتك كملف صورة JS متراكبة رمزية إلى جانب ملفات الخطوط. فعّل خيار JS في مربع حوار التصدير. يُنشئ الملف المُولَّد صورة SVG متراكبة مضمّنة ويسجّل جميع الرموز عند التحميل. يمكنك استخدام كلا الأسلوبين في المشروع ذاته — الخطوط لأيقونات واجهة المستخدم البسيطة، والرموز للرسوم التوضيحية الملونة المعقدة.

نصيحة

لا تضطر إلى الاختيار بين الاثنين. تستخدم أنظمة التصميم الكثيرة خطوط الأيقونات لمعظم أيقونات واجهة المستخدم الأحادية اللون (الأزرار والتنقل وعناصر النماذج) ورموز SVG لحفنة من الرسوم التوضيحية متعددة الألوان أو الأيقونات المتحركة. يُتيح مربع حوار تصدير Bobcorn توليد كليهما في تصدير واحد.