فایل SVG و مزایای استفاده از آن

ما در عصر پیکسل زندگی می کنیم و به عنوان طراح و همچنین توسعه دهنده پیسکل ها می توانند هم دوست و هم دشمن…

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

SVG زبانی برای توصیف گرافیک ۲ بعدی و برنامه های گرافیکی در XML است. ​این تکنولوژی مخفف کلمات Scalable Vector Graphics میباشد. SVG برای ایجاد گرافیک های برداری در صفحات وب بکار میرود و با زوم روی عکس های SVG کیفیت آنها پایین نمی آید. هر المانی که در SVG می بینید میتواند نقاشی شود. SVG یکی از توصیه‌هایکنسرسیوم w3 میباشد زیرا با استفاده از این تکنولوژی جدید حجم عکس ها کاهش یافته و کیفیت انها در کلیه سایزها حفظ میشود.

قابلیتهای فرمت SVG

1-قابلیت موقعیت یابی پیکسل
2-کیفیت بالای گرادیانت، سایه و سایر افکتها
3-کنترل رنگ و دقت رنگ بهبود یافته
4-بالاترین رزولوشن ممکن برای چاپ شدن
5-کنترل بهتر روی type مانند kerning، متن روی خط و تعداد نامحدود فونت
6-متن قابل ویرایش و جستجو شدن
7-قابلیت جستجوی متن درون گرافیک
8-محتوا و انیمیشن dynamic و قابلیت ارتباط برقرار کردن با کاربر به صورت script نویسی
9-سایز کوچک برای download
10-پشتیبانی از CSS
11-درجه های مختلف شفافیت (transparency)
12-کاملا قابلیت zoom کردن و pan کردن را دارد.
13-پشتیبانی برای سایر دستگاهها شامل GPS و موبایلها

توضیح مهمترین قابلیت های SVG

مستقل از رزولوشن

یکی از نقاط قوت SVG این است که در صفحه نمایش هایی با کیفیت بسیار بالا هم به بهترین شکل نمایش داده می شود و کیفیتش تغییر نمی کند. برخلاف تصاویر Raster که کیفیت خود را از دست می دهند و مجبوریم برای صفحه نمایش هایی با کیفیت بالاتر نسخه با کیفیت تری از تصویر را نمایش دهیم.
دیگر مهم نیست اندازه تصویر چه باشد، یا چقدر کاربر Zoom کند و یا اینکه کیفیت صفحه نمایش کاربر چه اندازه باشد. در همه این موارد SVG قصه ما همان حالت با کیفیت و تیزش را حفظ می کند.

سازگار با CSS

از اونجایی که SVG هم مثل HTML یک مارکاپ است می تواند Class یا id داشته باشد و از آن طریق در CSS می تواند در دسترس باشد.
پس می توانیم روی ترسیمات برداری از طریق سی اس اس کارهای زیادی انجام دهیم که این کار برای ترسیمات Raster امکان پذیر نمی باشد.
فرض کنید مستطیلی را از طریق SVG ساخته ایم می توانیم رنگ آن را بصورت های مختلف تغییر دهیم ولی اگر همان مستطیل از نوع تصاویر معمولی مثلا با فرمت PNG بود می توان گفت دیگر این امکان برای ما وجود نداشت.

تعامل پذیری ساده از طریق جاوااسکریپت

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

حجم فایل کمتر

ترسیمات وکتور معمولا حجم کمتری را می گیرند مخصوصا اگر شکل و طرح ساده ای داشته باشند. پس فایل تصویر ما سایز کمتری خواهد داشت. همچنین فشرده سازیبصورت بهتری روی SVG اعمال می شود. پس می توان از نظر سایز صفحه وب هم با استفاده از SVG صرفه جویی داشته باشیم که از نظر کارایی کمک بسیار خوبی برای سایت ما خواهد بود.