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