اس وی جی اسپرایت – استفاده از SVG Sprite به جای آیکون فونت ها و …

در پست قبلی خودم در مورد اس وی جی و ومزایای استفاده از اون برای شما توضیح دادم . اس وی جی اسپرایت (SVG Sprite) یکی از مواردی هست که به من در پیاده سازی وب سایت ها بسیار کمک میکنه و علاوه بر کم کردن حجم تصاویر و آیکون های استفاده شده در سایت و افزایش سرعت لود سایت ، استفاده کردنش در قسمت های مختلف سایت هم بسیار آسون هست و کارتون رو راحت میکنه . با من همراه باشید تا در ادامه در مورد SVG Sprite بحث کنیم .

مشکل و راه حل چیست ؟

در نگاه اول به وجود اومدن هرچیزی برای حل یک مشکل برای شخص یا اشخاصی بوده . شکل گرفتن ایده اسپرایت ها و بعد از اون اس وی جی اسپرایت هم برای حل مشکلی بوده که در ادامه خواهم گفت . در حال حاضر بسیاری از سایت ها به استفاده از SVG در سایتشون روی آوردند که به طور رایج با استفاده از تگ <img> یا اینکه به صورت inline در کد استفاده میکنند که هر دو مشکلاتی دارند . اگر شما اس وی جی رو با استفاده از <img> در سایت استفاده کنید شما دسترسی به محتوای اون ندارید .

در ساده ترین حالت شما نمیتونید به stroke و stroke-width و fill و … دسترسی داشته باشید و باید هرچیزی رو که لازم هست از سورس اس وی جی تغییر بدین و این به این معنی هست که اگر از یک آیکون با استایل های متفاوت بخواید در چند جا استفاده کنید باید چند فایل مشابه با استایل های متفاوت بسازید که منطقی نیست . استفاده از SVG به صورت inline هم این مشکل رو داره و شما باید هر آیکون رو چند بار در یک صفحه یا در صفحات متفاوت تکرار کنید ( حتی اگر از لحاظ استایل هم مثل هم باشند ) .

SVG Sprite این مشکل رو برای شما حل خواهد کرد که برای شما توضیح خواهم داد .

آشنایی اسپرایت (Sprite)

ممکن هست بعضی از دوستان هنوز با اسپرایت آشنایی نداشته باشند . به زبان ساده اگر شما چندین آیکون رو در یک فایل کامباین کنید و چندین فایل رو تبدیل به یک فایل کنید، یک اسپرایت ساخته اید . به طور رایج در سایت هایی که از اسپرایت استفاده میکنند ، فایلی با فرمت PNG هست که اگر اون سایت برای رتینا هم بهینه شده باشه باید از یک فایل به اندازه دوبرابر هم استفاده کنه .

دسترسی به آیکون ها و تصاویر درون اسپرایت هم با کمک CSS و background-position صورت میگیره که به نظرم یک مقدار زمان بر هست مخصوصا اگر نخواید از ابزارهای آماده استفاده کنید و بخواید تک تک با فوتوشاپ اون هارو کنار هم قرار بدین و تک تک براشون کد مربوطشون رو تعریف کنید ( کاری که خودم انجام میدادم 😀 ) .

استفاده از اس وی جی اسپرایت (SVG Sprite)

ساده ترین راه استفاده از اس وی جی اسپرایت این هست که فایل های اس وی جی خودتون رو به صورت دستی یا با استفاده از Gulp یا Grunt در یک اس وی جی واحد جاسازی کنید که به کمک <symbol> یا در موارد کمی که دیدم با کمک تگ <g> این کار امکانپذیر هست و به هرکدوم از فایلهاتون یک ID مشخص بدین تا بهش دسترسی داشته باشین و در نهایت اس وی جی نهایی رو به صورت inline در قسمتی از سورس سایت بذارید و اون رو مخفی کنید  (display:none) .

بعد از اون هر قسمت از سایت که نیاز به استفاده از یک آیکون داشتید با استفاده از <use> یا در موارد کمی که دیدم با استفاده از <object> تصویر یا آیکون مورد نظرتون رو قرار بدین .

طبق معمول مشکل آزاردهنده ساپورت IE هست که اگر براتون مهم هست میتونید از پلاگین SVG4Everybody استفاده کنید که این پلاگین در مرورگرهایی که از <use> به خصوص به صورت external link پشتیبانی نمیکنن callback تصویر PNG میسازه و به کاربر نشون میده .

نمونه کد استفاده شده از اس وی جی اسپرایت هم برای شما میزارم تا بتونید تست کنید .

قسمت اول برای ساخت اس وی جی واحد : 

قسمت دوم برای قرار دادن آیکون با استفاده از اس وی جی اسپرایت : 

در نهایت خوشحال میشم که سوالات و ابهامات شما رو در این زمینه پاسخ بدم .

ممنون از وقتی که برای خوندن این پست گذاشتید .