ایکون svg چیست؟

arma

زمان2023-02-24 20:33:48

وقتی دارین ui یک پروژه رو میزنید متوجه میشید که چقدر استفاده از ایکون ها برای فهماندن مثلا لاگین کاربر، دکمه تماس و…. چقدر ساده تر و شیک تره تا شما بخواهید یک دکمه بسازید و داخلش بنویسید تماس با ما مثلا.

من خودم شخصا خیلی دوست دارم از آیکون های svg استفاده کنم چون دستم توشون باز تره و میتونم خیلی کارها داخلش بکنم حتی تغییرش بدم به شما هم همین پیشنهاد رو میدم.

مزایای استفاده از آن و تفاوتش با فونت ایکون هایی مثل fontawsome رو بهتون اینجا توضیح میدم

آیکون های SVG چیست؟

برای جواب دادن به این سوال اول باید خود svg رو توضیح بدم و بگم چیه.

   Scalable Vector Graphics (SVG) 

یک فرمت عکس که میتونه برای استفاده از زبان نشانه گذاری (xml) ساخته بشه xml اینجا خیلی مهمه svg یک عکس تصویر پیکسلی با اندازه ثابت نیست و با کد ساخته شده و میتونه در هر مرورگری اندازه ای متفاوت داشته باشه پس میشه گفت svg کاملا مقیاس پذیره. 

بیایید یه کم بهتر توضیح بدیم مثلا اگه بخواهید یه دونه مستطیل بکشید باید 4 تا خط رو در 4 وجه بزارین تا به دست بیاد مستطیل.

همه svg ها با استفاده از هفت شکل اصلی شکل میگیرن:

• circle
• ellipse
• line
• path
• polygon
• Polyline

وقتی بدونید از اینا چه طور باید استفاده کنید رسم کردن svg کار راحتیه برای شکل های مختلف میتونید اشکال رو ترکیب کرده و روی هم قرار بدین تا شکل نهایی به دست بیاد این طوریه که svg ها ساخته میشن میشه یک شکل ساده باشه و یا یک شکل عجیب و غریب که میتونه نقش زیادی رو در سایت شما داشته باشه.

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

تاریخچه آیکون های svg.

تاریخچه SVG از اواخر دهه 90 شروع می شود. فرمت فایل تصویر تقریباً همزمان با زمانی که Tamagotchis، iMacs و Palm Pilots به خانه های ما دنیای وب رو آوردن.

با این وجود همه دستگاه ها همه فرمت هارو پشتیبانی نمی کردند و  اکثر مرورگرهای وب از فرمت های SVG پشتیبانی نمی کردند و قصد نداشتند این کار رو انجام بدن !!تا سال 2017 که مرورگرهای بدون هیچ مشکلی شروع به رندر SVG کردند. و از آن زمان همه چیز بسیار سریع پیش می رفت. امروزه، فرمت‌های SVG به طور گسترده مورد استفاده قرار میگیرن.

نکنه تو سایت caniuse میتونید چک کنید چه دستگاه هایی از فرمت svg پشتیبانی نمیکنن و چه ورژن هایی.

چرا svg انقدر مهمه؟

ایکون هایی png , jpg با فرمت های svg فرق دارن. چون اونا یه اندازه ثابت دارن ولیییی svg اندازه اش ثابت نیست.و میتونه تغییر کنه بدون افت کیفیت.

ایکون های svg اصلا داخل یه چارچوب خاصی طراحی نشدن و میتونید بدون محدودیت اونا رو تغییر بدین.

چرا آیکون های svg خیلی محبوب هستند؟

1. ساخت اسون با ویرایشگر
2. پیکسل ها رندر میشن
3. قابلیت بزرگنمایی (بدون افت کیفیت) 
4. انعطاف پذیرتر و همه کاره تر از سایر فرمت های گرافیکی 
5. تغییر اندازه ایکون ها بدون افت کیفیت
6. حجم پایین ایکون 

مزایای استفاده از آیکون های SVG صفحات وب

همون طور که قبلا گفتم svg ها با استفاده از کد ها ساخته میشن کد های xml وقتی اونارو داخل ویرایشگر های کد باز کنید یه سری اعداد و ارقام بهتون نمایش داده میشه که شبیه به فرمت html عه و میتونید به راحتی اونارو ویرایش کنید.

1. آیکون های svg انعطاف پذیرن و میشه با کد های css بهشون شکل خاصی رو داد مثل بک گراند و رنگ .
2. میتونید اونا رو با js و css متحرک کنید.
3. وضوح بالا ایکون شما چه در مک بوک چه در گوشی چه در تبلت کاملا واضح اند.
4. سرعت بالا در کد زنی میارن چرا که برای اندازه های مختلف نیازی نیست یک ایکون مختلف بسازی و فقط با یه آیکون کارت راه می افته.
5. خیلی حجم پایینی دارن.

آیکون های SVG یا فونت آیکون هایی مثل fontawesome ?

وقتی حرف ایکون رو میزنیم حتما لازم نیست یه آیکون بسازید و استفاده کنید ایکون رو یه روش وجود داره که میشه از فونت آیکون ها استفاده کنید که استفاده از اونا خیلی ساده است. اما بهترین فونت آیکون کدومه.

اول ببینیم چه شباهتی با هم دارن

1. مقیاس بندی ندارن میتونن اندازه شون رو تغییر بدن
2. هر دو در تمامی دستگاه ها پشتیبانی مشن تقریبا
3. حجم پایینی دارن
4. انعطاف پذیری زیادی دارن

تفاوت فونت آیکون با svg

یه تفاوت بزرگشون اینه که در فونت آیکون ها محدودیت داریم svg هارو میتونیم خیلی تغییر بدیم شکل و رنگش رو اما در فونت آیکون ها نمیتونیم. یا حداقل خیلی کمتر. ممکنه در استفاده از فونت آیکون ها به مشکل خوردیم چون مرورگرها فونت آیکون ها مثل فونت متن برخورد میکند و خوب نمایش داده نشن. و خب svg ها میتونن یه اثر هنری باشن تا یه سری آیکون ساده.من پیشنهادم استفاده از svg هاست.

ساخت آیکون svg

برای طراحان و کسانی که عمدتاً با کدهای فرانت اند کار می کنند، ویرایش SVG می تواند بسیار ترسناک باشد. این همه اعداد و حروف ذکر شده چیه؟ ¯\(ツ)/¯

خوشبختانه، شما مجبور نیستید بفهمید اینا چی ان . دو راه برای ساخت ایکون های SVG وجود داره!! 

دستی یا با استفاده از ابزار. دومی گزینه ساده تریه که عملاً شامل هیچ کدی نمی شود.

میتونید با استفاده از نرم افزار هایی مثل فتوشاپ و Adobe Illustrator و چند نرم افزار دیگه شکل های خودتون رو بکشید و خروجی بگیرین خیلی ساده است این کار. البته اینم بگم که میتونید از بخش دانلود آیکون اوتلاین هم استفاده کنید.