کار با تصاویر همیشه برای طراحان وب سایت یک دغدغه و چالش برانگیز بوده و هست. تصور کنید میخواهید برای کاور یک پست یک تصویر انتخاب یا طراحی کنید. در صفحه بلاگ تصویر باید به صورت تمام عرض و با نسبت 16:9 باشه و در قسمت آخرین مطالب در ساید بار باید با عرض 250PX و با نسبت 1:1 و یا در جایی دیگر ممکنه با عرض و نسبت دیگر نمایش داده بشه. اگر با وردپرس کار کرده باشید میدونید که وردپرس این مشکل را با برش زدن عکس و ذخیره کردن آن با ابعاد متفاوت حل کرده. اما اینجا مشکل دیگری به وجود می آید حجم فضای اشغال شده و تصاویر برش خورده. در نهایت آرزو میکنیم ای کاش تصاویر با کیفیتی داشتیم که میشد تا هر اندازه ای که بخواهیم اون رو بزرگ کنیم بدون اینکه نگران افت کیفیت، سرعت بارگزاری و غیره… باشیم. اینجاست که SVGمثل یک منجی ظهور میکنه! البته این یکی از قابلیتهای کوچک این نوع تصاویر است. در این مقاله قراره بیشتر با کاربرد تصاویر SVG در طراحی وب‌سایت بشیم و به کمک اونها طرح‌هایی جذابتر و پویاتر رو اجرا کنیم.
کاربرد تصاویر SVG در طراحی وب‌سایت
عبارت Scalable Vector Graphics است که می توان معادل “نگاره‌سازی برداری مقیاس‌پذیر” را در فارسی برای آن در نظر گرفت?!
تمام گرافیکهای دنیای دیجیتال دونوعند RASTER و VECTOR
برای ایجاد گرافیکهای RASTER یا گرافیک شطرنجی از پیکسل ها استفاده میشه این تصاویر به صورت مجموعه‌ای از پیکسل‌ها ذخیره میشه ( اطلاعات هر پیکسل به صورت جداگانه ذخیره میشه). تغییر اندازه این تصاویر کیفیت آنها را تحث تاثیر قرار می دهد. اکثر فرمت‌های رایج فایلهای تصویری مانند jpg، gif، و png بر مبنای گرافیک شطرنجی هستند.
اما گرافیکهای Vector یا گرافیک برداری روشی در تولید و ذخیرهٔ فایلهای تصویری کامپیوتری است که در آن تصویر در قالب مجموعه‌ای از مشخصات هندسی نقاط، خط‌ها، منحنی‌ها و چندضلعی‌ها ذخیره می‌شود. تصاویر تعریف شده به کمک گرافیک برداری، از خطوط و منحنی‌هایی به نام بردار تشکیل شده‌اند که به صورت ریاضی تعریف می‌شوند. اجزای این تصاویر را میتوان بدون از دست دادن کیفیت به راحتی جا به جا کرد یا تغییر اندازه داد. این تصاویر مستقل از رزولوشن هستند و میتوان آنها را بزرگ و کوچک کرد و در هر رزولوشن بدون از دست دادن جزئیات و وضوح چاپ کرد. یکی از شناخته شده ترین فرمت‌های ذخیرهٔ فایلهای گرافیک برداری، فرمت SVG است. هرچند ما از واژه تصویر استفاده میکنیم اما فایلهای SVG فایلهایی متنی بوده که ساختاری بر اساس XML دارند. این یعنی سینتکس آن خیلی هم عجیب و غریب نخواهد بود و به HTML شباهت دارد. به این صورت که برای ترسیم شکل های مختلف تگ های مختلف وجود دارد مثلا برای ترسیم دایره از تگ <circle /> استفاده می شود و در نهایت همه اشکال، درون یک تگ <svg /> قرار می گیرند.
چرا باید ازتصاویر SVG در طراحی وب‌سایت استفاده کنیم؟
مستقل از رزولوشن
یکی از نقاط قوت SVG این است که در صفحه نمایش هایی با کیفیت بسیار بالا هم به بهترین شکل نمایش داده می شود و کیفیتش تغییر نمی کند. برخلاف تصاویر Raster که کیفیت خود را از دست می دهند و مجبوریم برای صفحه نمایش هایی با کیفیت بالاتر نسخه با کیفیت تری از تصویر را نمایش دهیم.روی تصویر زیرکلیک کنید و تاجایی که امکان داره اون رو زوم کنید.
دیگر مهم نیست اندازه تصویر چه باشد، یا چقدر کاربر Zoom کند و یا اینکه کیفیت صفحه نمایش کاربر چه اندازه باشد. در همه این موارد SVG با همان کیفیت تند و تیز نمایش داده میشه!
سازگار با CSS
از اونجایی که SVG هم مثل HTML یک مارکاپ است و برای تولید آن میشه از تگ های استاندارد استفاده نمود پس می توان برای اون Class یا id منحصر به فرد تعیین کرد و از طریق در CSS برخی از ویژگی های آن را تغییر دارد عمرا بشه این کار رو با یک تصویر raster انجام داد!
تعامل پذیری ساده از طریق جاوااسکریپت
به همان دلیلی که SVG با CSS سازگار است می توان گفت که به راحتی می توان از طریق جاواسکریپت با آن تعامل داشت و مواردی مثل انیمیشن و غیره را به راحتی پیاده و در نتیجه تجربه کاربری و تعاملی خوبی را به سادگی برای کاربر مهیا کرد.
درخواست HTTP
هر زمان که بواسطه تگ <img> از تصویری به صورت عادی در یک صفحه وب استفاده کنید مرورگر برای ترسیم آن تصویر یک درخواست HTTP به سرور می فرستد تا تصویر را از سرور گرفته و نمایش دهد. اگر از روش خطی برای SVG استفاده کنیم (روشی که در آن تگ SVG را به صورت مستقیم در فایل HTML قرار می دهیم) دیگر نیازی به یک درخواست جداگانه برای تصویر ما نخواهد بود.
افزایش دسترس پذیری
تصور کنید شخصی به هر دلیلی مجبور باشد که از یک صفحه خوان برای مرور کردن صفحه وب استفاده کند (مثلا مشکلات بینایی داشته باشد) در حالت عادی آیکونی که از طریق یک فونت آیکونی ساخته شده باشد و یا یک تصویر ساده باشد هیچ معنایی برایش نخواهد داشت اما وقتی از SVG استفاده کنیم می توانیم برای آن شخص هم نوشته ای برای آن آیکون قرار دهیم که او را راهنمایی کند. در دنیای وب موضوعات این چنینی را با عنوان Accessibility مطرح می کنند و SVG در این زمینه بصورت های مختلفی کمک بسیار بزرگی خواهد بود.
با نرم افزار و بدون نرم افزار! قابل ویرایشه
برای ایجاد و یا ویرایش تصاویر SVG می توان از نرم افزارهای گرافیک برداری مثل Adobe Illustrator استفاده کرد. اما اگر به این نرم افزارها دسترسی نداشتید هم مهم نیست با یک ویرایشگر متن باز هم میتوان تصاویر SVG ساده را تغییر داد. ابزارهای آنلاین هم که به وفور در دسترس است.
حجم فایل کمتر زندگی راحت تر
ترسیمات وکتور معمولا حجم کمتری را می گیرند مخصوصا اگر شکل و طرح ساده ای داشته باشند. پس فایل تصویر ما سایز کمتری خواهد داشت. همچنین فشرده سازی بصورت بهتری روی SVG اعمال می شود. پس می توان از نظر سایز صفحه وب هم با استفاده از SVG صرفه جویی داشته باشیم که از نظر کارایی کمک بسیار خوبی برای سایت ما خواهد بود.
طراحی واکنشگرا با خونریزی کمتر
در طراحی واکنشگرا، واکنشگرا کردن تصاویر کم دردسر دارد. اگر تصویر شما به صورت SVG باشد دیگر نگرانی برای واکنشگرا بودن آن نخواهید داشت. ولی در صورت استفاده از تصاویری با فرمت PNG یا JPG شاید مجبور شوید تا در صفحه نمایش‌های مختلف نسخه‌های مختلفی از آن تصاویر را قرار دهید.
چه موقع از تصاویر SVG در طراحی وب‌سایت استفاده کنیم؟
استفاده از تصاویر SVG و قابلیتهاش میتونه کاربردهای زیادی داشته باشه که به مهارت و خلاقیت شما بستگی داره ما سعی میکنیم توی دوره های آموزشی SVG هم مهارت و هم خلاقیت شما رو افزایش بدیم تا بهتر در طرحاتون از این تصاویر استفاده کنید اما اگر بخواهم فهرست وار بگم بهترین موارد استفاده SVG عبارتند از:
• آیکون ها
• ترسیمات ساده مثل شکل های مختلف
• بنرهای تبلیغاتی
• بنر ها و یا تصاویر متحرک
• اینفوگراف ها و مصورسازی داده ها
• ایجاد تصاویر تعاملی
