خطوات إبداعية عملية
شعار SVG في الوضع الداكن: اختبر currentColor
قد يختفي شعار مقهى على رأس صفحة داكن رغم وضوحه على فاتورة فاتحة. القرار الأول هو طريقة إدراج SVG: الكود المضمن والصورة الخارجية لا يستقبلان لون الصفحة بالطريقة نفسها.
أنشأنا علامة Cedar Cup خيالية في مساحة ملفات Ciyo واحتفظنا بصفحة HTML يمكنك فتحها. بقي مسار الكوب الوحيد دون تغيير. يختبر المثال تعديل لون محدداً وسلوك المتصفح، ولا يعيد تصميم الهوية أو يدقق موقعاً كاملاً.
احتفظ بأصل SVG دون تعديل
افحص المصدر قبل التعديل وسجّل viewBox وبيانات المسارات والتعبئة الثابتة. قد تحتاج التعبئات والخطوط والأنماط المضمنة المتعددة إلى قرارات منفصلة؛ تغيير سمة واحدة لا ينشئ نظام سمات كاملاً.
للأصل viewBox 0 0 120 100 ومسار واحد بتعبئة #303036. عرض Ciyo معاينة بجانب الكود. تساعد المعاينة على التعرف إلى العلامة، بينما يقدّم مصدر SVG بيانات التعديل الدقيق.
غيّر الطلاء واحفظ الهندسة
في هذه العلامة الأحادية غيّر Ciyo فقط fill="#303036" إلى fill="currentColor". أكدت مقارنة مستقلة بقاء المسار وviewBox متطابقين. الأصل 266 بايت والنسخة المعدلة 271 بايت. هذه أحجام الملفات المحفوظة نفسها.
يستخدم currentColor قيمة لون العنصر. عندما يكون SVG مضمنًا، تستطيع CSS إعطاء القيمة من سياق الصفحة المحيط. اختر اللونين الفاتح والداكن عمداً ولا تعتمد على قيمة افتراضية غير محددة.
احفظ viewBox وكل مسار SVG دون تغيير. أنشئ نسخة منفصلة تستبدل التعبئة الثابتة الوحيدة بـcurrentColor. ابنِ HTML فعلياً يعرض العلامة الثابتة وcurrentColor على خلفيتين فاتحة وداكنة، مع img خارجي للمقارنة. اعرض HTML وافحصه وأبلغ عن التعبئات المحسوبة. أعد SVG القابل للتحرير وملفات HTML.اختبر الخلفيتين في HTML فعلي
تضع الصفحة المحفوظة النسختين الثابتة وcurrentColor على لوحتين متباينتين. في الفاتحة تستخدمان #303036. في الداكنة تستخدم currentColor اللون #FAF6ED ويبقى الأصل فحمياً. تجعل الخلفية الداكنة المشكلة سهلة الرؤية.
فتحنا HTML المحفوظ فعلياً في Chrome وفحصنا تعبئات SVG المضمنة. يتحقق هذا من الكود والأنماط المعروضة في ذلك المتصفح. لا يثبت تباين جميع ألوان العلامة أو التوافق مع كل أداة نشر.
| الخلفية | علامة ثابتة | علامة currentColor |
|---|---|---|
| فاتحة | #303036 | #303036 |
| داكنة | #303036 | #FAF6ED |
احتفظ بصورة خارجية للمقارنة
SVG المحمّل عبر img وثيقة صورة منفصلة. إعلان color في العنصر الأب ليس تعليمة لإعادة تلوين مساراتها الداخلية. يوضح المثال الخارجي هذا الحد. إذا احتاج موقعك ملفات خارجية لكل سمة، فصدّر ألواناً صريحة أو اختر تضميناً مناسباً.
كان في HTML الأول خطأ اقتباس داخل URI بيانات. صحح Ciyo الترميز قبل الفحص النهائي. هذا سبب عملي لفحص الملف المعروض بدل قبول كود يبدو منطقياً فقط.
راجع الصفحة المحفوظة قبل الدمج
افتح العرض أدناه وافحص الخلفيتين، ثم راجع رأس الصفحة الحقيقي بالحجم المقصود. قد يبقى التفصيل الصغير غير واضح رغم صحة اللون تقنياً. افحص التركيز واسم الرابط والنص المتاح منفصلة إن كانت العلامة تفاعلية.
HTML مكتفٍ بذاته ومصدره لا يحتوي سكربتاً. CSS والكود المضمن مثال لمطورك كي يراجعه، وليس تحديثاً تلقائياً للموقع المنشور.
سلّم قاعدة اللون مع الملف
سلّم الأصل غير المعدل وSVG المعدل وHTML المفحوص معاً. وضّح طريقة الإدراج التي اختبرتها واللون المطلوب على كل خلفية. بذلك لا يوضع الملف الصحيح في سياق لا يرث اللون المتوقع.
في هوية متعددة الألوان اتفق أولاً على المناطق التي تبقى ثابتة. ابدأ بعلامة أحادية مضبوطة واحفظ العلاقات اللونية المقصودة بدلاً من تحويل كل طلاء إلى currentColor.
أسئلة عملية
هل يلوّن currentColor صورة img خارجية؟
لون الصفحة الأب لا يدخل وثيقة الصورة SVG تلقائياً. اختبر طريقة الإدراج واستخدم نسخاً صريحة عند الحاجة.
هل أعاد المثال رسم الشعار؟
لا. تغيرت تعبئة واحدة فقط؛ والمسار وviewBox مطابقان للأصل.
هل يكفي لون الوضع الداكن لإمكانية الوصول؟
لا. راجع التباين والحجم والاسم وسلوك الرابط في الواجهة النهائية.
اختبر علامة واحدة على خلفيتين
أحضر SVG معتمداً إلى Ciyo واطلب عرض متصفح محفوظاً قبل تسليم النسخة المعدلة إلى مطور الموقع.