Справжні векторні контури, і точність повертається як число
Пошукайте цю тему, і більшість знайдених інструментів нічого не векторизують. Вони беруть ваш PNG, кодують його у base64, загортають у тег зображення всередині оболонки SVG і повертають назад. Змінилося лише розширення; пікселі лишилися тими самими. Збільште масштаб — і зображення розмивається так само, як і PNG, яким воно залишилося, а у Illustrator ви нічого не зможете редагувати. Перевірка займає десять секунд: відкрийте файл у текстовому редакторі. Якщо бачите стіну base64 — вам просто перейменували файл.
Що насправді створює цей інструмент
Фігури. Трасувальник знаходить краї на вашому зображенні й записує їх як справжні SVG-контури, згруповані за кольором, тож ви можете масштабувати результат без втрати якості та редагувати кожну криву у Illustrator, Figma чи Inkscape. Для двокольорового логотипу розміром 267 на 87 пікселів результат містив 8 контурів, жодного base64 у файлі, а два вихідних кольори збережені як точні hex-значення. SVG також мав розмір 267 на 87, тож його можна вставити на сторінку як прямий замінник PNG, з якого він був створений.
Точність вимірюється, а не заявляється
Кожен результат містить оцінку точності, і це не приблизна оцінка. Ваш готовий SVG знову перетворюється у пікселі й порівнюється з оригіналом піксель до пікселя, і відсоток, який виходить, — це саме те, що ви бачите. Двокольоровий логотип отримав 99,5. На тестовому наборі всі прості файли мають 99 і вище, а три з них трасуються рівно на 100,0. Реальний виробничий логотип, біло-червоний напис на прозорості, трасується на 99,7 у файл 9,5 KB з 3 кольорових шарів і 19 контурів.
Чому трасовані логотипи часто виглядають неправильно і що з цим робиться
Антиаліасинг — причина, чому більшість трасувальників створюють ореол з плям навколо кожної літери. М’які відтінки вздовж краю — це не кольори дизайну, а розмиття, і трасувальник, який сприймає їх як кольори, вірно відтворить розмиття. Тут кольори визначаються на рідній роздільній здатності зображення, тож ці відтінки розпізнаються як розмиття країв і ігноруються, а не перетворюються на фігури. Інша класична вада — тонкі проміжки між суміжними кольорами, які видно як світлі лінії, що проходять крізь малюнок. Кольорові шари створюються з перекриттям, тож такі проміжки не виникають.
Прозорість і контур, який зазвичай її псує
Пікселі з прозорістю менше половини вважаються фоном і виключаються з усіх трасованих фігур, тож SVG залишається прозорим там, де прозорим був ваш PNG. Складніше — це кайма: однопіксельне кільце кольору фону, яке більшість трасувальників залишають навколо прозорого логотипу, невидиме на білому фоні, але помітне, щойно логотип опиняється на темній сторінці. Тут воно видаляється за допомогою trapping — прийому з поліграфії. Кожен кольоровий шар збільшується на один піксель лише вздовж смуги, що межує з прозорістю, тож кайма закривається, не зміщуючи жодного краю всередині малюнка.
Маленькі й трохи розмиті зображення — це звичайний випадок
Більшість, хто шукає векторну версію, не мають чистого оригіналу. Є лише маленький PNG, який хтось експортував роки тому. Саме на такий вхід налаштований рушій: невелике згладжене зображення збільшується перед трасуванням, що дає трасувальнику субпіксельну інформацію про те, де насправді проходять краї, тож криві повторюють форми, які намалював дизайнер, а не сходинки маленького файлу. Логотип на 267 пікселів трасувався при ширині 1024, і результат це вказує. Чесне обмеження: трасування може відновити лише те, що ще видно у пікселях. Фавіконка на 30 пікселів містить дуже мало інформації про свої криві, і ніхто не вигадає деталі, яких ніколи не було.
Фотографії працюють, і інструмент попереджає, що не повинні
У фотографії немає форм, які можна відновити. Це суцільний тон, тож трасування дає постеризовану імітацію: цікаво як стиль, але неправильно як копія. Вимірювання це не приховає. Тестове зображення з суцільним тоном отримало 95,4% проти 99,5% для простого логотипу, і якщо для логотипу потрібно було 2 кольорових шари й 8 контурів, то для фото — 16 шарів і 9 899 контурів. Результат також містить примітку, що зображення є суцільним тоном і що PNG залишається вірним форматом. Якщо ви хочете постеризований вигляд навмисно — задайте кількість кольорів самостійно й отримайте його.
Кольори або чисто чорне й біле
За замовчуванням палітра визначається автоматично з вашого дизайну, тож двокольоровий логотип трасується як два чистих шари, а не два шари плюс ореол відтінків антиаліасингу, що прикидаються кольорами, а складніші роботи зберігають до 16 кольорів. Ви можете задати кількість самостійно — від 2 до 32: менше для чистішого, більш стилізованого вигляду, більше — для точнішої відповідності кольорів. Для відсканованих підписів, штампів і лінійної графіки є окремий режим "чорне й біле", який автоматично вибирає поріг з гістограми зображення або приймає значення від вас у межах від 1 до 254 і повертає одне чітке чорне зображення на прозорості.
Що відбувається з вашими файлами
Кілька зображень трасуються з однаковими налаштуваннями й повертаються одним ZIP під своїми оригінальними іменами. Файли передаються через зашифроване з'єднання й видаляються з сервера через годину після готовності результату.
Що ви отримуєте
- Справжні SVG-контури, згруповані за кольором, які можна редагувати у будь-якій векторній програмі
- Виміряний відсоток точності для кожного файлу, а не просто обіцянку високої якості
- Антиаліасинг видаляється, а не трасується у вигляді ореолу плям
- Збереження прозорості, а однопіксельна кайма фону видаляється trapping'ом
- Автоматичне визначення палітри, можливість задати кількість кольорів і режим "чорне й біле" для лінійної графіки
- Без реєстрації, без водяних знаків, і файли видаляються з сервера через годину
Що далі?
Потрібно зробити навпаки і перетворити вектор у пікселі для форми завантаження чи електронної пошти? SVG у PNG рендерить його у будь-якому розмірі. Перед тим, як відправити трасований файл, Стиснути SVG видаляє сміття редактора, а Стиснути PNG обробляє оригінальний растровий файл, якщо ви його теж зберігаєте.