PNG у SVG: чому конвертери дають 2000 точок і як отримати 20

Чому конвертери дають 2000 точок

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

Додайте відблиск, мʼяку тінь, трохи шуму чи артефакти JPEG — і кожне з них дає ще плями й ще краї. Так просте яблуко стає 2840 точками, а фото флакона парфумів — майже 10 000. SVG важкий, виглядає постеризованим, і редагувати його ніхто не зможе: у файлі немає «яблука», лише смуги.

Як отримати 20: трасувати частини, а не пікселі

Ілюстратор, малюючи те саме яблуко, зробив би чотири речі: тіло, листок, хвостик і тінь. Кожна — один замкнений контур із кількох опорних точок Безьє, залитий одним градієнтом, а світло й тінь зверху — кілька розмитих форм. «Розумний» робить те саме. Він знаходить частини, описує кожен контур найменшою кількістю точок, що тримає форму, вимірює градієнт усередині й додає мʼякі форми там, де на зображенні відблиски й тіні, обрізані по своїй частині.

Вікно показує, що відбувається, — «Аналізуємо форму…», потім «Розставляємо опорні точки…» — і завершує чесним підсумком: на нашому тестовому яблуці 192 → 13 опорних точок, три частини, два градієнти, дванадцять мʼяких форм. Результат — група названих частин, які можна перефарбувати, змінити й анімувати.

Яким зображенням який режим

Коли вікно відкривається, воно читає маленьку копію вашого зображення й вибирає потрібний режим, позначаючи його маленькою іскрою. Пласка графіка, логотипи, леттеринг і лінійні малюнки відкриваються в «Класичний» на вигляді «Чисто», який малює кола, прямокутники й гострі кути. Мʼяка світлотінь, глянець, 3D-рендери, емодзі й товар на однотонному тлі відкриваються в «Розумний». Фото з фактурою по всьому кадру відкривається в «Класичний» на «Постер / фото».

Перемкнутися можна завжди. У «Розумного» пʼять виглядів — «Ілюстрація», «Обʼєкт», «Іконка», «Логотип» і «Леттеринг», — у «Класичного» шість. «Показати контури» малює попередній перегляд «Класичного» як контури з опорними точками, тож ціну видно ще до застосування.

Чесно про фото

Жоден трасувальник не перетворить фотографію на маленький і точний SVG. Наше предметне фото флакона парфумів, трасоване точка за точкою, дає 9726 опорних точок; з «Розумним» — 728 і 13 мʼяких форм: значно легше, і читається як охайна ілюстрація флакона, а не як фото. На строкатому фото вікно попереджає прямо: близько 8500 фігур, «Забагато — зменште деталізацію або кольори».

Тож лишайте фото фотографіями (WebP, JPEG чи PNG), а векторизуйте те, що задумано намальованим: логотипи, іконки, наліпки, ілюстрації, леттеринг, ескізи. Якщо фото все ж потрібне у векторі, зробіть із нього стиль — растр, двокольоровий постер, силует — і трасуйте вже його.

Зроблено в Paletoo

Усі зображення на цій сторінці зроблено в Paletoo — ці три тими самими кроками на інших шаблонах:

Крок за кроком у Paletoo

1. Натисніть «Відкрити в Paletoo»: відкриється квадратний документ із тестовим обʼємним яблуком — або натисніть Відкрити файл… і виберіть власний PNG. Клацніть зображення, щоб вибрати його.

2. На вкладці Дизайн, у блоці ШІ, натисніть Векторизувати. Для обʼємного зображення вікно відкриється на Розумний з Ілюстрація, позначеною іскрою; для пласкої графіки — на Класичний з Чисто.

   

3. Поспостерігайте за накладкою на полотні, поки «Розумний» читає зображення, а тоді прочитайте рядок під виглядами: скільки опорних точок займають контури, закреслене число — трасування точка за точкою, — і скільки частин, градієнтів і мʼяких форм.

   

4. Лишіть увімкненими Прибрати фон, щоб папір не трасувався, і Зберегти оригінал (сховати), щоб PNG лишився під результатом. Для предметного фото спробуйте Обʼєкт, для іконки застосунку — Іконка.

   

5. Натисніть Векторизувати. Зображення стане групою названих частин; Кольори виділення показують усі кольори в ній, тож усе зображення можна перефарбувати з одного списку.

6. Натисніть Експорт і виберіть SVG. Градієнти лишаються градієнтами, а мʼяка форма виходить розмитою векторною фігурою, тож файл і далі маленький і різкий.

Зробіть по-своєму

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

Якщо результат має бути одним пласким кольором на ділянку — наліпка для плотера, друк плашковими фарбами, — перемкніться на Класичний і виберіть Чисто чи Логотип замість градієнтів «Розумного».

Увімкніть Показати контури в «Класичному», щоб порівняти ціну кожного вигляду, перш ніж натиснути Векторизувати.

Зробити онлайн

• Зображення у вектор онлайнПеретворіть логотип, іконку чи малюнок із PNG або JPG на чистий SVG приблизно за 30 секунд — безкоштовно, без реєстрації, а зображення не покидає браузер.
• Зробіть логотип онлайнНапишіть назву бренду, виберіть логотип — і він відкриється вже з вашою назвою. Експорт у SVG, PDF чи PNG — безкоштовно, без водяного знака й реєстрації.

Безкоштовні шаблони для дизайну: Шаблони брендбуків