وبلاگ
SVG یا PNG: کدام یک را در طراحی سایت…
SVG یا PNG: کدام یک را در طراحی سایت استفاده کنیم؟ – امروزه در شبکه جهانی وب، فرمت‌ها و پسوندهای فایل‌ها بسیار زیادی وجود دارد. در این مقاله، ما در مورد دو مورد از محبوبترین آنها بحث خواهیم کرد: PNG و SVG. این دو قالب اغلب اشتباه گرفته می‌شوند و در حد توان بالقوه خود، مورد استفاده قرار نمی‌گیرند. ما در مورد تفاوت بین آنها و بهترین روش‌های استفاده از آن در پروژه‌های طراحی سایت بحث خواهیم کرد.
SVG (scalable vector graphics) یک فرمت فایل‌های تصویری است که به طور خاص برای طراحی وکتورهای دو بعدی و وکتور-شطرنجی گرافیکی برای وب سایتها ایجاد شده است و برای نمایش تصاویر مبتنی بر بردار استفاده می‌شود.
SVG مقیاس‌پذیر است و داده‌های مسیر برداری را می‌گیرد و آن را به XML تبدیل می‌کند تا در یک مرورگر وب نمایش داده شود. اگر چه که این فرمت را می‌توان با استفاده از هر نرم‌افزار متنی ایجاد کرد، اما روش معمول ایجاد آن نرم‌افزارهای Adobe Illustrator یا Sketch هستند.
از آنجایی که SVG کاملا از کد تشکیل شده‌اند، می‌توانند در هر اندازه‌ای بزرگ یا کوچک شده و در عین حال وضوح کاملی داشته باشند.
PNG (portable network graphics) یک قالب تصویری شطرنجی است که برای تصاویر تمام رنگی (عمدتا عکس‌ها) با کیفیت خوب استفاده می‌شود و از رنگ 32 بیتی (16 میلیون رنگ) و سطح 256 ترانسپارنتی پشتیبانی می‌کند: 0 یا 100. نسبت فشرده‌سازی نسبتا بالایی دارد و از ترانسپارنتی پیتشبانی می‌کند. گرچه به عنوان جایگزینی برای GIF ایجاد شده است، اما از انیمیشن پشتیبانی نمی‌کند و در مقایسه با فایل اولیه تنها 5 تا 20 درصد فشرده‌تر است.
هر دو قالب فایل بسیار توسط طراحان وب سایتها استفاده می‌شود. اما سوال اینجاست که کدام یک بهتر است؟ و جواب این سوال به هدف از کاربرد فایل تصویری بستگی دارد.
نقاط مثبت و منفی SVG
ویژگی‌هایی که در زیر به آن اشاره شده است، موجب شده است که قالب SVG گزینه مطلوب‌تری برای طراحان سایت و متخصصان سئو باشد:
- بسیار فشرده و سبک است. کیفیت تصویر بدون در نظر گرفتن میزان فشرده‌سازی همچنان حفظ می‌شود و بالا باقی می‌ماند.
- به راحتی مقیاس‌پذیر است، بنابراین بدون توجه به اندازه تصویر در صفحه وب خوب به نظر خواهد آمد.
- این فرمت توسط تمام مرورگرهای موجود و مدرن (Chrome، Opera، Firefox، Safari و حتیInternet Explorer) پشتیبانی می‌شود.
- متن درج شده در این قالب به عنوان یک لایه جداگانه است و موجب شده است که به راحتی قابل جستجو باشد.
- این قالب به طراحان این امکان را می‌دهد که تصاویر را به صورت ثابت یا متحرک ذخیره کنند.
- ویرایش این تصاویر با تغییر پارامترها در کد CSS آسان است.
اما با این حال، استفاده از این فرمت برای هر هدفی مناسب نیست. زیرا:
- همچنان ممکن است برخی از مرورگرها با این فرمت مشکل داشته باشند، مخصوصا وقتی صحبت از سرویس‌های گیرنده ایمیل و نسخه های قدیمی نرم افزارها باشد.
- این فرمت برای عکس‌ها (photos) مناسب نیست، زیرا در اصل، گرافیک برداری برای کار با شکل‌ها، خطوط و غیره بود.
- استفاده از این فرمت در نرم‌افزارهای نقشه، که نمایش یک قطعه کوچک از تصویر به خواندن یک فایل کامل نیاز دارد، مشکل است.
آیا SVG بهتر از PNG است؟
مانند PNG، قالب SVG نیز از ترانسپارنتی پشتیبانی می‌کند، برای تصاویر متن‌دار مناسب است و فشرده‌سازی بدون افت کیفیت را تضمین می‌کند.
فرمت SVG، برای طراحی آیکون‌ها در طراحی سایت و اجزایی که می‌بایست واکنشگر باشند، مناسب است. هنگامی که می خواهید تصاویر شفاف داشته باشید که به راحتی بزرگ یا کوچک شود، یا به انیمیشن‌های سبک نیاز دارید و یا قصد تغییر ابعاد مکرر یا سریع تصاویر را دارید، این فرمت بهترین گزینه است.
در مقابل از فرمت PNG برای تصاویر استاتیک کوچک، آرم‌ها، عناصر ناوبری، تصاویر چاپی و سایر تصاویر با پس زمینه شفاف و لبه‌های دقیق و خشن استفاده می‌شود.
بهترین باش
