SVG — це формат, який обирають для логотипів, іконок та ілюстрацій, бо це вектор: він описує фігури за допомогою математики, тож залишається ідеально чітким за будь-якого розміру, зберігаючи при цьому крихітний розмір файлу. Але не кожен інструмент розуміє SVG. Соціальні платформи, програми для презентацій, багато фоторедакторів і чимало форм завантаження очікують растрове зображення на кшталт PNG. Коли таке трапляється, ви конвертуєте SVG у PNG.
Цей посібник пояснює, як конвертувати SVG у PNG, не отримавши розмитого результату, яке налаштування має найбільше значення і коли краще залишити SVG.
Вектор проти растру: чому для конвертації потрібен розмір
Ключова різниця між SVG і PNG пояснює все про конвертацію між ними. SVG не залежить від роздільної здатності: він не має фіксованих розмірів у пікселях і може бути намальований будь-якого розміру на вимогу. PNG — це фіксована сітка пікселів, тож у ньому закладена одна конкретна роздільна здатність.
Конвертація SVG у PNG називається растеризацією: вектор перетворюється на сітку пікселів обраного розміру. Цей вибір розміру — найважливіше рішення під час конвертації, адже щойно PNG створено, збільшення його понад наявну роздільну здатність зробить його розмитим — саме те обмеження, якого SVG мав уникнути.
Оберіть правильну роздільну здатність
Щоб ваш PNG залишався чітким, рендеріть його у найбільшому розмірі, у якому ви його справді показуватимете, або більшому. Кілька рекомендацій:
- **Відповідайте розміру відображення.** Якщо логотип з'являтиметься завширшки 300 пікселів, експортуйте PNG щонайменше такої ширини.
- **Враховуйте екрани з високою роздільною здатністю.** Сучасні телефони й ноутбуки мають додаткові пікселі, тож експорт удвічі чи втричі більшого за розмір відображення зберігає зображення чітким на них.
- **Якщо сумніваєтеся, беріть більше.** PNG, більший за потрібний, можна акуратно зменшити; надто малий не можна збільшити без розмиття.
Оскільки SVG не має власної роздільної здатності, хороший конвертер дає змогу обрати вихідні розміри. Вибір щедрого розміру — найпростіший спосіб гарантувати чіткий результат.
Як конвертувати SVG у PNG
Найшвидший спосіб, без жодних інсталяцій, — конвертер у браузері. Скористайтеся безкоштовним конвертером SVG у PNG: додайте свій SVG, конвертуйте та завантажте PNG, готовий до використання будь-де, де приймаються растрові зображення. Він рендерить вектор у чисті пікселі та зберігає прозорість, тож логотип на прозорому тлі залишається прозорим.
Це ідеально, коли вам потрібен швидкий PNG для соцпрофілю, презентації, документа чи будь-якого інструмента, який не приймає SVG напряму.
Прозорість зберігається
Одна перевага конвертації у PNG, а не у JPG, — прозорість. PNG підтримує повний альфа-канал, тож прозорі ділянки вашого SVG — простір навколо логотипа, наприклад — залишаються прозорими у PNG. Якби ви конвертували у JPG, ці ділянки заповнилися б суцільним кольором, бо JPG не має прозорості. Для логотипів та іконок PNG майже завжди є правильним растровим форматом.
Коли залишити SVG
Конвертуйте у PNG лише тоді, коли щось цього вимагає. Для всього, що ви контролюєте — сайт, застосунок чи файл дизайну — залиште SVG. Він залишатиметься чітким на кожному екрані та за будь-якого розміру, зазвичай він менший за PNG високої роздільної здатності для простої графіки, і його можна перестилізувати кодом. Растеризація у PNG прив'язує зображення до однієї роздільної здатності та позбавляє цих переваг.
Корисна звичка: зберігайте SVG як головну копію та експортуйте з нього PNG щоразу, коли конкретний інструмент цього потребує. Так у вас завжди буде масштабований оригінал, з яким можна працювати. Щоб дізнатися більше про формат, див. Що таке файл SVG.
SVG, PNG чи щось інше?
Якщо ви зважуєте формати для проєкту, коротка версія така: використовуйте SVG для логотипів, іконок і плоских ілюстрацій; використовуйте PNG, коли потрібна растрова версія з прозорістю чи чіткими краями; а JPG, WebP або AVIF — для фотографій. Повну схему вибору для кожного формату див. у статті Як обрати правильний формат зображення для вебу, а про растрову прозорість загалом — JPG проти PNG.