تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

إنشاء رمز مفضّل تكيُّفي

نظرة عامة أساسية حول كيفية إنشاء رمز مفضّل تكيّفي

Adam Argyle

في هذه المشاركة، أود أن أشارككم أفكارًا حول كيفية إنشاء رمز مفضّل تكيّفي باستخدام SVG. جرِّب العرض التوضيحي.

تظهر علامات تبويب المتصفّح وهي تتوافق مع التغييرات في المظهرَين الفاتح والداكن في نظام التشغيل MacOS. تجربة العرض التوضيحي

إليك نسخة من هذه المشاركة على YouTube إذا كنت تفضّل ذلك:

نظرة عامة

الرمز المفضّل المخصّص هو طريقة رائعة لتحسين مشروع الويب. إنه يظهر على علامات تبويب المتصفح على سطح المكتب، أيضًا داخل "الحفظ لوقت لاحق" القراء ومشاركات المدونة الأخرى المرتبطة بموقعك أخرى. يتم تنفيذ ذلك عادةً باستخدام نوع الملف .ico، ولكن مؤخرًا قد سمحت المتصفحات باستخدام SVG، تنسيق متجه. استخدام تدريجية التحسين يمكنك عرض رموز .ico مفضّلة متوافقة بشكل جيد، والترقية إلى .svg إذا المتوفرة.

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

علامات التبويب الفاتحة والداكنة في كل متصفح توفر نظرة عامة على الرمز التكيُّفي من أعلى إلى أسفل: Safari وFirefox وChrome.

Markup

ترميز SVG هو XML باستخدام امتداد نوع الملف .svg الذي يسمح له بالاحتفاظ بالأنواع الأكثر ديناميكية من الرمز.

البدء بصنع `favicon.svg`

أنشئ ملفًا جديدًا باسم favicon.svg وأضِف ما يلي:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">

</svg>

ملاحظة: علامة الالتفاف هذه تشبه العلامة <html>، ألا تعتقد ذلك؟

في ما يلي ملف SVG، لقد اخترتُ حجم viewBox المناسب لعملي الفني:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">

</svg>

إضافة الأشكال والمسارات

بعد ذلك، أضِف رمز مسار SVG. يعني هذا غالبًا فتح ملف SVG في أداة تعديل الرموز، فإن هذه التعليمات البرمجية غير ملائمة للإنسان بشكل عام. إليك دليلاً رائعًا يرشدك من خلال تصدير رسومات موجّهة يمكن تغيير حجمها (SVG) وتحسينها من أدوات التصميم.

تم نشر العمل الفني لتحدي واجهة المستخدم الرسومية هذا من مصمم أنشأها في Adobe رسّام توضيحي أنا بشدة تحسينه. أجريتُه من خلال 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)، ولكن تركت قبعة اللهجة الوردية.

الخاتمة

الآن بعد أن تعرّفت على كيفية إجراء ذلك، كيف يمكنك‽ 🙂

يمكننا تنويع أساليبنا وتعلُّم جميع طرق إنشاء المحتوى على الويب. أنشئ عرضًا توضيحيًا وأضيف روابط تغريدة إليّ. انتقِل إلى قسم الريمكسات في المنتدى أدناه.

ريمكسات من إنشاء المنتدى

أين علمت بهذه التقنية: @tomayac على ملكه مدوّنة

إنشاء رمز مفضّل تكيُّفي

نظرة عامة

Markup

البدء بصنع favicon.svg

إضافة الأشكال والمسارات

ربط رمز SVG المفضّل من HTML

الأنماط

الخاتمة

ريمكسات من إنشاء المنتدى

البدء بصنع `favicon.svg`