معرفی SVG در طراحی وب سایت

معرفی svg در طراحی وب سایت و مزایای استفاده از آن

SVG مخفف عبارت Scalable Vector Graphics است که یا به اختصار SVG “اس وی جی”  گفته می شود. svg زبانی از نوع XML است که از آن برای ایجاد و انتشار گرافیک های دو بعدیِ مقیاس پذیر (scalable) که اغلب در طراحی و ساخت صفحات وب استفاده میشود .

به عنوان استانداردی جدید از سوی کنسرسیوم وب جهان‌شمول (W3C)، اس‌وی‌جی باعث کوچک‌تر گردیدن، سریع‌تر بودن، و تعاملی‌تر (interactive) شدن اسناد دربردارندهٔ گرافیک و انیمیشن بر روی وب می‌گردد. نرم‌افزارهای گوناگونی از جمله Adobe illustrator برای ساختن تصاویر اس‌وی‌جی به کار می‌روند.

(مشاهده مقاله svg در ویکی پدیا)

در معرفی svg در طراحی وب سایت به استفاده از مزایای آن می پردازیم.

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

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

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

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

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

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

یکی از مزایای استفاده از SVG در کار این هست که اغلب فایل های SVG حجم کمی رو اشغال میکنن ( چه به صورت اکسترنال چه داخل کد اصلی سایت ) و سرعت لود سایت را در مقایسه با تصاویر PNG و JPEG بالا میبرن .

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

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

در این مطلب به معرفی svg پرداختیم، در قسمت های بعدی آموزش های بیشتری از طراحی سایت با svg قرار خواهیم داد.