دوره آموزشی ایجاد آیکون های وب با SVG

ما که طراح یا توسعه‌دهنده‌ی وب هستیم، همیشه می‌خوایم که گرافیک‌هامون باکیفیت و شفاف باشن، اما از اون طرف، نباید حجم فایل‌ها رو زیاد کنیم چون روی سرعت سایت تأثیر می‌ذاره. پس چطوری می‌تونیم هم کیفیت بالا داشته باشیم و هم عملکرد خوبی؟ تنها راهکار اصلی، استفاده از SVG هست.

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

توی این دوره‌ی آموزشی، یاد می‌گیری که چطور آیکون‌های SVG رو توی صفحات وب نمایش بدی. روش‌های مختلفی رو بررسی می‌کنیم که هر کدوم مزایا و معایب خودشون رو دارن. Morten Rand-Hendriksen بهت یاد می‌ده که چطور:

تصویرهای SVG رو مستقیماً داخل صفحه بذاری.
از SVG inline استفاده کنی یا اون‌ها رو به‌عنوان تصویر پس‌زمینه تنظیم کنی.
اسپرایت SVG رو از طریق خط فرمان اجرا کنی.
با ابزار Grunticon، کار با SVG‌ها رو خودکار کنی.
SVG رو برای مرورگرهای قدیمی سازگار کنی و اون‌ها رو در وردپرس استفاده کنی.

اهداف یادگیری
تفاوت SVG و فونت‌های آیکونی – چرا SVG بهتر از آیکون فونت‌ها هست؟
دریافت آیکون‌های آماده‌ی SVG – از کجا می‌تونی SVGهای آماده پیدا کنی؟
ساخت آیکون‌های اختصاصی – چطور خودت SVG طراحی کنی؟
افزودن آیکون‌های SVG به صفحات وب – چطور از SVG در سایت استفاده کنی؟
قرار دادن SVG به‌عنوان المان inline یا تصویر پس‌زمینه – کدوم روش بهتره؟
استفاده از اسپرایت‌های SVG داخلی و خارجی – چطوری بهینه‌تر کار کنیم؟
خودکارسازی ساخت SVG با Grunticon – چطور کار با SVG‌ها رو سریع‌تر و راحت‌تر کنیم؟
به‌کارگیری SVG در وردپرس – چطور SVG رو توی سایت‌های وردپرسی اضافه کنیم؟