آموزشفناوری
موضوعات داغ

فرمتSVG یا Scalable Vector Graphics چیست؟

فرمتSVG یا Scalable Vector Graphics و مزایا استفاده در طراحی سایت

فرمتSVG یا Scalable Vector Graphics است که می توان به فارسی آن را به نگاره‌سازی برداری مقیاس‌پذیر :) ترجمه کرد.

ما می خواهیم تا همه تصاویر و ترسیمات در سایت هایی که خلق می کنیم.

به بهترین، زیباترین، و با کیفیت ترین حالت ممکن قابل مشاهده باشند.

همچنین بدلیل Performance و یا همان کارایی می خواهیم اندازه فایل را کم نگه داریم.

برای رسیدن به این هدف در مورد آیکون ها، لوگوها و ترسیمات ساده در سایت فقط یک راه وجود دارد.

SVG چیست؟

فرمتSVG یا Scalable Vector Graphics (فرمت SVG ) زبانی‌ست از نوع اکس‌ام‌ال که به منظور ایجاد، انتشار، و کار با گرافیک دوبعدی و نیز کاربردهای گرافیکی بر روی اینترنت ایجاد گردیده است.

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

خب این یعنی چی؟

در دنیای کامپیوتر ترسیمات می توانند از دو نوع Raster یا Vector باشند.

در Raster Graphics یا گرافیک شطرنجی تصویر به صورت مجموعه‌ای از پیکسل‌ها ذخیره می‌شود و رنگ هر پیکسل به طور جداگانه ذخیره می‌شود.

تغییر اندازه این تصاویر کیفیت آنها را تحث تاثیر قرار می دهد.

اکثر فرمت‌های رایج فایل‌های تصویری مانند jpg، gif، و bmp بر مبنای گرافیک شطرنجی هستند.

فرمتSVG یا Scalable Vector Graphics یا گرافیک برداری روشی در تولید و ذخیرهٔ فایل‌های تصویری کامپیوتری است.

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

واژهٔ «بردار» در این کاربرد معنایی وسیع‌تر از یک خط راست دارد.

تصاویر تعریف شده به کمک گرافیک برداری، از خطوط و منحنی‌هایی به نام بردار تشکیل شده‌اند.

که به صورت ریاضی تعریف می‌شوند.

اجزای این تصاویر را می‌توان بدون از دست دادن کیفیت به راحتی جا به جا کرد و تغییر اندازه داد.

این تصاویر مستقل از رزولوشن هستند و می‌توان آنها را بزرگ و کوچک کرد و در هر رزولوشن بدون از دست دادن جزئیات و وضوح چاپ کرد.

یکی از شناخته شده ترین فرمت‌های ذخیرهٔ فایل‌های گرافیک برداری،فرمتSVG یا Scalable Vector Graphics است.

فرمتSVG یا Scalable Vector Graphics

SVG بر اساس XML است این یعنی سینتکس آن خیلی هم غریبه نخواهد بود و به HTML شباهت دارد.

به این صورت که برای ترسیم شکل های مختلف تگ های مختلف وجود دارد مثلا برای ترسیم دایره از تگ <circle /> استفاده می شود و در نهایت همه اشکال، درون یک تگ <svg /> قرار می گیرند.

چرا فرمتSVG یا Scalable Vector Graphics ؟

مستقل از رزولوشن

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

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

دیگر مهم نیست اندازه تصویر چه باشد، یا چقدر کاربر Zoom کند و یا کیفیت صفحه نمایش کاربر چه اندازه باشد.

در همه این موارد SVG قصه ما همان حالت با کیفیت و تیزش را حفظ می کند. :)

سازگار با CSS

از اونجایی که فرمتSVG یا Scalable Vector Graphics هم مثل HTML یک مارکاپ است می تواند Class یا id داشته باشد و از آن طریق در CSS می تواند در دسترس باشد.

پس می توانیم روی ترسیمات برداری از طریق css کارهای زیادی انجام دهیم.

که این کار برای ترسیمات Raster امکان پذیر نمی باشد.

فرض کنید مستطیلی را از طریق SVG ساخته ایم می توانیم رنگ آن را بصورت های مختلف تغییر دهیم.

ولی اگر همان مستطیل از نوع تصاویر معمولی مثلا با فرمت PNG بود می توان گفت دیگر این امکان برای ما وجود نداشت.

تعامل پذیری ساده از طریق جاوااسکریپت

به همان دلیلی که SVG با CSS سازگار است می توان گفت که به راحتی می توان از طریق جاواسکریپت با آن تعامل داشت.  مواردی مثل انیمیشن و غیره را به راحتی پیاده و در نتیجه تجربه کاربری و تعاملی خوبی را به سادگی برای کاربر مهیا کرد.

درخواست HTTP کمتر زندگی بهتر

هر زمان که بواسطه تگ <img> از تصویری به صورت عادی در یک صفحه وب استفاده کنید.

مرورگر برای ترسیم آن تصویر یک درخواست HTTP به سرور می فرستد تا تصویر را از سرور گرفته و نمایش دهد.

اگر از روش خطی برای SVG استفاده کنیم SVG بصورت مستقیم در فایل HTML قرار دارد و دیگر نیازی به یک درخواست جداگانه برای تصویر ما نخواهد بود.

به فکر همه باشیم

اگر شخصی به هر دلیلی مجبور باشد که از یک صفحه خوان برای مرور کردن صفحه وب استفاده کند (مثلا مشکلات بینایی داشته باشد) در حالت عادی آیکونی که از طریق یک فونت آیکونی ساخته شده باشد و یا یک تصویر ساده باشد هیچ معنایی برایش نخواهد داشت.

اما وقتی از SVG استفاده کنیم می توانیم برای آن شخص هم نوشته ای برای آن آیکون قرار دهیم که او را راهنمایی کند.

در دنیای وب موضوعات این چنینی را با عنوان Accessibility مطرح می کنند و SVG در این زمینه بصورت های مختلفی کمک بسیار بزرگی خواهد بود.

ویرایش ساده

برای تغییر یک فایل SVG فقط به یک ویرایشگر متن نیاز داریم.

این یعنی در همان محیط کدنویسی می توانیم ویراش مورد نظرمان را انجام دهیم.

اما اگر یک تصویر Raster را بخواهیم ویرایش کنیم باید به فوتوشاب یا مشابه آن پناه ببریم.

حجم فایل کمتر

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

پس فایل تصویر ما سایز کمتری خواهد داشت. همچنین فشرده سازی بصورت بهتری روی SVG اعمال می شود.

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

طراحی واکنشگرا با درد کمتر

در طراحی واکنشگرا، واکنشگرا کردن تصاویر یک درد سر بزرگ است. اگر تصویر شما می تواند بصورت SVG باشد.

دیگر نگرانی برای واکنشگرا بودن آن نخواهید داشت. ولی در صورت استفاده از تصاویری با فرمت PNG یا JPG شاید مجبور شوید تا در صفحه نمایش های مختلف نسخه های مختلفی از آن تصاویر را قرار دهید.

چه موقع فرمتSVG یا Scalable Vector Graphics ؟

بهترین موارد استفاده فرمتSVG یا Scalable Vector Graphics :

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

نمایش آن بوسیله فرمتSVG یا Scalable Vector Graphics  منطقی نخواهد بود چرا که در این مورد حجم فایل به مراتب بیشتر از فرمت PNG یا JPG خواهد بود.

همیشه قبل از استفاده، فرمت های مختلف را با هم مقایسه کنید. در شرایط مختلف نتایج متفاوت وجود دارد.فرمتSVG یا Scalable Vector Graphics

 

تفاوت فرمتSVG یا Scalable Vector Graphics و Canvas

Canvas مثل یک بوم نقاشی است که بصورت مستقیم در دسترس جاوااسکریپت قرار می گیرد و ترسیمات از این طریق روی آن انجام می شود. اما نتیجه Canvas همیشه گرافیک شطرنجی یا همان Raster می باشد.

اگر دنبال راهی برای ترسیم یک گرافیک ساده بر روی صفحه وب هستید فرمتSVG یا Scalable Vector Graphics جواب شما خواهد بود.

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

نرم‌افزار Inkscape ویرایش‌گر متن‌باز تصاویر برداری فرمتSVG یا Scalable Vector Graphics با قابلیت‌هایی مشابه Illustrator ، CorelDraw ، یا Xara X با استفاده از فرمت استاندارد W3C یا همان فرمتSVG یا Scalable Vector Graphics است. Inkscape بسیاری از امکانات پیشرفته فرمت SVG را پشتیبانی می‌کند

علاوه بر موارد ذکر شده امکان خروجی گرفتن در فرمت‌هایی نظیر ( ، PDF PNG ، EPS ، EMF ، WMF و غیره) را داراست. و از طریق برنامه‌های جانبی نیز می‌توان به شکل گروهی فرمت هزاران فایل را با این نرم‌افزار تبدیل کرد (ConversionSVG)

برنامه متن‌باز دیگری نیز البته وجود دارد به نام Uniconvertor که استفاده از آن آسان و مناسب برای تبدیل سریع تعداد زیادی فایل است. علاوه بر این از تعداد زیادی فرمت نیز پشتبانی می‌کند. فرمت SVGZ  نیز نسخه فشرده شده SVG است.

فرمتSVG یا Scalable Vector Graphics

تفاوت تصاویر ساخته شده از طریق پیکسل و بردار

قابلیتهای فرمتSVG یا Scalable Vector Graphics :

  • کاملا قابلیت zoom کردن و pan کردن را دارد
  • قابلیت موقعیت یابی پیکسل
  • کیفیت بالای گرادیانت، سایه و سایر افکتها
  • کنترل رنگ و دقت رنگ بهبود یافته
  • بالاترین رزولوشن ممکن برای چاپ شدن
  • کنترل بهتر روی type مانند kerning، متن روی خط و تعداد نامحدود فونت
  • متن قابل ویرایش و جستجو شدن
  • قابلیت جستجوی متن درون گرافیک
  • محتوا و انیمیشن dynamic و قابلیت ارتباط برقرار کردن با کاربر به صورت script نویسی
  • سایز کوچک برای download
  • پشتیبانی از CSS
  • درجه های مختلف شفافیت (transparency)
  • پشتیبانی برای سایر دستگاهها شامل GPS و موبایلها
  • این فرمت توسط برنامه های بسیاری قابل خواندن است ، حتی notepad !
  • حجم این فایل ها از فرمت های پیکسلی کم تر است .
  • این عکس ها قابلیت تغییر اندازه بدون از دست دادن کیفیت را دارند .
  • متون نوشته شده در این عکس ها بصورت TEXT بوده و قابل انتخاب و جستجو میباشد.
  • فرمتSVG یا Scalable Vector Graphics با تکنولوژی جاوا کار میکند .و یک استاندارد است .
  • فایل های SVG کاملا XML هستند .

تصاویر SVG در فایل های HTML

به منظور نشان دادن تصاویر با فرمتSVG یا Scalable Vector Graphics در فایل های HTML از سه کد استفاده می شود:

  1. تگ Embed
  2. تگ Object
  3. تگ iframe

شایان ذکر است با تمام مزایای فرمتSVG یا Scalable Vector Graphics تنها نرم افزارهای کمی جهت طراحی تصاویر با این فرمت وجود دارند مانند:

  • Illustrator
  • CorelDraw
  • Xara
  • Inkscape

نرم افزار فتوشاپ همانطور که ملاحظه می نمایید جزوء این نرم افزارها نمی باشد.

چگونه PNG و JPG رابه فرمتSVG یا Scalable Vector Graphics تبدیل کنیم؟

دو فرمت معروف و اصلی عکس در انواع وسایل و سیستم عامل‌ها، JPG و PNG است.

اگر روی این فایل‌ها بیش از حد زوم کنیم، کیفیت افت پیدا می‌کند.

نوع دیگر تصویر، فرمت وکتوری SVG است که اگر روی آن زوم کنیم، کیفیت کم نمی‌شود.

درست مثل بزرگ کردن فونت یا زوم کردن روی خطوطی که معادله خط خاصی دارند.

در طراحی وب و امور گرافیکی دیگر، معمولاً از فرمت‌های JPG و PNG استفاده می‌شود.

هر دو فرمت با زوم کردن و بزرگ کردن بیش از حد، بی‌کیفیت می‌شوند.

چرا که نوع گرافیک، پیکسلی یا bitmap است و نه برداری یا وکتوری.

در گرافیک برداری، همه چیز با خطوط و منحنی‌ها شکل می‌گیرد و هر چه روی تصویر زوم کنیم، کیفیت افت پیدا نمی‌کند چرا که ذاتاً با معادله‌ی خط و منحنی روبرو هستیم و نه پیکسل‌ها.

بسته به پیچیدگی اشکال و هندسه، ممکن است فرمتSVG یا Scalable Vector Graphics از نظر حجم فایل نیز بهینه‌تر از PNG و JPG باشد.

حتی اگر فرمتSVG یا Scalable Vector Graphics از نظر حجم فایل، بزرگ‌تر از PNG و JPG باشد.

باز هم می‌توان استفاده از آن را در طراحی ریسپانسیو توجیه کرد.

چرا که در طراحی ریسپانسیو یک وب‌سایت، عرض برخی عکس‌ها مثل لوگوی وب‌سایت، معادل عرض صفحه نمایش گوشی یا تبلت است.

به این ترتیب اگر گوشی بزرگ و رزولوشن بالا باشد، ممکن است لوگو بیش از حد بزرگ شده و کیفیت آن کم شود.

در نتیجه طراح مجبور می‌شود از PNG با رزولوشن بالاتری استفاده کند.

در مورد فرمتSVG یا Scalable Vector Graphics این محدودیت وجود ندارد و می‌توان یک عکس با حجم متوسط را در ابزارهای کوچک و بزرگ استفاده کرد.

گرافیک وکتوری هم مثل گرافیک پیکسلی می‌تواند متحرک باشد.

در واقع به جای فرمت GIF می‌توان فرمتSVG یا Scalable Vector Graphics متحرک استفاده کرد.

مثل آیکون لود شدن زیر که تنها ۲ کیلوبایت حجم دارد.

فرمتSVG یا Scalable Vector Graphics

چگونه PNG یا JPG را به عکس وکتوری با فرمتSVG یا Scalable Vector Graphics تبدیل کنیم؟

برای تبدیل کردن عکس‌های معمولی به عکس وکتوری می‌توان از نرم‌افزارهای تخصصی برای ویرایش فرمت‌های برداری مثل Adobe Illustrator استفاده کرد. نرم‌افزارهای دیگری مثل Inkscape و نرم‌افزار Draw از مجموعه‌ی آفیس رایگان LibreOffice نیز یکی از گزینه‌های جالب است.

برخی وب‌اپلیکیشن‌های رایگان نیز برای تبدیل فرمت‌های مختلف عکس موجود است و از فرمتSVG یا Scalable Vector Graphics پشتیبانی می‌کند. نمونه‌ی آن Aconvert است، نرم‌افزاری آنلاین که به صورت رایگان این کار را انجام می‌دهد. نرم‌افزار دیگر Vectorizer است که به صورت آنلاین و رایگان، تصاویر معمولی را به وکتور تبدیل می‌کند و تنظیمات جالب توجهی نیز در آن پیش‌بینی شده است. در ادامه به روش تبدیل فرمت‌ها به فرمتSVG یا Scalable Vector Graphics توسط این سرویس‌های رایگان و آنلاین، اشاره می‌کنیم.

چگونه لوگوها و … را با Vectorizer به SVG تبدیل کنیم؟

به وب‌سایت Vectorizer مراجعه کنید و روی دکمه‌ی vectorize image کلیک کنید. می‌توان عکس‌های PNG و JPEG و BMP با حجم حداکثر ۱ مگابایت را به عنوان ورودی انتخاب کرد. پس از مدتی کوتاه، ورودی یا Input در سمت چپ صفحه در کنار خروجی یا Output در سمت راست، نمایان می‌شود. می‌توان روی دکمه‌ی Download کرد و خروجی را دانلود کرد. اما بهتر است کمی با تنظیمات کار کنید و حجم خروجی را بهینه کنید.

فرمتSVG یا Scalable Vector Graphics

از مهم‌ترین تنظیمات برای کاهش حجم فایل، مشخص کردن حداکثر تعداد رنگ‌ها است.

اگر لوگوی فلت و ساده‌ای دارید و یا فایل PNG که به عنوان ورودی انتخاب کرده‌اید.

رنگ‌های کم‌تنوعی دارد، تعداد Max Colors یا حداکثر رنگ‌ها را کاهش دهید.

ویژگی مهم بعدی، Tolerance است. منظور از تلرانس یا خطا این است.

که در شناسایی خطوط و منحنی‌ها چقدر خطا مجاز است و به عبارت دیگر حین تبدیل چقدر می‌توان جزئیات و نویزها را حذف کرد و ساده‌سازی انجام داد.

تلرانس بیشتر به معنی کاهش حجم فایل SVG است و دقت آن نیز کمتر می‌شود.

در سمت راست نیز می‌توانید Min Area را افزایش دهید.

تا دقت خروجی کمتر شود و حجم فایل کاهش پیدا کند.

نرم‌افزار Inkscape

Inkscape نرم افزاری متن باز برای گرافیک های برداری (Vector) نظیر برنامه های Adobe Illustrator، Corel Draw، Freehand و Xara X است.

تصاویر وکتور دارای مشخصاتی متفاوت از تصاویر Bitmap است.

که بارزترین آن ها، امکان بزرگنمایی تصاویر تا حد دلخواه بدون افت پیکسل است که این مورد به دلیل شیوه نگارش برداری تصاویر است.

Inkscape بر خلاف نرم افزار های بر پایه Bitmap نظیر Photoshop و Gimp تصاویر خود را بر اساس Vector ایجاد می نماید.

Inkscape از مطرح ترین نرم افزار های برداری است که به صورت کاملا رایگان و متن باز منتشر می شود.

آموزش بیشتر در کانال آپارات : www.aparat.com/amozeshisho

نویسنده و گردآورنده : محمد باغدار

نمایش بیشتر

amozeshisho.com

مدرس و طراح کسب وکارهای اینترنتی

دیدگاهتان را بنویسید

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

دکمه بازگشت به بالا