مروری بر استفاده از وب فونت، svg و svg sprite

پیش از این برنامه نویس ها "سیستم های آیکون" شون رو با استفاده از PNG Sprite ها، فونت آیکون ها، فایل های PNG یا SVGمستقل و غیره پیاده سازی می کردن. همه این راه حل ها مزایا و معایب خودش رو داشت. چند تا از این روش های رو پایین ببینیم.

وب فونت:
از یکی از معروفترین مرجع های وب فونت ها می توان به fontawesome اشاره کرد.
استفاده از کلاس راه حل متداول استفاده از وب فونت هاست.

<i class=&quotfa-solid fa-user&quot></i>

svg:

یک فرمت گرافیکی بر اساس وکتور و با فرمت XML است. این فرمت با عوض شدن اندازه یا زوم، کیفیت خود را از دست نمی دهد.

<svg width=&quot100&quot height=&quot100&quot xmlns=&quothttp://www.w3.org/2000/svg&quot>
  <circle cx=&quot50&quot cy=&quot50&quot r=&quot40&quot stroke=&quotgreen&quot stroke-width=&quot4&quot fill=&quotyellow&quot />
 </svg>

Svg sprites:

این فرمت مجموعه از آیکون های svg را در یک فایل svgجمع می کند. هر آیکون یک آیدی منحصر به فرد دارد که برای دسترسی به آن می توان از آن آیدی استفاده کرد.

<?xml version=&quot1.0&quot encoding=&quotutf-8&quot?>
 <svg xmlns=&quothttp://www.w3.org/2000/svg&quot>
   <defs>
   <symbol id=&quotfolder&quot viewBox=&quot0 0 24 24&quot>
   <path d=&quotM9.5,8l0,-2.5l10,0l0,13l-15,0l0,-10l4.5,0c0.276,0 0.5,-0.224 0.5,-0.5Z&quot style=&quotfill:#e7ca62;fill-rule:nonzero;stroke:#000;stroke-width:1px;&quot/>
   </symbol>
   <symbol id=&quotfolder-add&quot viewBox=&quot0 0 24 24&quot>
   <path d=&quotM9.5,8l0,-2.5l10,0l0,13l-15,0l0,-10l4.5,0c0.276,0 0.5,-0.224 0.5,-0.5Z&quot style=&quotfill:#e7ca62;fill-rule:nonzero;stroke:#000;stroke-width:1px;&quot/>
   <path d=&quotM15,12l0,4m-2,-2l4,0&quot style=&quotfill:none;fill-rule:nonzero;stroke:#000;stroke-width:1px;stroke-linecap:round;stroke-linejoin:miter;&quot/>
   </symbol>
   <symbol id=&quotfolder-remove&quot viewBox=&quot0 0 24 24&quot>
   <path d=&quotM9.5,8l0,-2.5l10,0l0,13l-15,0l0,-10l4.5,0c0.276,0 0.5,-0.224 0.5,-0.5Z&quot style=&quotfill:#e7ca62;fill-rule:nonzero;stroke:#000;stroke-width:1px;&quot/>
   <path d=&quotM13,14l4,0&quot style=&quotfill:none;fill-rule:nonzero;stroke:#000;stroke-width:1px;stroke-linecap:round;stroke-linejoin:miter;&quot/>
   </symbol>
   </defs>
 </svg>

برای تعریف هر svg زیر مجموعه sprite می بایست از symbol استفاده کرد و برای استفاده از آن می بایست از تگ use استفاده کرد.

<svg class=&quoticon&quot><use href=&quotimg/icons.svg#folder-add&quot/></svg>

این روزها مقایسه SVG Sprite ها و فونت آیکون هاست که اهمیت بیشتری داره.بقیه گزینه ها رو معمولا دیگه این روزا استفاده نمی کنیم. چرا چون مثلا برای دریافت هر SVG مستقل باید یه درخواست جداگونه زد. وقتی حجم فایل هر SVG کوچیک باشه، خب این خیلی عملکرد بالاتری داره که ما با یه درخواست مجموعه ای از SVG ها رو دریافت کنیم و بعدش هم کش کنیم. مشکلی که PNG داره اینه که با تغییر سایز کیفیت خودش رو از دست میده و نمی تونه گزینه خوبی برای آیکون باشه.

و اما مقایسه بین SVG Sprite ها و فونت آیکون ها:

سایز:

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

تجربه کاربری:

هم فونت آیکون ها و هم SVG Sprite ها می تونن با اولین درخواست سمت مرورگر کش بشن و دفعات بعد ازشون استفاده بشه.

برنده: نامشخص

قابل استفاده بودن (Accessibility):

یکی از بهترین مزایای SVG در مقابل وب فونت ها، پشتیبانی اون ها از گزینه های Accessibility است. SVG از Element های موجودی شبیه <title> و <desc> است که برای screen reader ها و text browser ها قابل دسترسی است. علاوه بر این، SVG ها به عنوان یک تصویر شناخته میشن نه یه متن.

برنده: SVG Sprite

سفارشی سازی:

شما سایز و رنگ هر دو رو می تونید با استایل دهی تنظیم کنید. SVG در کنار این ها قابلیت متحرک بودن و چند رنگی بودن هم داره.

برنده: SVG Sprite

پشتیبانی مرورگر:

فونت آیکون های بسیار وسیع در مرورگرها مخصوصا مرورگرهای قدیمی استفاده میشن. SVG Sprite ها، در مرورگرهای مدرن خیلی خوب پشتیبانی میشن اما مرورگرهای قدیمی مثل IE8 ازشون پشتیبانی نمیکنه.
برنده: فونت آیکون ها