Як конвертувати PNG у SVG: трасування логотипів та іконок

PNG — це растрове зображення: фіксована сітка пікселів, кожен із кольором і, за потреби, значенням прозорості. Логотип 500 × 500 px містить рівно 250 000 таких квадратиків і більше нічого, тож під час збільшення до розміру плаката кожен квадратик можна лише зробити більшим або розмити проміжки між ними. SVG — це векторне зображення, текстовий файл зі списком фігур, як-от <path>, <circle> і <rect>, з координатами та кольорами заливки. Браузер або ріжучий верстат перемальовує ці фігури в будь-якому потрібному розмірі, тому векторний логотип лишається чітким і на екрані телефону, і на банері виставки.

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

Деякі конвертери оминають складну частину. Вони створюють коректний SVG-файл з одним елементом <image>, у який оригінальний PNG вбудовано як текст base64, через що файл стає приблизно на третину більшим за PNG. Результат відкривається як SVG і проходить перевірку типу файлу, але лишається піксельним зображенням у векторній обгортці: збільште його, і ви побачите ті самі зубчасті краї, а ріжучий верстат не знайде контурів. Відкрийте будь-який SVG у текстовому редакторі й знайдіть data:image/png; якщо цей рядок є, нічого не векторизовано.

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

Фотографії — протилежний випадок. Портрет або предметне фото містить тисячі ледь відмінних тонів, що плавно переходять один в інший, а векторний формат не має ефективного способу їх описати. Попросіть трасувальник про 16 кольорів, і отримаєте постеризоване зображення з помітними смугами; попросіть про 64, і отримаєте десятки тисяч дрібних фігур у файлі, значно більшому за PNG, який усе одно не схожий на фото. М’які градієнти, тіні та сяйво так само перетворюються на стоси тонких смуг. Третє проблемне місце — дрібний текст: за 10–12 px згладжування зливає кожну літеру з тлом, і трасувальник не відрізняє «е» від «о».

Роздільна здатність важливіша за будь-які налаштування. Трасувальник підганяє кожну криву під сходинки пікселів уздовж краю, і чим дрібніші сходинки, тим точніша крива. Якщо ви самі експортували PNG із Figma, Canva, Photoshop чи презентації, експортуйте його знову в два-три рази більшому розмірі; логотип шириною 1500–2000 px дає трасувальнику достатньо матеріалу. Не збільшуйте малий PNG за допомогою ШІ, якщо результат не виглядає чистим за масштабу 100 %, бо вигадана текстура країв трасується так само сумлінно, як і справжні краї.

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

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

Кожен трасувальник ставить ті самі три запитання, навіть якщо підписи різні. Перше: скільки кольорів зберегти. У конвертері PNG у SVG Колірний режим дає вибір між Кольоровий, Відтінки сірого та Чорно-біле, а Кількість кольорів задає, на скільки кластерів розсортовуються пікселі, від 2 до 64. Вкажіть число, яке ви записали. Надто велике значення змушує трасувальник виділяти пікселі згладжених країв в окремі тонкі кольори, що проявляється слабким німбом навколо кожної фігури; надто мале зливає два фірмові кольори в один.

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

Третє запитання стосується лише чорно-білого трасування: де провести межу між фарбою та папером. Поріг змінюється від 1 до 254, типово 128. Пікселі темніші за поріг стають чорними, світліші — порожніми. Для підпису тонкою синьою кульковою ручкою підвищіть його до 160–180, щоб слабкі штрихи вціліли; для жирного малюнка маркером на трохи сірому папері знизьте до 100, щоб текстура паперу не перетворилася на цятки. Змінюйте одне налаштування за раз і порівнюйте, бо вони впливають одне на одне.

Не обмежуйтеся мініатюрою. Відкрийте SVG у браузері й збільште до 400–800 % найтісніший вигин, наприклад заокруглення літери чи кінчик гострого елемента. Добре трасування показує плавні дуги та гострі кути там, де вони є в малюнку; слабке — хвилі, западини й округлені кінчики. Потім відкрийте файл у векторному редакторі, як-от Inkscape, Illustrator або Figma, і ввімкніть режим контурів чи вузлів. Простому дво­колірному логотипу зазвичай потрібно кілька сотень вузлів; якщо у вашому їх кілька тисяч, трасувальник ішов за шумом, і такі контури буде важко редагувати чи різати.

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

Безкоштовний варіант для комп’ютера — Inkscape. Імпортуйте PNG, виділіть його й відкрийте Path > Trace Bitmap (Shift+Alt+B). Режими одного проходу, як-от Brightness cutoff, створюють один чорний контур, що добре підходить для лінійної графіки; режими кількох проходів трасують задану кількість кольорів або відтінків сірого як шари, складені один на одному. Чорно-біле трасування в Inkscape побудоване на Potrace — бібліотеці трасування, яку Пітер Селінджер випустив у 2001 році. Сам Potrace — це програма командного рядка: вона читає PBM, PGM, PPM або BMP, а не PNG, працює лише з двоколірними зображеннями й записує SVG, PDF, EPS або DXF, тому добре підходить для скриптової обробки великих партій сканів.

В Adobe Illustrator Image Trace замінив старіший Live Trace в Illustrator CS6. Додайте PNG, відкрийте Window > Image Trace і почніть із пресета, наприклад Black and White Logo, 3 Colors або 16 Colors, а потім налаштуйте Paths, Corners і Noise у розширеному розділі. Трасування лишається «живим», доки ви не натиснете Expand: тоді воно перетворюється на звичайні контури, які можна редагувати. Якщо жодної з програм не встановлено, конвертер у браузері виконує той самий процес: зменшує кількість кольорів, знаходить межі й підганяє криві. Конвертер зображень у SVG також приймає JPG, WebP і HEIC та може записати EPS, PDF або DXF замість SVG.

У вебі SVG є рекомендацією W3C з 2001 року, і кожен сучасний браузер відображає його в тегу <img>, як фон CSS або вбудованим у HTML, де його кольори навіть можуть змінюватися при наведенні. Трасований логотип зазвичай замінює кілька розмірів PNG для екранів retina одним невеликим файлом. Для ріжучих плотерів SVG — формат, якого чекають Cricut Design Space і Silhouette Studio: кожна трасована форма стає контуром різання, а багатокольорове трасування надходить окремими шарами, які можна вирізати з вінілу різних кольорів. Лазерні різаки та ПЗ для ЧПК зазвичай віддають перевагу DXF, який створює PNG у DXF з тими самими параметрами трасування.

Друкарні просять векторну графіку, бо друкарському верстату, вишивальній digitizing-програмі або плотеру для вивісок потрібні межі, а не пікселі, і трасований SVG часто цілком підходить для наклейок, футболок чи банера. Але це все одно наближення: криві підігнані приблизно, кольори усереднені з пікселів, а текст перетворений на контури. Тож перш ніж трасувати логотип компанії, запитайте того, хто його створив. Дизайнер чи агенція майже завжди має оригінал AI, EPS, PDF або SVG з точними кривими, іменованими кольорами та шрифтами, і надіслати його — справа хвилини. Трасування доречне, коли оригінал втрачено, коли логотип зберігся лише на відсканованому фірмовому бланку або коли це ваш власний малюнок.