آیکون‌های گرافیکی یکی از مهمترین کامپوننت‌هایی هستند که می‌توانید آن‌ها را تقریبا در همه اپلیکیشن‌ها و وبسایت‌ها مشاهده کنید. اگرچه آیکون‌ها از نظر اندازه کوچک هستند اما انتخاب یک فرمت مناسب برای وب آیکون‌ها کار ساده‌ای نیست. در کنار فرمت‌های استاندارد تصویری، توسعه‌دهندگان همواره دو انتخاب دیگر نیز برای استفاده از آیکون‌ها دارند: فونت آیکون و SVG. سوال اصلی اینجاست که باید از کدام این موارد استفاده کنید؟ در این مطلب قصد داریم این دو فرمت را از نظر کارایی، انعطاف‌پذیری و دسترسی‌پذیری مقایسه کنیم.
تکامل وب آیکون‌ها
قبل از سی‌اس‌اس، توسعه‌دهندگان همواره مجبور بودند که برای آيکون‌ها از تصاویر استفاده کنند. اما بدلیل بزرگ بودن تصاویر، توسعه‌دهندگان وب همواره به دنبال یک روش جایگزین برای نمایش آیکون‌ها بودند. برای مثال، با آمدن CSS، توسعه‌دهندگان این قابلیت را داشتند که تمام آيکون‌های‌شان را تنها در یک فایل تصویری قرار دهند اما مشکلات دسترسی‌پذیری این روش باعث شد که با ظهور فونت آیکون‌ها در ۲۰۱۲ همه چیز تغییر بکند. اگرچه در آن سال‌ها استفاده از وب آیکون‌ها جایگزین حالت قبلی شد اما اخیرا این موضوع دوباره با آمدن گرافیک‌های وکتوری مقیاس‌پذیر یا SVG تغییر کرده است. توسعه‌دهندگان بسیاری هستند که از این روش برای توسعه وب آیکون‌های‌شان استفاده می‌کنند.
فونت آیکون‌ها
فونت آیکون‌ها در حقیقت فایل‌های متنی هستند که از طریق CSS مدیریت و ویرایش می‌شوند، مقیاس‌پذیری آن‌ها نسبت به تصاویر بسیار بهتر است، بنابراین با تغییر اندازه فونت آیکون‌ها کیفیت تصاویر خراب نمی‌شود و البته باید بگویم که این تغییر اندازه کار بسیار ساده‌ای هم هست. تغییر دادن رنگ و یا افزودن سایه به این آیکون‌ها به همان سادگی کار با متون است. می‌توانید در اینترنت فونت آیکون‌های رایگان بسیاری را پیدا کنید و یا اینکه می‌توانید یک فونت آیکون را نیز برای خودتان ایجاد کنید. یکی از مشکلات فونت آیکون‌ها این است که در صورت استفاده به شما مجموعه بسیار بزرگی از آیکون‌ها را می‌دهد که معمولا همه آن‌ها نیز استفاده نمی‌شوند. بنابراین تنها باعث اشغال فضا و سنگین شدن وبسایت می‌شوند.
وقتی که از فونت آیکون‌ها استفاده می‌کنید مرورگر مجبور خواهد بود که یک درخواست اضافی را به مراحل رندر صفحه اضافه کند. اگر مرورگر نتواند به درستی درخواست را مدیریت کند، چنین آدرسی وجود نداشته باشد و... کاربر تنها با یک کاراکتر خالی مواجه می‌شود. از آنجایی که چنین حالتی برای وبسایت‌های حرفه‌ای غیر قابل پذیرش است بنابراین در حال حاضر توسعه‌دهندگان بیشتری به سمت SVG می روند.
SVG
SVG یا Scalabe Vector Graphics به گرافیک‌های وکتوری اجازه می‌دهد تا در محیط مرورگر به اجرا در بیاید. در حال حاضر SVG در حال تبدیل شدن به یک استاندارد اصلی برای وب آیکون‌ها و انیمیشن‌ها است. نه تنها میزان مقیاس‌پذیری بیشتری ارائه می‌دهند بلکه سرعت و پایداری بسیار بیشتری را نیز به نسبت فونت آيکون‌ها در اختیار شما می‌گذارند. از آنجایی که SVGها به صورت کامل از کدهایی تشکیل می‌شود نیازی به import کردن از فایل‌های بزرگ خارجی ندارند. همچنین باید بگویم که در مقایسه با JPG و PNG اندازه کمتری دارند.
استفاده از SVG به میزانی زمان برای یادگیری نیاز دارد اما در نهایت باید گفت که فواید بسیار زیادی برای‌تان خواهد داشت.
SVG چگونه کار می‌کند؟
استفاده کردن از SVG درست از طریق تگ <img> امکان پذیر است. از طریق آن می‌توانید عرض و ارتفاع و موارد دیگری را نیز تنظیم کنید. با این حال استفاده از چنین روشی محدودیت‌های خاص خود را دارد.
اگر می‌خواهید چنین محدودیت‌هایی را پشت سر بگذارید پس باید به صورت مستقیم با خود SVG ارتباط برقرار کنید. می‌توانید این کار را به صورت inline در سندهای HTMLتان انجام دهید. حتی می‌توانید از CSS نیز استفاده کنید. یک مثال از آیکون SVG را می‌توانید در زیر مشاهده کنید:
<svg version="1.1"
baseProfile="full"
width="300" height="200"
xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="#3686be" />
<circle cx="150" cy="100" r="80" fill="white" />
<text x="150" y="115" font-size="35" text-anchor="middle" fill="#3a3a3a">Roocket</text>
</svg>
اگرچه ممکن است کدهای بالا در اولین نگاه کمی پیچیده و عجیب و غریب به نظر برسند اما باید بگویم که طراحی و کنترل آیکون‌های SVG بسیار آسان هستند. در حقیقت بجای کد نویسی حتی می‌توانید از ابزارهای گرافیکی وکتور نیز استفاده کنید. آیکون‌های‌تان را طراحی کنید و در قالب فایل SVG ذخیره نمایید، می‌توانید کدها را در برنامه‌ای مانند Illustrator نیز ایجاد کنید.
آیا فونت آیکون‌ها هنوز کاربردی هستند؟
فونت آیکون‌ها از روند منسوخ شدن فاصله بسیاری دارند. اگرچه فونت آيکون‌ها بهینه‌ترین و قابل اعتماد‌ترین راه‌حل نیستند اما هنوز هم برخی از توسعه‌دهندگان بدلیل ساده و آسان بودن از آن‌ها استفاده می‌کنند. براساس تعداد آیکون‌هایی که استفاده می‌کنید به نظر می‌رسد که ممکن است سوئیچ به SVG تلاش ارزشمندی نباشد اما باید بدانید که SVG راه آینده است، بنابراین باید دانش کافی در زمینه آن را پیدا کنید.
مقایسه SVG و فونت آیکون‌ها
برای اینکه در انتخاب یکی از این موارد به شما کمک کنیم بیایید براساس چند گزینه مختلف این دو مورد را با همدیگر مقایسه نماییم.
۱. اندازه
اگر که قصد دارید تا از SVG به صورت inline استفاده کنید، باید انتظار بالا رفتن اندازه فایل‌ها را بکشید، به همین دلیل با حجم بزرگی از کدها روبرو می‌شوید. همچنین از آنجایی که در این حالت مرورگر کاربر قابلیت کش SVG را ندارد بنابراین تلاش‌تان تا حدی بیهوده خواهد بود. اما استفاده از یک فایل خارجی می‌تواند به شما کمک بسیاری بکند. بهتر می‌توانید کدها را مدیریت کنید و همچنین قابلیت کشینگ را نیز خواهید داشت. اگر که آیکون‌های بسیاری را روی یک صفحه دارید به نظر می‌رسد که استفاده از فونت آیکون‌ها می‌توانند تجربه کاربری بهتری را ارائه دهند. البته اگر از مجموعه‌ای آیکون استفاده کنید که بیشترشان را استفاده نمی‌کنید در نهایت باید گفت که منابع بسیاری به صورت بیهوده مصرف خواهد شد.
استفاده از ۱۰ آیکون بهینه‌سازی شده SVG بسیار بهتر و کوچکتر از استفاده از یک مجموعه بزرگ فونت آیکون‌ها خواهد بود. با این حال اگر بتوانید که مجموعه آیکون‌ها مورد نظرتان را به صورت سفارشی ایجاد کنید همه چیز به خوبی پیش خواهد رفت.
۲. کارایی
آیکون فونت‌ها قابلیت کشینگ را دارند بنابراین بارگذاری سریع‌تری خواهند داشت. اما در اولین بازدید درخواست HTTP جدیدی را به صفحه‌تان اضافه می‌کنند. از طرفی دیگر اگر از حالت inline برای svg استفاده کنید درخواست HTTP اضافی را نخواهید داشت اما مشکل اینجاست که قابلیت کشینگ برای این مورد وجود ندارد.
به نظر می‌رسد که استفاده از یک فایل خارجی برای SVG می‌تواند معقول‌ترین راه ممکن باشد. البته می‌توانید برای اینکه دقیقتر عمل کنید از ابزارهای تست کارایی و سرعت بهره بگیرید. اپلیکیشن‌تان را در هر دو حالت مقایسه کنید ببینید در کدام مورد به نتیجه بهتری می‌رسید.
۳. انعطاف‌پذیری
هر دو فرمت را می‌توانید از طریق CSS استایل بدهید اما باید بگویم که قابلیت‌های سفارشی‌سازی SVG بسیار بیشتر از فونت آیکون‌ها است. حتی می‌توانید با استفاده از دستورهای SVG انیمیشن‌سازی کنید.
۴. پشتیبانی مرورگر
مهم نیست که از کدام حالت استفاده می‌کنید در هر صورت باید یکسری کار برای پشتیبانی از مرورگرهای قدیمی انجام دهید. اما از آنجایی که فونت آیکون‌ها مدت زمان بیشتری در کنار ما بوده است طبیعتا باید گفت که آن‌ها پشتیبانی بهتری دارند. برای کاربران اینترنت اکسپلورر ۶ به بالا فونت آیکون‌ها به خوبی پشتیبانی می‌شود اما برای اینکه چنین پشتیبانی برای SVG را نیز مشاهده کنید نیاز است که از JS polyfill استفاده نمایید.
البته باید گفت که در حال حاضر تعداد بسیار کمی از کاربران از اینترنت اکسپلورر استفاده می‌کنند بنابراین نباید این موضوع به یک نگرانی برای شما تبدیل شود. پشتیبانی از SVG در مرورگر جدید مایکروسافت اج نیز با کمی مشکلات مواجه است که فکر کنم در بروزرسانی‌های جدید چنین مشکلاتی به کاملی رفع شده است.
۵. مقیاس‌پذیری
اگرچه هر دو حالت‌ها Vector-Base هستند اما باید بگویم که مرورگر، فونت آیکون‌ها را مانند متن تفسیر می‌کند. به همین دلیل رویکرد مرورگر با SVG در این موضوع کمی واضح‌تر است.
۶. موقعیت دهی
موقعیت‌دهی به فونت آیکون‌ها ممکن است کمی دشوار باشد. معمولا در صورت استفاده از فونت آیکون‌ها باید از شبه کلاس‌ها استفاده کرد و جهت‌دهی‌ها و اندازه‌های مختلف همگی باید به صورت دقیق انجام شوند. اما برای SVGها تنها کافی‌ست که اندازه‌ای را تعیین کنید.
۷. دسترسی‌پذیری
میزان دسترسی‌پذیری SVG بسیار بالاتر از فونت آیکون‌ها است. به این دلیل که قابلیت‌های دسترسی‌پذیری منحصر به فردی برای SVG و المان تصاویر وجود دارد اما چنین امکانی برای فونت آیکون‌ها وجود ندارد.
چند منبع برای SVG
شبکه توسعه‌دهندگان موزیلا آموزش بسیار خوبی برای SVG تهیه کرده‌اند که می‌توانید از آن استفاده کنید. جدای از Adobe Illustrator ابزارهای دیگری نیز وجود دارند که برای کار با فرمت SVG به شما کمک می‌کنند، IcoMoon یکی از بهترین موارد در این زمینه است. Inkscape نیز ابزاری رایگان و متن باز است که به شما در این زمینه کمک می‌کند. همچنین ابزاری مانند Convertio به شما این قابلیت را می‌دهد تا فرمت‌های مختلف تصویری را به SVG تبدیل کنید. SVGO و SVG Minifier نیز دو مورد از ابزارهای خوبی هستند که به شما قابلیت بهینه‌سازی کدهای SVG را می‌دهند.
در پایان
هنوز شک و شبه‌هایی برای اینکه کدام مورد بهتر و یا بهینه‌تر از مورد دیگری است وجود دارد. این یک واقعیت است: براساس موقعیت‌های مختلف استفاده از هر کدام این موارد می‌تواند بهتر از مورد دیگر باشد.
با این حال SVG متدی است که بیشتر پیشنهاد می‌شود. مقیاس‌پذیری آن‌ها بالاتر است، تجربه کاربری بهتری ارائه می‌دهند و تقریبا تمام مرورگرهای مدرن امروزی از آن پشتیبانی می‌کنند.
شما کدام مورد را بیشتر ترجیح میدهید؟
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید