نظرة عامة أساسية حول كيفية إنشاء رمز مفضّل تكيُّفي
في هذه المشاركة، أود مشاركة الأفكار حول كيفية إنشاء رمز مفضّل تكيُّفي باستخدام رسومات موجّهة يمكن تغيير حجمها (SVG). ننصحك بتجربة العرض التوضيحي.
في ما يلي إصدار YouTube من هذه المشاركة إذا كنت تفضّل الفيديوهات:
نظرة عامة
يُعد الرمز المفضّل المخصّص
طريقة رائعة لتحسين مشروع الويب. ويتم عرضه في علامات تبويب المتصفّح المتوافق مع أجهزة الكمبيوتر المكتبي، وضمن
القرّاء الذين يستخدمون خيار "الحفظ لوقت لاحق"، ومشاركات المدوّنة الأخرى التي تتضمّن روابط تؤدي إلى موقعك الإلكتروني،
وغير ذلك. يتم ذلك عادةً باستخدام نوع الملف .ico، إلا أنّ المتصفحات مؤخرًا أتاحت استخدام تنسيق SVG المتّجهي. باستخدام
التحسين
التقدمي،
يمكنك عرض رموز .ico المفضلة المتوافقة بشكل جيد، والترقية إلى .svg إذا
كان ذلك متاحًا.
بإمكان تنسيق SVG تكبير حجمه أو تصغيره بدون فقدان الجودة، كما يمكن أن يكون صغيرًا جدًا في الحجم، كما يمكن أن يتضمّن أيضًا لغة CSS مضمّنة، وحتى استعلامات عن الوسائط مضمّنة. وهذا يعني أنه في حال استخدام رمز مفضّل SVG في تطبيق قارئ أو أشرطة إشارات مرجعية، من المحتمل أن يحصل المستخدم على رمز ذي مظهر ذي صلة (الفاتح أو الداكن) بسبب أنماط الإعدادات المفضّلة الداكنة المتوفرة في الرسومات الموجّهة التي يمكن تغيير حجمها (SVG). ويتم بعد ذلك تعديل الرسومات الموجّهة التي يمكن تغيير حجمها (SVG) باستخدام نمطه المضمّن لتفضيلات المستخدم ذات اللون الفاتح والداكن.
Markup
ترميز SVG هو XML يستخدم امتدادًا لنوع الملف .svg، ما يتيح له الاحتفاظ بأنواع رموز ديناميكية أكثر.
البدء بإنشاء "favicon.svg"
أنشئ ملفًا جديدًا باسم "favicon.svg" وأضِف ما يلي:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
</svg>
في ما يلي ملف SVG الخاص بي، لقد غيّرتُ حجم viewBox ذي الصلة بعملي الفني:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
</svg>
إضافة الأشكال والمسارات
بعد ذلك، أضِف رمز مسار SVG. ويعني ذلك غالبًا فتح الرسومات الموجّهة التي يمكن تغيير حجمها (SVG) في محرّر رموز، ولكن هذه التعليمة البرمجية غير مناسبة للمستخدمين عمومًا. إليك دليل رائع يرشدك خلال عملية تصدير الرسومات الموجّهة التي يمكن تغيير حجمها (SVG) وتحسينها من أدوات التصميم.
جاء العمل الفني لتحدي واجهة المستخدم التصويرية (GUI) من قِبل مصمّم صمّمه في Adobe Illustrator. لقد قمت بتحسينه بشكل كبير. وقد شغّلته من خلال SVGOMG ثم عدَّلت العناصر يدويًا.
في ما يلي مثال على مجموعة مسارات الأعمال الفنية skull من مشروعي بعد تنظيفها:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<g id="skull">
<path id="skull-outline" class="favicon-stroke" stroke-linejoin="round" d="M19.62 188.39A166.62 166.62 0 0 1 186.24 21.77c115.25 0 166.61 74.59 166.61 166.62 0 1.83-.08 3.64-.13 5.46h.13s.68 175.09.68 178.65c0 30.11-16.26 41.67-36.32 41.67-12.7 0-35.22-3.93-36.22-32.69h-.2c-1 28.76-16.81 32.69-36.22 32.69-18 0-32.87-6.78-35.77-32.53-2.9 25.75-17.8 32.53-35.8 32.53-20.06 0-36.32-11.56-36.32-41.67 0-2.48.36-24.88.36-24.88A166.68 166.68 0 0 1 19.62 188.39Z" />
<path id="eyes-and-nose" d="M180.77 205.76c0 23.64 12.84 42.81 28.68 42.81s28.68-19.17 28.68-42.81-12.84-42.82-28.68-42.82-28.68 19.17-28.68 42.82M275 205.76c0 23.64 12.84 42.81 28.68 42.81s28.68-19.17 28.68-42.81-12.84-42.82-28.68-42.82S275 182.11 275 205.76M264.51 276.85s-29.26 43.53-20.12 49.23c7.07 4.41 20.49-16.71 20.49-16.71s12.82 22.58 16.76 20c16.24-10.71-17.13-52.5-17.13-52.5"/>
<path id="jawline" class="favicon-stroke" fill="none" stroke-linecap="round" d="M114.92 284.33c22.54-1 22 7 22 62.48" />
</g>
</svg>
لاحِظ أدوات اختيار رقم التعريف السهلة القراءة للمستخدم، مثل #eyes-and-nose والفئات مثل .favicon-stroke. هذه الفيديوهات من التعديل الذي أجريته استعدادًا لاستخدام CSS.
ليس من الضروري إضافة صفوف ومستندات تعريف لكي يصبح ملف SVG رمزًا مفضّلاً تكيُّفيًا.
ربط SVG للرمز المفضّل من HTML
في العلامة <head> في ملف HTML، وبعد الرمز المفضّل .ico، أضِف ما يلي:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
قد يبدو الرمز الجديد مطابقًا للنسخة .ico، لذا تأكّد من استخدامه. افتح لوحة الشبكة في "أدوات مطوري البرامج". تصفية حسب الصور والبحث عن
الرمز المفضّل:
الأنماط
مثل HTML، يمكنك إضافة علامة <style> إلى الترميز لاستخدامها في نطاق هذا المستند:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
</style>
…
</svg>
سيكون إصدار المظهر الفاتح هو اللون التلقائي لرمز الرسومات الموجّهة التي يمكن تغيير حجمها (SVG) للرمز المفضّل. كانت الأنماط التي كتبتها لذلك هي في الغالب ألوان الخط والتعبئة:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
.favicon-stroke {
stroke-width: 8px;
stroke: #8929ff;
}
#skull-outline { fill: white }
#eyes-and-nose, #hat-outline { fill: #8929ff }
#hat-fill, #hat-bill { fill: #e662e6 }
</style>
…
</svg>
الخطوة الأكثر متعة هي التالية، وهي تصميم نسخة المظهر الداكن من رمزك المفضّل. ستدخل أنماط ذلك في استعلام عن الوسائط داخل علامة النمط:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
…
@media (prefers-color-scheme: dark) {
/* dark theme styles */
}
</style>
…
</svg>
انتهى بي الأمر على النحو التالي:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
…
@media (prefers-color-scheme: dark) {
.favicon-stroke { stroke: #343a40 }
#skull-outline { fill: #adb5bd }
#hat-outline { fill: #343a40 }
#eyes-and-nose { fill: #343a40 }
}
</style>
…
</svg>
اخترت تبديل الحدود الأرجوانية الزاهية إلى اللون الرمادي الداكن اللطيف (#343a40)،
وغيرت لون عظم الجمجمة من الأبيض إلى الرمادي الفاتح البارد (#adb5bd)، ولكن
تركت قبعة التمييز الزهرية.
الخلاصة
الآن بعد أن عرفت كيف فعلت ذلك، كيف يمكنك‽ 🙂
دعونا ننويع أساليبنا ونتعلم جميع طرق الإنشاء على الويب. يمكنك إنشاء عرض توضيحي وروابط تغريدات لي وسنضيفها إلى قسم الريمكسات في المنتدى أدناه.