Растр і вектор — це два різні способи зберігання зображення, і знання різниці точно каже вам, коли конвертувати між ними. Растрове зображення — PNG, JPG, WebP — це фіксована сітка кольорових пікселів. Векторне зображення — SVG — це набір інструкцій: намалюй цей контур, залий його цим кольором, постав це коло тут. Оскільки вектор описує фігури математикою замість пікселів, він лишається чітким за будь-якого розміру, тоді як растр розмивається тієї миті, коли ви штовхаєте його понад його рідну роздільну здатність.
«Растр у вектор» означає трасування: рушій читає пікселі й обчислює фігури, що ховаються в них, потім записує ці фігури як векторні контури. Зроблене в правильній ситуації, воно справді корисне. Зроблене в неправильній — залишає безлад. Цей гід охоплює обидва.
Для чого добре трасування
Трасування хоче плоский, чіткий за краями вхід: логотипи, іконки, прості ілюстрації, штрихова графіка, рукописні написи. Вони мають обмежену палітру й чіткі межі, тож трасувальник може знайти кожну ділянку кольору й обвести навколо неї охайний контур. Результат — компактний SVG з жменькою фігур — чіткий за будь-якого масштабу, малий за розміром файлу й редагований опісля. Якщо ваша мета — логотип, що працює від фавікона до білборда, трасування вас туди приведе.
Чому фото не підходять
Фотографія — протилежність тому, чого хоче трасувальник. Вона має тисячі ледь відмінних кольорів і жодних чітких країв — безперервний тон. Щоб векторизувати це, рушій має апроксимувати кожен градієнт стосами накладених згустків плоского кольору. Три речі йдуть не так одразу: SVG стає величезним, часто в кілька разів більшим за оригінальний JPG; він виглядає розмазаним і постеризованим замість фотографічного; і його болісно редагувати, бо він складається з тисяч безглуздих фігур. Для фото растровий формат — просто правильна відповідь: стисніть JPG чи конвертуйте в WebP натомість. Вектор — для графіки, а не для фотографій.
Пресети й кількість кольорів
Кількість кольорів, які трасувальнику дозволено використовувати, — найбільший важіль на результаті. Пресети задають це за вас: Плоский / логотип тримає кольори низькими для простих знаків, Детальний дозволяє більше для багатших ілюстрацій, Постеризований згортає зображення в сміливі плоскі смуги, а Чорно-білий зводить усе до двох тонів для штрихової графіки й силуетів. Менше кольорів означає чистіший, менший файл; більше кольорів вловлюють нюанси ціною зайвих контурів і ваги. Спробувати два пресети на тому самому зображенні й порівняти прев'ю «до/після» — найшвидший спосіб знайти правильний баланс.
Усе локально, нічого не завантажується
Уся конвертація виконується у вашому браузері рушієм imagetracer. Зображення читається з canvas на вашій власній машині, трасується там і повертається як SVG — нічого не завантажується, немає облікового запису, а щойно сторінка завантажилася, воно працює з вимкненою мережею. Це варто мати для логотипа чи внутрішньої графіки, яку ви радше не надсилали б на чийсь сервер.
Одне уточнення, бо слово «конвертувати» на нього напрошується: це справжнє трасування, а не AI-перемальовування. Воно слідує за пікселями, які ви дали, і не вигадує чистішу версію вашого малюнка. Чітке, плоске, малокольорове джерело дає чіткий результат; розмите чи шумне дає розмиті, шумні контури.
Після трасування
Оскільки вивід — це стандартний SVG з іменованих контурів і заливок, ви можете продовжувати працювати над ним у будь-якому векторному редакторі — Illustrator, Inkscape, Figma. Перефарбуйте цілу ділянку, редагуючи одну заливку, задайте точні кольори бренду, приберіть зайві фігури чи підправте контур. У цьому й суть переходу у вектор: зображення перестає бути фіксованою картиною й стає об'єктом, яким ви володієте й можете переформовувати за будь-якого розміру, без розмиття.