تفاوت بین فایل  PNG و  SVG

اگر با طراحی سر و کار دارید، پس حتماً با فرمت‌های مختلف هم رو به رو هستید. این فرمت‌های متنوع هر کدام کاربرد و امتیازات خاص خود را دارند. اما همین تنوع ممکن است گاهی باعث سردرگمی‌شود که باید کدام را برای خروجی یا دانلود انتخاب کنیم؟ برای همین در ادامه می‌خواهیم به طور خاص در مورد تفاوت ۲ تا از رایج‌ترین فرمت فایل‌ها یعنی PNG و SVG و ویژگی‌های منفی و مثبتشان صحبت کنیم. با ما همراه باشید.

PNG چیست؟

PNG مخفف عبارت Portable Network Graphics  است و یک فرمت رایج برای فایل‌های تصاویر پیکسلی (یا همان Raster) است. پس تمام تصاویری که با فرمت PNG هستند پیکسلی‌اند. برای همین آن‌ها را نمی‌توانیم به هر اندازه‌ای که بخواهیم درآوریم (در صورتی که فایل‌های وکتور را می‌توانیم).

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

ویژگی‌های مثبت:

• وقتی بک‌گراند ترنسپرنت بخواهید، PNG این امکان را برای شما فراهم می‌کند.
• با بک‌گراند ترنسپرنت می‌توانید مثلاً یک لوگو را به راحتی بردارید و به هر جایی که می‌خواهید (مثلاً برای چاپ، طراحی دیجیتالی، وب و … ) اضافه کنید.
• PNG برای طرح‌های دیجیتالی کیفیت بهتری را نسبت به JPEG ارائه می‌دهد.

ویژگی‌های منفی:

• وقتی روی یک فایل PNG زوم می‌کنید، تصویر پیکسلی می‌شود و هر چه بیشتر زوم کنید این پیکسل‌ها نمایان‌تر می‌شوند.
• در طراحی‌هایی مثل طراحی یو‌آی که اندازۀ آیکون‌ها و … باید متغیر باشند تا خاصیت Responsive (پاسخگو) بودن طراحی حفظ شود، PNG این امکان را فراهم نمی‌کند و در اندازۀ دسکتاپ تا موبایل یکسان است.
• فایل PNG لایه‌بندی ندارد.
• این نوع فایل‌ها را نمی‌توان راحت ادیت کرد.
• اگر قرار باشد طرحی را پرینت بگیرید، فرمت PNG برای آن چندان انتخاب خوبی نیست.

SVG چیست؟

SVG مخفف Scalable Vector Graphic است و فرمت رایجی برای فایل‌های برداری (وکتور) است. تمام فایل‌های SVG را می‌توانید به هر ابعادی بدون از دست دادن کیفیت و وضح تغییر دهید (یعنی خاصیت مقیاس‌پذیری دارد).

تفاوت اصلی PNG و SVG در این است که SVG برای طرح‌های انیمیشن مناسب است و خاصیت مقیاس‌پذیری دارد. حالا به سراغ ویژگی‌های مثبت و منفی SVG می‌رویم.

ویژگی‌های مثبت:

• طرح‌های با فرمت SVG را می‌توان تبدیل به انیمه کرد.
• در CSS به راحتی استفاده می‌شود و می‌تواند با آن هماهنگ شود.
• فایل SVG لایه‌بندی شده است. پس ادیت آن هم راحت‌تر است.
• از فایل SVG می‌توان برای خاصیت Responsive بودن استفاده کرد. چون اندازۀ آن بسته به اندازۀ صفحه نمایش تغییر می‌کند.

ویژگی‌های منفی:

• فرمت SVG برای عکس‌ها مناسب نیست.
• بعضی از مرورگرها و برنامه‌های ایمیل فایل‌های SVG را نمی‌خوانند.
• این فرمت برای طرح‌هایی که قرار است پرینت گرفته شوند، مناسب نیست.

انتخاب بین  PNG و  SVG

حالا که با هم ویژگی‌های مثبت ومنفی فایل‌های PNG و SVG را دیدیم، بیایید ببینیم برای چه کاری باید کدام را انتخاب کنیم. درست است که هر دو فرمت  PNG و  SVGرا می‌توان برای آیکون‌ها و تصویرسازی‌ها انتخاب کرد، اما اینجا در مورد بهترین و درست‌ترین انتخاب برای کاربردهای مختلف صحبت می‌کنیم:

۱/ انتخاب بین  PNG و  SVG برای دانلود یک فایل در حالت کلی

فرض کنید می‌خواهید یک فایل را دانلود کنید و باید بین فرمت‌های PNG و SVG یکی را برای آن انتخاب کنید:

اگر می‌خواهید از این فایل در یک طراحی دیجیتالی استفاده کنید که لازم نیست Responsive باشد یا قرار است بعداً کارتان را پرینت بگیرید، PNG را انتخاب کنید. در این حالت سعی کنید بزرگترین اندازۀ ممکن را دانلود کنید که بهترین کیفیت را داشته باشید. چون همانطور که گفتیم اگر بعداً بخواهید اندازۀ یک فایل‌ PNG را بزرگ‌تر کنید، کیفیت را از دست می‌دهید.

اگر این فایل مربوط به یک آیکون برای طراحی یو‌آی/ یو‌ایکس است که می‌خواهید Responsive باشد، SVG را انتخاب کنید.

۲/ برای دانلود یک فایل تصویرسازی

حالا فرض کنید می‌خواهید یک فایل مربوط به تصویرسازی را دانلود کنید. شما یا باید فایل را به عنوان یک طرح ثابت (استاتیک) دانلود کنید و یا به عنوان طرحی که بعداً قرار است انیمه شود. برای هر یک از این دو می‌توانید PNG و SVG را انتخاب کنید. اما برای بهترین انتخاب باید به این نکات دقت کنید:

دانلود به عنوان یک طرح ثابت:

• اگر قرار نیست بعداً روی رنگ یا لایه‌های آن فایل کار کنید و آن‌ها را تغییر دهید، PNG را انتخاب کنید. مثلاً وقتی فایل را برای یک طراحی دیجیتالی غیر Responisive یا برای پرینت گرفتن می‌خواهید.
• اگر می‌خواهید بعداً رنگ و لایه‌های آن فایل را تغییر دهید، SVG را انتخاب کنید.

دانلود به عنوان طرحی که می‌خواهید تبدیل انیمه کنید:

• برای دانلود فایل‌هایی که قرار است تبدیل به انیمیشن شوند، PNG کلاً انتخاب خوبی نیست.
• اگر قرار است بعد از این که فایل را انیمه کردید، در طراحی اپلیکیشن ها یا طراحی وب از آن استفاده کنید، از بین بقیۀ انتخاب هایی که دارید SVG را انتخاب کنید.

۳/ برای طراحی لوگو

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

• بهترین انتخاب PNG است. چون از لوگویی که فرمتش PNG باشد می‌توان همه جا به راحتی استفاده کرد (به دلیل بک‌گراند ترنسپرنتی که دارد). جاهایی مثل وب‌سایت، طراحی های دیجیتالی، چاپ و … .
• اگر قرار است لوگو را برای مشتری ارسال کنید، بهتر است آن را در سه کیفیت پایین (Low) ، کیفیت متوسط (Medium) و کیفیت بالا (High) خروجی بگیرید و بفرستید.

۴/ برای طراحی آیکون

• اگر می‌خواهید برای مشتری آیکون‌هایی را برای اپلیکیشن یا وب‌سایت طراحی کنید، هر دو فرمت PNG و SVG را برای آن‌ها ارسال کنید تا برای هر استفاده‌ای از آن آیکون‌ها همۀ انتخاب‌ها را داشته باشند.

۵/ برای طراحی وب‌سایت

اگر در حال طراحی وب‌سایت هستید و نمی‌دانید برای هر قسمت و عنصر کدام فرمت را باید انتخاب کنید، به موارد زیر توجه کنید:

• عکس‌ها باید PNG باشند.
• لوگوهایی که در Header (سربرگ) هستند، بسته به نوع تنظیمات Header می‌توانند PNG یا SVG باشند. در بیشتر تِم‌ها برای طراحی وب‌سایت‌ خودشان در قسمت Header یک تحرک کوچک یکپارچه ایجاد می‌کنند. اما اگر اینطور نبود، از SVG استفاده کنید.
• عنصرهایی که قرار است تصویرسازی‌های متحرک و در عین حال مقیاس‌پذیر باشند، باید SVG باشند. اما اگر قرار است اندازه‌شان ثابت بماند، می‌توانید از فرمت GIF استفاده کنید.
• برای آیکون‌ها هم اگر می‌خواهید مقیاس پذیر باشند و در صفحه نمایش‌های مختلف با اندازه‌های مختلف نشان داده شوند، SVG را انتخاب کنید. در غیر این صورت می‌توانید PNG را برای آیکون‌هایی که اندازه‌شان تغییر نمی‌کند انتخاب کنید.

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