Конвертер SVG у PNG

Перетворюйте масштабовані SVG-вектори на готові PNG-зображення

SVG-файл — це набір інструкцій, а не готова картинка. Відкрийте його в текстовому редакторі — і побачите XML, що описує шляхи, форми, заливки та криві — рецепт, якому браузер слідує, щоб намалювати графіку заново у будь-якому потрібному розмірі. PNG — повна протилежність: сітка кольорових пікселів, зафіксована на конкретній ширині та висоті. Перетворення одного на інше називається растеризацією, і цей інструмент виконує її повністю у вашому браузері. Ви обираєте вихідний розмір, SVG відображається на HTML canvas, і ви отримуєте PNG — жодного файлу ваш пристрій не покидає.

Вектор проти растру — простою мовою

Принципова відмінність у тому, як обробляється роздільна здатність. Оскільки SVG зберігає математику, а не пікселі, він не залежить від роздільної здатності: масштабуйте логотип від фавікона до білборда — кожен край перераховується та залишається математично чітким. PNG такої свободи не має. Його пікселі зафіксовані, тому збільшення понад рідний розмір змушує переглядач розтягувати наявні точки — і з'являється розмитість та сходинковий ефект, що видають растрові зображення.

Цей компроміс двосторонній. Вектори незрівнянні для логотипів, іконок і плоских ілюстрацій із чистими формами, а файли зазвичай крихітні. Растрові формати, як-от PNG, природніше обробляють градієнти, м'які тіні та фотографічні деталі — і, що важливо, зрозумілі майже всьому. Растеризуючи, ви обмінюєте нескінченну масштабованість SVG на повсюдну сумісність PNG в одному обраному розмірі.

Навіщо взагалі растеризувати SVG?

Якщо SVG так чудово масштабується, навіщо конвертувати? Зазвичай відповідь — сумісність. Чимало місць просто не приймають SVG: багато поштових клієнтів видаляють або відмовляються відображати його, редактори документів і презентаційне ПЗ часто хочуть плоске зображення, маркетплейси та рекламні мережі вимагають PNG або JPG, а більшість соціальних платформ ігнорують векторні завантаження. Деякі системи управління вмістом також блокують SVG з міркувань безпеки, оскільки формат може вбудовувати скрипти.

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

Вибір правильної роздільної здатності для експорту

Оскільки PNG не може масштабуватися вгору якісно, розмір експорту важливіший, ніж для будь-якого вектора. Занадто маленький — зображення виглядає розмито на сучасних екранах; надмірно великий — марна трата трафіку. Просте правило: визначте найбільший розмір, в якому зображення коли-небудь буде показане, і рендеріть принаймні в цьому розмірі, а ідеально — більшому для екранів з високою щільністю пікселів.

Стандартні екрани підходять для розміру 1x — номінального розміру графіки. Екрани з High-DPI та Retina вміщають приблизно вдвічі більше пікселів у тому самому просторі, тому експорт 2x зберігає іконки та графіку чіткими замість розмитих. Для друку, постерів або дуже великих дисплеїв 3x або 4x дає запас. Оскільки джерело — вектор, більший розмір не коштує нічого у якості — криві просто перераховуються при вищій кількості пікселів перед вирівнюванням. При сумнівах рендеріть із запасом; велике PNG завжди можна зменшити, але відновити деталі шляхом збільшення маленького — неможливо.

Прозорість зберігається при конвертації

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

Все залишається на вашому пристрої

Цей конвертер працює як локальний код у вашому браузері за допомогою canvas API. Ваш SVG зчитується, відображається та експортується без жодного відправлення на сервер — без завантаження, без черги та без копії вашої графіки в чужому сховищі. Це швидше для вас і безпечніше для всього, чим ви б не хотіли ділитися з третіми особами: від ще не опублікованого брендингу до внутрішніх діаграм. Коли закінчите, досліджуйте решту наших інструментів для зображень — якщо ви готуєте актив для Windows або фавікон, конвертер PNG у ICO — логічний наступний крок.

Часті запитання