Blog post

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

آبان ۸, ۱۳۹۶امین حمیدی

Scalable Vector Graphics یا به اختصار (SVG) زبانی است از نوع XML که از آن برای ایجاد و انتشار گرافیک های دو بعدیِ مقیاس پذیر (scalable) که اغلب در طراحی و ساخت صفحات وب استفاده میشود . به عنوان استانداردی جدید از سوی کنسرسیوم وب جهان‌شمول (W3C)، اس‌وی‌جی باعث کوچک‌تر گردیدن، سریع‌تر بودن، و تعاملی‌تر (interactive) شدن اسناد دربردارندهٔ گرافیک و انیمیشن بر روی وب می‌گردد. نرم‌افزارهای گوناگونی از جمله Adobe illustrator برای ساختن تصاویر اس‌وی‌جی به کار می‌روند. (ویکی پدیا)

 مزایای استفاده از SVG

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

۱- مقایس پذیر بودن

مورد اول که برای هرکسی در طراحی وب مهم هست مقیاس پذیر بودن تصاویری هست که استفاده میکنه . قبل از آشنایی با SVG من از تصاویر غیر قابل مقیاس استفاده میکردم (PNG,JPG) که خب مشخصاً هم حجمشون نسبت به اس وی جی بالاتر هست و هم اینکه با تغییر سایز صفحه یا زوم شدن صفحه کیفیتشون رو از دست میدادن . بعد از اون سراغ Icon Font ها رفتم که رایج ترینش فکر میکنم FontAwesome باشه اما اونا هم به نظرم حجم بالایی دارند و اینکه انعطاف پذیر (flexible) نیستند. انعطاف پذیر از این نظر که شما میتونید یک رنگ و نهایتا گرادینت بهشون بدین ( یا اگر بخواید بیشتر تغییرش بدین دردسرهای بیشتری دارین ) و در کل قدرت مانور نسبتا پایینی دارید . البته مزایایی هم دارند که از توضیح اونها صرف نظر میکنم .

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

۲- انعطاف پذیری بالا در تصویر سازی

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

۳- کم حجم بودن و سرعت لود بالا

یکی از مزایای استفاده از SVG در کار این هست که اغلب فایل های SVG حجم کمی رو اشغال میکنن ( چه به صورت اکسترنال چه داخل کد اصلی سایت ) و سرعت لود سایت را در مقایسه با تصاویر PNG و JPEG بالا میبرن . طراحان وب زیادی از تکنیک Sprite در استفاده از آیکون ها و تصاویر در سایت استفاده میکنن که فرمت اون فایل Sprite.PNG هست . معمولا حجمی بالاتر از ۱۰۰ کیلوبایت داره و اگر شما قصد داشته باشید برای صفحات Retina  یا دستگاه های با تراکم پیکسلی بالا هم سایتتون رو بهینه کنید یا یک ورژن ۲x یا ۴x رو هم درست کنید و که معمولا حجمی ۲برابر تا ۴برابر نسخه اولیه داره و در صورت عدم استفاده از این فایل ها کیفیت تصاویر بسیار پایین میان و Blur میشن . در مطلب بعدی خودم قصد دارم از تکنیک SVG Sprite براتون بنویسم که کارتونو بسیار راحت و سریع میکنه .

۴- انعطاف پذیری بالا در ایجاد انیمیشن های حرفه ای

برای من جذاب ترین قابلیت SVG این هست که میتونم به وسیله اون انیمیشن های حرفه ای در صفحه درست کنم و در مقایسه با  Canvas از نظر من راحت تر هست ( هر چند که در بعضی موارد کاربرد متفاوتی دارن ) . شما به وسیله css و در حالت پیشرفته تر به کمک کتابخانه ها و پلتفورم های جاوا اسکریپت میتونید صفحات پویا و جذابتری رو بسازید . نمونه های این اینتراکشن (interaction) های زیبا رو میتونید در سایت های Dribbble ، Uplabs ، UIMovement و … ببینید . در مطالب بعدی پلتفورم ها و نحوه استفاده از اون ها رو برای ساختن انیمیشن های اس وی جی رو به شما معرفی خواهم کرد .

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

نظرات کاربران

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

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

پست قبلی پست بعدی