PNG і SVG.

Растрові й векторні зображення.

Основною відмінністю між файлами PNG і SVG є те, що перший формат файлу належить до растрового типу файлів, а другий – до векторного.

PNG є растровим форматом зображення, тобто складається з пікселів. Якщо занадто сильно збільшити растрове зображення, воно стане зернистим і пікселізованим. І навпаки: занадто сильне зменшення зображення призведе до його розмиття. Зображення у форматі PNG можуть мати дуже високу роздільну здатність, але їх не можна збільшувати нескінченно.

SVG-файли є векторними – вони створені на основі складної математичної системи ліній, точок, форм і алгоритмів. Такі файли можна збільшувати без втрати роздільної здатності.

Дізнатися більше про відмінності між растровими й векторними типами файлів

Розміри файлів.

PNG-файли часто є великими за розміром, тож їхня роздільна здатність може бути дуже високою. Великий розмір уповільнює обробку, передачу, збереження й відкриття таких файлів. Вони також можуть збільшувати час завантаження сторінки  – саме тому для фотографій в Інтернеті частіше за все вибирають формат JPEG. Існує 8-бітний різновид PNG-файлів, але він підтримує тільки 256 кольорів.

SVG-файли є меншими за PNG і вони навряд чи призведуть до сповільнення роботи комп’ютера або веб-сайта (однак дизайн із великою кількістю деталей може сповільнити завантаження SVG-файлу). SVG-файли належать до векторного формату файлів, тож його розмір можна збільшити або зменшити без втрати якості.

Стиснення.

У SVG-файлах використовується алгоритм стиснення без втрат  – стиснути файл до файлу менших розмірів можна без погіршення чіткості, деталізації або якості.

PNG-файли також можна стиснути на 5–20 % без втрати якості, що трохи компенсує їхній великий розмір. Однак вони, швидше за все, все одно будуть більшими за SVG-файли.

Фотографія.

Як ми вже казали, зазвичай формат PNG не застосовується для фотографій в Інтернеті. Однак він дозволяє отримувати багатодетальні, високоякісні цифрові зображення для друку, редагування та інших цілей. Цей формат часто використовується в Adobe Photoshop.

У файлах формату SVG немає пікселів  – вони не можуть відображати фотографії високої якості.

Використання в Інтернеті.

Файли PNG і SVG використовуються для веб-графіки, ілюстрацій, логотипів, інфографіки та таблиць і забезпечують достатньо високий рівень деталізації.

Однак SVG-файли мають перевагу – вони написані на XML. Це означає, що кожен SVG-файл записується на екрані як текст, а не як код. Таким чином програми зчитування з екрана та пошукові системи можуть аналізувати їх, тому вони є оптимальним вибором, коли йдеться про доступність і пошукову оптимізацію сайтів.

SVG-файли є меншими за розміром, тому вони швидше завантажуються на веб-сторінці. Час завантаження сторінки є одним із важливих показників у рейтингу пошукових систем.

PNG-файли також підтримують деяку текстову графіку

але меншою мірою.

Сумісність і багатокомпонентність.

SVG-файли вважаються більш якісними за PNG, але вони сумісні не з усіма браузерами та операційними системами. Крім того, їхня мова програмування та векторна структура можуть здатися незвичними та заплутати нових користувачів.

PNG є стандартним онлайн-форматом, який підтримує багато веббраузерів та операційних систем.

Анімація.

PNG-файли не підтримують анімацію – на відміну від подібного растрового типу графічного файлу GIF.

SVG-файли підтримують анімацію, але вони не такі зручні, як інші формати файлів, зокрема AI – стандартний формат Adobe Illustrator.

Дізнатися більше про AI-файли

Прозорість.

Файли PNG і SVG підтримують функцію прозорості  – обидва формати є чудовим вибором для роботи з онлайн-логотипами та графікою.

Варто зазначити, що PNG є одним із найкращих форматів растрових прозорих файлів. Якщо ви працюєте з пікселями та прозорістю, краще вибрати формат PNG, ніж SVG.

1. Запустіть Adobe Illustrator.
2. Натисніть «Файл» > «Відкрити» й виберіть зображення на комп’ютері.
3. Натисніть кнопку «Відкрити».
4. У верхньому меню натисніть параметр «Трасування» й виберіть «Трасування зображення».
5. Налаштуйте параметри конвертування  – за потреби можна навіть змінити колір.
6. Після завершення виберіть об’єкт трасування й натисніть «Розгрупувати». Це розділить кольорові форми.
7. Натисніть «Файл» > «Експорт».
8. Збережіть файл як SVG.

1. Відкрийте Adobe Photoshop.
2. Натисніть «Файл» > «Відкрити».
3. Виберіть SVG-файл на своєму комп’ютері.
4. Натисніть «Експорт» > «Експортувати як» > «PNG».
5. Збережіть файл як PNG.