تصویر نویسنده

۱ شهریور ۱۳۹۹

0

فاوآیکن های SVG و همه کارهای جالبی که می توانیم با آنها انجام دهیم

مقاله

فاوآیکن ها (Favicon)نمادهای کوچکی هستند که در گوشه تب مرورگر خود مشاهده می کنید. آنها به شما کمک می کنند صفحه های مختلف را هنگام دیدن بوک مارک ها و تب های باز مرورگر تشخیص دهید. آنها بخشی شُسته رُفته از تاریخ اینترنت هستند که پتانسیل ترفندهای جالبی را دارند.

یک ترفند بسیار جدید امکان استفاده از SVG به عنوان فاوآیکُون است. چیزی که رفته رفته اکثر مرورگرهای مدرن از آن پشتیبانی می کنند.

در اینجا کد اضافه کردن فاوآیکن به سایت برای شما آورده شده است:

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="alternate icon" href="/favicon.ico">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#ff8a01">

اگر یک مرورگر از یک فاوآیکن با فرمت SVG پشتیبانی نکند، خط اول را نادیده می گیرد و از دومی ادامه می دهد. این موضوع تضمین می کند که همه مرورگرهایی که از فاوآیکن پشتیبانی می کنند می توانند از این تجربه لذت ببرند.

شما همچنین می توانید مقدار ویژگی rel ما را در خط دوم مشاهده کنید. این موضوع به طور برنامه نویسی شده با مرورگر ارتباط می گیرد که یک favicon با فرمت .ico به طور خاص به عنوان یک راه حل جایگزین استفاده می شود.

زیر favicon یک خط کد است که تصویر SVG دیگری به نام safari-pinned-tab.svg بارگذاری می کند. این به منظور پشتیبانی از عملکرد تب پین شده Safari است، که قبل از سایر مرورگرها دارای پشتیبانی فرمت SVG بود.

در اینجا جزئیات بیشتری درباره سطح فعلی پشتیبانی مرورگرها از فاوآیکن های با فرمت SVG آورده شده است:

چرا SVG؟

ممکن است این سوال را بپرسید که چرا این مورد ضروری است؟ فرمت .ico برای همیشه وجود داشته است و می تواند از سایز تصویر تا ۲۵۶*۲۵۶ پیکسل پشتیبانی کند. در اینجا سه جواب برای شما وجود دارد.

سهولت در تالیف

تهیه فایلهای .ico مشکل است. این فایل یک فرمت اختصاصی است که توسط مایکروسافت استفاده شده است، به این معنی که برای ساختن آنها به ابزارهای تخصصی احتیاج دارید. SVG یک استاندارد باز است، به این معنی که می توانید بدون هیچ ابزار یا پلتفرمی از آن استفاده کنید.

تضمین آینده

رتینا؟ ۵k؟ ۶k؟ هنگامی که از یک فایل SVG با وضوح آگونستیک برای فاوآیکن استفاده می کنیم، تضمین می کنیم که فاوآیکن ما صرف نظر از میزان بزرگی نمایشگرها، در دستگاه های آینده کاملاً واضح دیده می شود.

کارایی

SVG ها معمولاً فایل های بسیار کوچکی هستند، به خصوص وقتی که با همتایان تصویری خود مقایسه می شوند. فقط با استفاده از یک فاوآیکن ۱۶×۱۶ پیکسلی به عنوان جایگزین در مرورگر هایی که از SVG پشتیبانی نمی کنند، ما ترکیبی را ارائه می دهیم که از درجه بالایی از پشتیبانی به همراه اندازه فایل کوچکتر برای بوت شدن برخوردار است.
این ممکن است کمی افراطی به نظر برسد، اما وقتی صحبت از عملکرد وب می شود، هر بایت مهم است!

ترفندها

نکته جالب دیگر در مورد SVG این است که می توانیم CSS را مستقیماً در آن قرار دهیم. این بدان معنی است که ما می توانیم کارهای جالبی مانند پویا کردن آنها با جاوا اسکریپت، مشروط بر اینکه SVG بصورت درون خطی اعلام شود و با استفاده از یک عنصر img تعبیه نشده باشد، انجام دهیم.

<svg  version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    path { fill: #272019; }
  </style>
  <!-- etc. -->
</svg>

از آنجا که فاوآیکن های SVG با استفاده از عنصر link تعبیه شده اند، با استفاده از JavaScript نمی توان آنها را اصلاح کرد. با این حال، می توانیم از مواردی مانند ایموجی و رسانه استفاده کنیم.

ایموجی

Lea Verou ایده ای هوشمندانه در مورد استفاده از ایموجی ها در داخل عنصر متن SVG داشت تا یک فاوآیکن سریع با یک پس زمینه شفاف که در اندازه های کوچک نگه داشته می شود ساخته شود.

<svg xmlns="http://w3.org/2000/svg" viewBox="0 0 100 100">
<text y=".9em" font-size="90">
💩
</text>
</svg>

پشتیبانی از حالت تاریک

Thomas Steiner و Mathias Bynens هر دو به طور مستقل درگیر این ایده بودند که می توانید از جستار رسانه ای که از prefers-color-scheme استفاده می کند برای پشتیبانی از حالت تاریک استفاده کنید. این اثر از کاوش Jake Archibald در مورد SVG و جستار رسانه ای ساخته شده است.

<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg">
  <style>
    path { fill: #000000; }
    @media (prefers-color-scheme: dark) {
      path { fill: #ffffff; }
    }
  </style>
  <path d="M111.904 52.937a1.95 1.95 0 00-1.555-1.314l-30.835-4.502-13.786-28.136c-.653-1.313-2.803-1.313-3.456 0L48.486 47.121l-30.835 4.502a1.95 1.95 0 00-1.555 1.314 1.952 1.952 0 00.48 1.99l22.33 21.894-5.28 30.918c-.115.715.173 1.45.768 1.894a1.904 1.904 0 002.016.135L64 95.178l27.59 14.59c.269.155.576.232.883.232a1.98 1.98 0 001.133-.367 1.974 1.974 0 00.768-1.894l-5.28-30.918 22.33-21.893c.518-.522.71-1.276.48-1.99z" fill-rule="nonzero"/>
</svg>

برای مرورگرهای پشتیبانی کننده، این کد به این معنی است که فاوآیکن SVG به شکل ستاره ما هنگام فعال شدن حالت تاریک، رنگ پر کننده آن را از سیاه به سفید تغییر می دهد. بسیار شسته و رفته!

سایر مدیا کوئری ها

پشتیبانی از حالت تاریک باعث شد تا فکر کنیم اگر SVG ها می توانند از prefers-color-scheme پشتیبانی کنند، چه کارهای دیگری می توانیم با آنها انجام دهیم؟ در حالی که پشتیبانی از مدیا کوئری سطح ۵ ممکن است هنوز وجود نداشته باشد، در اینجا ایده هایی در نظر گرفته شده است:

  • از light-level برای خنثی کردن رنگ های فاوآیکن در محیط کم نور استفاده کنید.
  • برای حفظ برندینگ از inverted-colors استفاده کنید تا رنگ های معکوس را وارونه کنید و یا اطمینان حاصل کنید که ظاهر فاوآیکن همانطور که در نظر گرفته شده واقعگرایانه است.
  • برای حذف انیمیشن فاوآیکن از prefers-reduced-motion استفاده کنید. در حالت ایده آل، ما در وهله اول از متحرک کردن فاوآیکنها جلوگیری می کنیم، زیرا می تواند محرک ADHD و سایر مشکالات مرتبط باشد.
  • از forced-colors و/ یا یک جستار رسانه ای کنتراست بالای ویندوز استفاده کنید تا مطمئن شوید که فاوآیکن از نظر بصری در یک زمینه رنگ با کنتراست بالا نگه داشته شده است. به یاد داشته باشید از کلمات کلیدی رنگ برای پویا نگه داشتن رنگ های فاوآیکن استفاده کنید!
نمونه ای از نحوه عملکرد این تنظیمات مبتنی بر جستار رسانه ای.

کار را جذاب کنید

جنبه مهم دیگر در طراحی یک فاوآیکن خوب، اطمینان از ظاهر خوب آنها در قسمت کوچک تب مرورگر است. راز این امر ساخت مسیرهای تصویر برداری تا شبکه پیکسل است، راهنمایی که یک کامپیوتر از آن برای تبدیل ریاضی SVG به بیتی که در صفحه می بینیم استفاده می کند.
مثالی ساده با استفاده از یک شکل مربع:

هنگامی که نقاط برداری مربع با شبکه پیکسل آرت برد تراز شود، اثر antialiasing رایانه برای صاف کردن شکل ها لازم نیست. هنگامی که نقاط بردار هم تراز نیستند، ما یک اثر “لکه دار (smearing)” خواهیم داشت:

با استفاده از یک برنامه ویرایش بردار مانند Figma ،Sketch ،Inkscape یا Illustrator می توانید موقعیت برداری را بر روی پیکسل تنظیم کنید. این برنامه ها SVG را نیز پشتیبانی می کنند. برای تنظیم مکان یک نقطه بردار، هر گره را با یک ابزار انتخاب دقیق، انتخاب کنید و آن را به موقعیت بکشید.

برخی از آیکون های پیچیده تر ممکن است نیاز به ساده سازی داشته باشند، تا در اندازه های کوچک خوب به نظر برسند.

شما همچنین می توانید از وبسایت realfavicongenerator برای ایجاد فاوآیکن های خود استفاده کنید.

منبع : css-tricks

۰ ۰ vote
Article Rating