تصاویر SVG چیست و چگونگی ایجاد آن با نرم افزار فتوشاپ

SVG  چیست؟

 SVG مخفف کلمه Scalable Vector Graphics   است که اگر بخواهیم  این واژه انگلیسی را به صورت فارسی ترجمه کنیم  میتوان گفت نگاره سازی برداری مقیاس پذیر شاید هنوز مفهوم این عبارت برای شما گنگ و نا اشنا باشد پس تا اخر این مطلب با ما همراه باشید. در دنیای وب و کامپیوتر ترسیمات می توانند به دو نوع تقسیم شوند Raster یا Vector در  اکثر فایل های رایج تصویری که  دست کم همه با آن اشنا هستیم مثل ( jpg، gif، و bmp ) بر پایه  مبنای گرافیک شطرنجی یا Raster هستند در Raster Graphics که به آن گرافیک شطرنجی هم گفته می شود ، حال بیاییم با هم یک تصویر SVG ایجاد کنیم.


آموزش ایجاد تصاویر SVG با نرم افزار فتوشاپ

ما به کمک نرم افزار فتوشاپ میتوانیم تصاویری با پسوند و ساختار svg ایجاد کنیم، برای اینکار از منوی File گزینه New و یا کلید ترکیبی Cntrl+N و یا دکمه آبی رنگ New File در نسخه 2022 توشاپ را انتخاب میکنیم و مشابه تصویر زیر عکسی با پس زمینه Transparent و مود رنگی RGB با اسم Chegoonegi.com در ابعاد 1000 در 1000 پیکسل  ایجاد میکنیم 

ایجاد تصویر SVG با فتوشاپ


حال که تصویر جدید را ایجاد کردیم با کمک ابزار Type و ابزار Shape یه تصویر تستی ایجاد میکنیم اگر با فتوشاپ آشنایی ندارید میتوانید با کمک "پکیج کاملترین آموزش ویدئویی فتوشاپ" آن را فراگیرید.

ایجاد Shape و ذخیره با پسوند SVG


حال از منوی File گزینه Export و سپس گزینه Export As را مطابق تصویر زیر انتخاب میکنیم (در فصل دهم پکیج فتوشاپ به صورت ویدئویی آموزش ایجاد تصاویر SVG توضیح داده شده است)

گرفتن خروجی SVG در فتوشاپ

در کادر Export As مطابق تصویر زیر Format را به SVG تغییر میدهیم و روی گزینه Export کلیک میکنیم ، مسیری را مشخص کرده و آن را ذخیره میکنیم

تنظیمان خروجی SVG در فتوشاپ

تصاویر SVG به طر پیش فرض با مرورگر باز میشود، و اگر cntrl را از روی کیبورد نگه داشته و دکمه + و با اسکرول ماوس را بچرخانید متوجه خواهید شد که تصویر ذره ای افت کیفیت نداشته و شما اولین تصویر SVG خود را با فتوشاپ خلق کردید.

باز شدن فایل SVG در مرورگر و زوم آن


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


SVG چیست و استفاده از آن چه مزایایی دارد؟


در دوره و عصری که ما یعنی طراحان و توسعه دهندگان وب در حال زندگی کردن هستیم پیکسل ها نقش مهم و حیاتی دارند که می توانند برای ما هم نقش یک دوست را داشته باشند و هم یک دشمن، در بخش های زیرین بیشتر درباره این مبحث صحبت خواهیم کرد، قطعا همه ما در طراحی سایتمان و یا عکس هایی که طراحی و ترسیم میکنیم این انتظار را داریم که تمامی تصاویر در دید بیننده ها در بهترین و با کیفیت ترین حالت ممکنشان قابل مشاهده باشند، حتما برای شما کاربران سایت چگونگی هم پیش امده که وارد سایتی شده باشید و بی کیفیتی و بهم ریختگی تصاویرش حسابی حالتان را گرفته باشد طراحان برای خلاص شدن از دست این نوع مشکلات از فرمت های SVG استفاده میکنند. به لطف SVG شما میتوانید تصاویری داشته باشید که به اندازه دلخواهتان ان ها را کوچک یا بزرگ کنید بدون اینکه نگران از بین رفتن کیفتشان باشید، یکی از بزرگترین مزایا فایل های SVG  این است که سرعت لود سایت را کاهش نمیدهند و همچنین فایل های svg به دلیل حجم پایینی که دارند برای طراحی صفحات وب بسیار مناسب هستند پس امکان ندارد شما یک طراح سایت باشید و فرمت SVG را نادیده بگیرید این بدین معنی نیست که  تصاویری با فرمت های png و jpg  برای شما کاربردی نخواهند داشت بلکه تصاویری با این فرمت ها کاربرد خودشان رو حفظ نموده و در کنارش svg ها هم به زندگی خودشان در دنیای وب ادامه میدهند. معمولا ترسیمات و لبه های تصاویر svg  دارای هر رزولوشنی و هر کیفیتی که باشند خیلی تیز و برنده اند اما با این حال میتوان گفت حجم بسیار کمتری نسبت به تصاویر پیکسلی دارند و خیلی راحت قابل تغییر و هرگونه ویرایشی هستند پس بی دلیل نیست در دنیای وب SVG  ها از محبوبیت زیادی برخوردارند. در ابتدا بهتر است به مفهوم دقیق SVG بپردازیم.

در Raster Graphics ذخیره شدن تصاویر به صورت مجموعه ای از پیکسل ها اتفاق می افتد یعنی به این صورت که رنگ هر پیکسل به صورت جداگانه ذخیره میشود، با اعمال تغییرات در ابعاد تصاویر کیفیت این تصاویر نیز تحت تاثیر قرار گرفته و کیفیت اصلی خودشان را از دست میدهند، دسته دوم Vector Graphics یا گرافیک برداری هستند که روشی هستند برای ذخیره و یا تولید فایل های تصویری کامپیوتری، در Vector Graphics  تصاویر به صورت مجموعه ای از مشخصات هندسی از جمله نقاط، خط ها و منحنی ها و یا چند ضلعی ها ذخیره میشوند، واژه بردار در اینجا فقط یک خط راست نیست بلکه کاربرد معنایی گسترده تر و وسیع تری دارد. معمولا تصاویری که به روش گرافیک برداری تعریف می شوند از منحنی و خطوطی به اسم بردار شکل میگیرند و به صورت ریاضی تعریف می شوند، نکته جالب در این نوع تصاویر این است که اجزای این تصاویر را بدون از بین رفتن کیفیت می توانید به راحتی تغییر اندازه داده و یا جا به جا کنید با بزرگ و یا کوچک کردن این تصاویر هیچ تغییری در رزولوشن ان ها ایجاد نشده و بدون از دست دادن وضوح و جزئیات تصاویر می توانید تصاویرتان را به چاپ برسانید یکی از مهم ترین و معرف ترین فرمت های ذخیره فایل های گرافیک برداری فرمت های SVG  هستند. لازم به ذکر است که فایل هایSVG بر اساس XML  هستند این بدین  معنی است که سینتکس آن خیلی هم  نا اشنا نخواهند بود و به HTML شباهت  زیادی دارد. برای مثال برای ترسیم شکل مربع از تگ استفاده میشود و در اخر تمامی اشکال درون یک تگ قرار می گیرند.

چرا باید فرمت های SVG  را انتخاب کنیم:

ویرایش ساده

زمانی که بخواهیم یک تصویر Raster  را تغییر دهیم باید از نرم افزارهایی همچون فتوشاپ و یا مشابه ان ها استفاده کنیم اما برای تغییر فایل های SVG در محیط کدنویسی می توانیم ویرایش های مورد نظرمان را انجام دهیم 

حجم فایل کمتر

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

طراحی واکنشگرا 

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


چه زمانی از SVG استفاده کنیم:

* آیکون ها

* بنرهای تبلیغاتی

* ترسیمات متحرک

* ترسیمات ساده مثل شکل های مختلف

*  اینفوگرافیک ها و مصور سازی داده


تفاوت های SVG  و CANVAS

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

نظرات

نظر خود را بنویسید