یادداشت آرشیوی: ویدیوی اصلی این مطلب در سال 2020 ضبط شده و بعضی ابزارها و منابع معرفی‌شده ممکن است امروز تغییر کرده باشند. همچنین پک دانلودی قدیمی از این صفحه حذف شده، چون وضعیت مجوز بازتوزیع همه آیکن‌های داخل آن به‌صورت مستقل قابل تایید نبود.
SVG یا Scalable Vector Graphics یک فرمت برداری مبتنی بر XML است که برای آیکن، لوگو و گرافیک‌های رابط کاربری بسیار مناسب است. چون SVG برداری است، در اندازه‌های مختلف بدون پیکسلی شدن نمایش داده می‌شود و می‌توان در بسیاری از Workflowها رنگ و بعضی ویژگی‌های آن را راحت‌تر مدیریت کرد.
چرا SVG برای آیکن‌های رابط کاربری مناسب است؟
- مقیاس‌پذیری بدون افت کیفیت برای گرافیک‌های برداری
- قابلیت استفاده در وب و ابزارهای طراحی
- امکان ویرایش رنگ و Path در بسیاری از ابزارها
- مناسب برای ساخت Icon System و Design System
- امکان استفاده به‌صورت فایل مستقل یا Inline SVG در وب
البته SVG همیشه از PNG یا JPG کوچک‌تر نیست؛ حجم فایل به تعداد Pathها، پیچیدگی شکل و نحوه Optimize شدن آن بستگی دارد. برای عکس‌های واقعی معمولا فرمت‌های Raster یا فرمت‌های تصویری جدیدتر انتخاب مناسب‌تری هستند.
SVG را چطور در وب استفاده می‌کنیم؟
یکی از ساده‌ترین روش‌ها استفاده از فایل SVG در تگ <img> است. اگر لازم باشد بخش‌های داخلی SVG با CSS کنترل شوند، می‌توان از Inline SVG استفاده کرد. فایل SVG در اصل کد است؛ بنابراین SVG دریافت‌شده از منبع ناشناس باید قبل از قرار گرفتن Inline در سایت بررسی و Sanitized شود.
چطور کتابخانه آیکن را مدیریت کنیم؟
- برای آیکن‌ها Naming Convention مشخص داشته باشید.
- آیکن‌ها را بر اساس کاربرد یا Product Area دسته‌بندی کنید.
- اندازه ViewBox و Stroke/Fill را تا حد ممکن یکدست نگه دارید.
- نسخه اصلی Icon Set و تغییرات تیم را کنترل کنید.
- قبل از اضافه کردن آیکن جدید بررسی کنید مشابه آن در Library وجود نداشته باشد.
قبل از استفاده از Icon Pack چه چیزهایی را بررسی کنیم؟
- License: آیا استفاده شخصی و تجاری مجاز است؟
- Attribution: آیا ذکر منبع الزامی است؟
- Redistribution: آیا اجازه دارید فایل‌ها را دوباره بسته‌بندی یا منتشر کنید؟
- Consistency: Stroke، Corner و Visual Weight آیکن‌ها با هم هماهنگ هستند؟
- Accessibility: آیکن‌های معنایی باید Label یا متن جایگزین مناسب در رابط داشته باشند.
کتابخانه‌های شناخته‌شده آیکن
در طول سال‌ها مجموعه‌هایی مثل Feather، Ionicons، Phosphor، Line Awesome و Unicons بین طراحان و توسعه‌دهندگان رایج بوده‌اند. وضعیت نگهداری و License هر مجموعه می‌تواند تغییر کند؛ قبل از استفاده در پروژه جدید، صفحه رسمی همان Library را بررسی کنید.
ویدیوی آموزش مدیریت آیکن‌های SVG
نکته: نام و رابط ابزارهایی که در ویدیو دیده می‌شوند را مربوط به زمان ضبط در نظر بگیرید؛ اصول سازمان‌دهی Icon Library و انتخاب فرمت مناسب همچنان کاربردی‌اند.
