Векторизація зображення в SVG

Як перетворити зображення на SVG

1. Перетягніть зображення PNG, JPG, WebP або GIF у зону завантаження чи натисніть на неї, щоб вибрати файл. Оригінал з’явиться ліворуч.
2. Виберіть Шаблон: - Логотип (однотонні кольори, чіткі форми) для логотипів, іконок, печаток і плоских ілюстрацій; - Детальний (більше кольорів і контурів) для малюнків із тінями або багатьма кольорами; - Постеризація (4 згладжені кольори) для стилізованого, плакатного результату з фотографії.
3. За потреби змініть Кількість кольорів (від 2 до 64) і Ігнорувати цятки менші за (px). Шаблон підставляє розумні значення для обох.
4. Виберіть Робочий розмір (довша сторона). Зображення векторизується в цьому розмірі, а сам SVG зберігає початкові розміри.
5. Натисніть Векторизувати в SVG. Результат з’явиться праворуч із розміром файлу, кількістю контурів і кольорів та часом виконання.
6. Натисніть Завантажити SVG або Копіювати код SVG, щоб вставити розмітку в HTML чи дизайнерську програму.

Як працює векторизація

Інструмент використовує imagetracerjs – векторизатор із відкритим кодом, який працює у три кроки:

1. Квантування кольорів: зображення зводиться до вибраної кількості кольорів. Кожен піксель призначається найближчому кольору палітри, а палітра уточнюється за кілька проходів.
2. Виявлення країв: для кожного кольору простежуються контури всіх ділянок цього кольору, зокрема отворів (наприклад, усередині літери «О»).
3. Підгонка контурів: контури спрощуються до прямих ліній і квадратичних кривих, які стають елементами <path> в SVG.

Ділянки, менші за поріг Ігнорувати цятки менші за (px), відкидаються, що прибирає шум і артефакти JPG. Значення 0 зберігає все; 8–20 добре підходить для логотипів; більші значення дають чистіший, але простіший малюнок. Повністю прозорі ділянки видаляються, тож логотип на прозорому тлі залишається прозорим.

Що дає добрий результат

Векторизація найкраще працює з простими логотипами та малюнками: кілька однотонних кольорів, чіткі краї, без градієнтів. Відсканований ескіз, чорно-білий підпис або піксельна іконка чудово векторизуються з 2–8 кольорами.

З фотографіями інакше. Фото містить тисячі ледь помітних відтінків, тому вірна векторна версія потребує багато кольорів і десятків тисяч контурів, а SVG виходить значно важчим за JPG. Для художнього ефекту скористайтеся шаблоном Постеризація (4 згладжені кольори) і не чекайте фотографічного результату. Якщо SVG стає дуже великим, інструмент попередить про це.

Поради для чистішого логотипа:

• беріть найбільшу й найчіткішу версію зображення, яка у вас є;
• задайте Кількість кольорів, що дорівнює справжній кількості кольорів логотипа (разом із тлом);
• збільште поріг для цяток, якщо бачите дрібні крапки біля країв.

Приватність і безпека перегляду

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