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

بخش های مقاله

• گرافیک وکتور

• گرافیک رستر یا بیتمپ(پیکسلی)

• گرافیک وکتور در برابر گرافیکی پیکسلی( بیتمپ)

• لوگوی شبکه‌های اجتماعی و برندهای معروف با فرمت SVG

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

گرافیک وکتور

• وکتور چیست ؟

مروزه هرکسی که با طراحی گرافیک کامپیوتری سروکار داشته باشد، به نوعی در آثار خود از وکتور کمک می‌گیرد. در امور گرافیکی، دو دسته اصلی به نام گرافیک برداری (وکتور) و «گرافیک شطرنجی» Raster Graphics یا رستر bitmap وجود دارد که در ادامه با آن‌ها آشنا می‌شویم. لازم به ذکر است که «اثر هنری وکتور» Vector Artwork به اثری می‌گویند که توسط گرافیک برداری تهیه شده باشد. از این نوع گرافیک بمنظور درج لوگو شرکت‌ها بر روی کارت ویزیت، طراحی پوستر، طراحی جلد کتاب و … استفاده می‌شود.

• وکتور

گرافیک برداری از روابط ریاضی برای طراحی استفاده می‌کند. این روابط ریاضی به نقاطی تبدیل می‌شوند و این نقاط به کمک خط‌ها و منحنی‌ها به یکدیگر متصل خواهند شد که در برخی موارد «مسیر برداری» Vector Path نام دارند. در اثر این اتفاق، تصاویر وکتوری را بدون از دست دادن کیفیت، می‌توان با حفظ حجم کم،‌ به مقیاس‌های بسیار بزرگ تبدیل کرد. در تصویر زیر مشاهده می‌کنید که با افزایش مقیاس تصویر، کیفیت آن کاهش پیدا نمی‌کند.

گرافیک رستر(پیکسلی)

• رستر

گرافیک‌های رستر (bitmap)، از مربع‌های بسیار کوچکی به نام پیکسل تشکیل شده‌اند. زمانی که یک تصویر رستر ـ با اندازه مشخص پیکسل – ایجاد شود، نمی‌توان آن‌را بدون افت کیفیت، بزرگ کرد. هر قدر تعدد پیکسل‌های یک تصویر، بزرگتر باشد، حجم فایل حاوی آن نیز بزرگتر خواهد بود زیرا هر پیکسل از فایل نیاز به حافظه‌ای دارد که در کامپیوتر ذخیره و نگهداری می‌شود. در تصویر زیر می‌بینید که با بزرگتر کردن تصویر، کیفیت آن کاهش پیدا می‌کند

گرافیک وکتور در برابر گرافیکی پیکسلی( بیتمپ)

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

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

لوگوی شبکه‌های اجتماعی و برندهای معروف با فرمت SVG

یکی از روش‌های قرار دادن لوگوی شبکه‌های اجتماعی معروف مثل توییتر و سرویس‌های ارتباط جمعی مثل تلگرام در وب‌سایت‌ها، استفاده از آیکون‌های فونتی معروف به اسم Font Awesome است. این فونت در حال حاضر حجمی در حدود ۹۰ کیلوبایت دارد و بیش از ۹۰۰ آیکون مختلف برای طراحی وب و اپلیکیشن را در خود جمع کرده است.

گزینه‌ی دوم استفاده از عکس‌های PNG است. آیکون توییتر با رزولوشن ۵۱۲ در ۵۱۲ پیکسل و فرمت PNG از نظر حجم حدود ۲۰ کیلوبایت فضا اشغال می‌کند که عدد بزرگی است. همین آیکون با تبدیل شدن به فرمت SVG، تنها ۴۲۵ بایت یا حدود ۰.۵ کیلوبایت حجم خواهد داشت که بسیار کم است.

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

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

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

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

سخن پایانی

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

ممنون که تا اینجا با من همراه بودین، لطفا نظراتتون رو از طریق کامنت ارسال کنید