SVG در برابر PNG: برای لوگو، آیکون و اسکرینشات کدام فرمت فایل را انتخاب کنیم
SVG برای لوگو، آیکون و شکلهای ساده. PNG برای اسکرینشات و آثار پر جزئیات. یک قلب یکسان در هر دو فرمت با زوم زیاد، حجم واقعی فایل‌ها، یک جدول تصمیم‌گیری و پاسخ سؤال‌هایی که طراحان جست‌وجو میکنند.
هر ابزار طراحی هنگام خروجی گرفتن همین سؤال را می‌پرسد: SVG یا PNG؟ در اندازه‌ای که روی آن کار می‌کنید هر دو یکسان به نظر می‌رسند، برای همین آدم‌ها هر کدام را که از قبل انتخاب شده باشد می‌زنند. تفاوت بعداً خودش را نشان میدهد: روی یک صفحهنمایش بزرگتر، در یک صفحه کندتر یا وقتی رنگ برند باید عوض شود. این هم همان آیکون در دو فرمت، هزینه هر کدام و جدولی برای موقعیت‌هایی که در هر پروژه پیش میآید.
تفاوت واقعی چیست: مسیر یا پیکسل
SVG دستورالعمل ذخیره می‌کند: این منحنی را بکش و با این رنگ پر کن. PNG شبکه‌ای از پیکسلهای رنگی ذخیره می‌کند، یک مقدار برای هر نقطه. همین یک تفاوت بقیه چیزها را توضیح میدهد.
دستورالعمل را میشود در هر اندازه اجرا کرد، پس منحنی هر بار نرم از نو کشیده میشود. شبکه تعداد ثابتی نقطه دارد، پس صفحهنمایش بزرگتر مجبور است آن‌ها را بکشد و باز کند. SVG یک فرمت وکتور است و PNG یک فرمت رستر. هر دو استانداردهای باز W3C هستند و پنل خروجی Figma هر دو را کنار هم پیشنهاد میدهد.
همان قلب، با زوم خیلی زیاد
در اندازه عادی دو قلب یکسان‌اند. زوم کنید، دیگر یک فایل نیستند.
SVG، زوم‌شده
PNG، زوم‌شده
قلب سمت چپ در اندازه جدید از روی مسیرش دوباره کشیده میشود، پس لبه هنوز یک منحنی تمیز است. قلب سمت راست یک رندر 12 در 12 پیکسلی از همان آیکون است که با درون‌یابی نزدیک‌ترین همسایه بزرگ شده، برای همین تک‌تک پیکسلها پیداست. صفحه‌نمایش‌های واقعی این کار را نرم‌تر انجام می‌دهند، با محو کردن به جای مربعی شدن، اما علت همان است: فایل هیچ‌وقت آن جزئیات را نداشته.
راه‌حل PNG این است که بزرگتر خروجی بگیرید، که دقیقاً همان هزینه‌اش هم هست.
تغییر رنگ با کد: یک فایل، هر رنگ
SVG متن است. رنگش یک attribute است، پس یک stylesheet می‌تواند بدون خروجی جدید آن را عوض کند.
.icon { fill: currentColor; }
.icon:hover { fill: #FF3B30; }
حالت hover، حالت تاریک و تم‌های برند هرکدام یک خط میشوند. PNG برای هر رنگ و هر اندازه یک فایل جدید می‌خواهد.
حجم فایل: بستگی دارد چه چیزی در تصویر باشد
قلب بالا را اندازه گرفتیم. SVG برابر 290 بایت است. PNG در همان اندازه ظاهری با تعداد پیکسلها بزرگتر میشود.
| آیکون قلب | حجم |
|---|---|
| SVG (هر اندازه) | 290 بایت |
| PNG در 24 پیکسل | 393 بایت |
| PNG در 48 پیکسل | 739 بایت |
| PNG در 96 پیکسل | 1,386 بایت |
| PNG در 192 پیکسل | 2,883 بایت |
| PNG در 512 پیکسل | 10,400 بایت |
برای شکلهای ساده، SVG ثابت می‌ماند و PNG با هر اندازه‌ای که ارائه می‌کنید چند برابر میشود. برای تصاویر پر جزئیات برعکس است. ما یک کارت 1200 در 800 با پس‌زمینه گرادیانت و سایه نرم خروجی گرفتیم: PNG برابر 55,365 بایت شد، JPG با کیفیت 80 برابر 15,248 و WebP با کیفیت 80 برابر 4,970. گرادیانت‌ها و سایه‌های نرم سایه‌های رنگی بی‌شمار دارند و SVG برای تقلیدشان به فیلتر یا تعداد عظیمی شکل نیاز دارد.
چه وقت PNG انتخاب درستی است
PNG وقتی انتخاب درست است که تصویر از شکلهای تمیز ساخته نشده باشد:
- اسکرین‌شات‌ها. یک پنجره مرورگر یا صفحه کامل یک اپ با سایه‌های نرم و رندر واقعی متن، ذاتاً پیکسل است. PNG آن‌ها را دقیق نگه می‌دارد.
- آثار پر جزئیات. بافت ریز، دانه و سایه‌زنی نقاشی‌شده به مسیر تبدیل نمی‌شوند.
- تصاویر شفاف غیرساده. PNG از شفافیت پشتیبانی می‌کند، پس یک برش با لبه نرم روی هر پس‌زمینه‌ای کار می‌کند.
یک هشدار: PNG ساخته‌شده از لوگو یک PNG با اندازه ثابت است. SVG را بهعنوان فایل اصلی نگه دارید و فقط جایی که چیزی نمی‌تواند SVG بخواند از آن PNG خروجی بگیرید.
چه وقت SVG انتخاب درستی است
- لوگوها. یک فایل برای هدر وب‌سایت، favicon و بیلبورد. برای مجموعه کامل، از جمله PDF، AI و EPS، توضیح فرمت‌های فایل لوگو را ببینید.
- آیکون‌ها. مجموعه آیکون tab bar یا نوار ابزار که با CSS برای هر حالت رنگ می‌گیرد. Lucide، یکی از پرکاربردترین مجموعه آیکون‌های متن‌باز، هر آیکون را به شکل SVG ارائه می‌کند.
- شکل‌ها و تصویرسازی‌های ساده. شکلهای تخت رنگی، جداکننده‌ها، بج‌ها و نمودارها.
جایی که SVG کم می‌آورد: فایلی با هزاران شکل سنگین میشود و بعضی جاها مثل کلاینت‌های ایمیل، پیش‌نمایش اشتراک‌گذاری در شبکههای اجتماعی و اپ‌های قدیمی‌تر ممکن است آن را نمایش ندهند. آنجا از PNG استفاده کنید.
عکس‌ها چه؟
هیچکدام. عکس از دوربین گوشی 2026 تُن پیوسته دارد، که دقیقاً چیزی است که وکتور در آن بد است و PNG در آن حجیم. از JPG یا WebP استفاده کنید که عکس را خیلی بهتر از PNG فشرده میکنند. WebP در مرورگرهای امروزی پشتیبانی میشود.
SVG یا PNG: جدول تصمیم
| دارایی | انتخاب | چرا |
|---|---|---|
| لوگو در وب‌سایت | SVG | در هر اندازه تیز، فایل ریز |
| Favicon | SVG، به‌علاوه PNG جایگزین | مرورگرهای مدرن SVG می‌گیرند، بعضی جاها هنوز PNG می‌خواهند |
| مجموعه آیکون UI | SVG | رنگ‌دهی هر حالت با CSS |
| تصویرسازی با شکلهای تخت | SVG | کوچک و تیز می‌ماند |
| نمودار یا دیاگرام | SVG | متن و خطوط شفاف می‌مانند |
| اسکرینشات اپ | PNG | پیکسلها خودِ محتوا هستند |
| اثر نقاشی‌شده یا بافت‌دار | PNG | برای مسیرها بیش از حد پر جزئیات است |
| تصویر با سایه نرم و گرادیانت | PNG یا WebP | سایه‌های رنگی بی‌شمار، وکتور با آن درگیر میشود |
| عکس | JPG یا WebP | کوچک‌ترین فایل با ظاهر یکسان |
| تصویر پیش‌نمایش ایمیل یا شبکه اجتماعی | PNG | پشتیبانی گسترده، بدون غافلگیری SVG |
سؤالات متداول
آیا SVG بهتر از PNG است؟
برای لوگو، آیکون و شکلهای ساده بله: در هر اندازه تیزتر است و معمولاً کوچکتر. برای اسکرینشات و آثار پر جزئیات، PNG فرمت بهتری است. هیچکدام در همهچیز برنده نیست.
برای لوگو SVG بگیرم یا PNG؟
SVG. آن را بهعنوان فایل اصلی نگه دارید و برای جاهایی که نمیتوانند SVG نمایش دهند، مثل بعضی ابزارهای ایمیل و شبکههای اجتماعی، از آن PNG خروجی بگیرید.
آیا SVG از PNG کوچکتر است؟
برای شکلهای ساده بله، همانطور که قلب بالا نشان میدهد: 290 بایت در برابر 393 تا 10,400 بایت بسته به اندازه. برای تصاویر پر جزئیات برعکس است، چون SVG برای توصیفشان به شکلهای زیادی نیاز دارد.
آیا میتوانم رنگ PNG را مثل SVG عوض کنم؟
بهصورت تمیز نه. fill در SVG یک attribute متنی است که با CSS عوض میشود. PNG پیکسلهای پختهشده است، پس رنگ جدید یعنی خروجی جدید.
چرا PNG من وقتی زوم میکنم تار میشود؟
PNG شبکه ثابتی از پیکسلها دارد. وقتی بزرگتر از اندازه خودش نمایش داده شود، صفحهنمایش آن پیکسلها را میکشد و لبهها تار یا مربعی میشوند. در اندازه بزرگتر خروجی بگیرید، یا اگر تصویر یک شکل ساده است از SVG استفاده کنید.
آیا برای عکس JPG یا WebP بهتر از PNG است؟
بله. عکس را خیلی بهتر فشرده میکنند، پس صفحه سریعتر بالا میآید. PNG را برای اسکرینشات، متن تیز و گرافیک نگه دارید.
منابع
- Scalable Vector Graphics (SVG) 2، W3C.
- Portable Network Graphics (PNG) Specification، W3C.
- Image file type and format guide، MDN Web Docs.
- حجم فایل‌ها را خودمان با sharp اندازه گرفتیم: مسیر یک قلب 24 در 24 بهصورت SVG و بهصورت PNG در پنج اندازه، و یک کارت 1200 در 800 با گرادیانت و سایه بهصورت PNG، JPG و WebP با کیفیت 80.
- ابتدا بهصورت کاروسل در UX Brainy منتشر شد.
Want your logo, icons and UI exported and organized as one system, ready for every screen? Our team designs and hands over the full set.
Get Started
