اس وی جی (SVG) چیه و چیکار میکنه ؟

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

اصلا svg چی هست ؟

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

توی دنیای کامپیوتر دو نوع گرافیک برای عکس ها داریم ؛ یکی Raster و دیگری Vector ... حالا تفاوت بین این دو تا چیه ؟

• توی Raster Graphics که بهش گرافیک شطرنجی هم میگن ، تصویر ها به صورت پیکسلی هستن ، خب طبیعتا هر کدوم از این پیکسل ها رنگ خاص خودشو داره و جداگونه ذخیره میشن . حتما هممون این نوع عکس ها رو دیدیم ؛ چون همه ی فرمت های bmp، jpg ، و gif از این دسته هستن . ویژگی این مدل تصاویر این هست که با بزرگ تر شدنشون کیفیتشون کمتر میشه ، به نوعی اندازه تصویر روی کیفیتش تاثیر میگذاره .

• توی Vector Graphics که بهش گرافیک بُرداری میگن ، یک تصویر مجموعه ای از نقطه ها ، خط ها ، منحنی ها و چندضلعی ها هستش . این نوع گرافیک با مختصات ریاضی سروکار داره . تصور کنید یک محور x و y ترسیم شده و هرکدوم از این بردار ها با متوجه به مختصاتی که دارن ترسیم شدن و سرجای خودشون قرار گرفتن (اینو در نظر بگیرین که منظور از بردار صرفا یک خط راست نیست ). این شکلی به مرورگر دستور میدیم در فلان نقطه ، فلان بردار رو ترسیم کن . در این مدل از تصاویر کیفیت به اندازه وابسته نیست و به طور کلی مستقل از رزولوشن هستن .

و در نهایت :

اس وی جی مخفف عبارت Scalable Vector Graphic هست و یکی از شناخته شده ترین فرمت های ذخیره ی فایل های گرافیک برداری هست .

این رو هم بدونین که حجم فایل های SVG در مقایسه با تصاویر پیکسلی کمتره و قابل ویرایش هم هستن.

چرا از SVG استفاده کنیم ؟

همون طور که بالا هم بهش اشاره شد svg کیفیت بالاتری داره ، کیفیتش با بزرگتر شدن تصویر کم نمیشه و حجم کمتری هم داره . خب چی بهتر از این ؟

و اما در مورد دیگر مزیت استفاده از SVG :

۱. تصاویر svg خودشون responsive هستن و دیگه نیازی نیست نگران این قضیه باشین . یعنی اندازه تصویر به طور خودکار متناسب با اندازه ی صفحه ی نمایش تنظیم میشه .

۲. به خاطر ساختاری که در طراحی وب دارن ( توی عنوان بعدی در موردش توضیح دادم ) ، با css و javascript سازگاری دارن . به این صورت که میشه برای تگ های svg ، آیدی و کلاس تعریف کرد و توی فایل css مربوطه استایل دلخواه رو براش تعریف کنیم . از طرف دیگه چون svg با DOM سازگاری داره میتونیم با javscript هر تغییری که دوست داریم روش اعمال کنیم .

از SVG چطوری توی طراحی وب استفاده میشه ؟

باید بگم که svg بر اساس XML هست ... به همین دلیل خب شباهت زیادی به HTML داره و اگر شما HTML و CSS بلد باشی استفاده از svg برای شما به شدت آسونه . svg هم مثل HTML یکسری تگ داره و شما برای ترسیم شکل های مختلف میتونی از اون ها استفاده بکنی . برای مثال از تگ </circle> برای کشیدن دایره استفاده میشه . اینجارو ببین :

این مثال از سایت w3schools هست ، اگه دوست داری SVG رو یاد بگیری اینجا رو کلیک کن .

باید بگم تا امروز من هم چیز زیادی از svg نمی دونستم و در واقع با هم دیگه باهاش آشنا شدیم .

واقعا بدرد بخوره و از آشنایی باهاش خوشحالم =) ...

شما چطور ؟ تا حالا تجربه ی استفاده ازش رو داشتین ؟

راستی ... اگه دوستی داری که فکر میکنی این مقاله به دردش میخوره یادت نره واسش بفرستی ^__*