У вас є логотип як PNG. Він добре виглядає в шапці вашого сайту, потім хтось просить його великим — банер, друк, футболка — і збільшений він стає м'яким і зубчастим. Це стеля растрового файлу: це фіксована сітка пікселів, і немає додаткової деталі, яку можна знайти при збільшенні. У SVG цієї стелі немає. Він зберігає логотип як фігури й контури, тож він перемальовується різко, чи то 32 пікселі завширшки, чи два метри.
Перевести логотип PNG у форму SVG означає обвести його — прочитати пікселі й намалювати векторні контури, що слідують краям. Для плаского логотипа це саме правильний інструмент, і це швидко.
Чому логотип добре обводиться
Хороший логотип — ідеальне вхідне для обведення. Він зазвичай має малу кількість суцільних кольорів, чисті межі між ними й жодних м'яких градієнтів чи фотографічної текстури. Обвідник читає такий вид зображення чисто: він знаходить кожен блок кольору, малює тісний контур навколо нього й видає SVG лише з жменькою фігур. Малий файл, різкі краї, повністю редагований потім.
Іконки, прості ілюстрації, лінійна графіка й рукописне написання потрапляють у ту саму щасливу категорію з тієї ж причини — плаский колір і чіткі краї.
Крок за кроком
- Почніть із найчистішого PNG, який маєте. Джерело вищої роздільної, різке, обводиться краще за крихітне нечітке. Якщо у вашого логотипа прозорий фон, збережіть його — обведення може його зберегти.
- Оберіть пресет, що відповідає логотипу. Для дво- чи триколірного знака Flat / logo тримає кількість кольорів низькою, а фігури простими. Для деталізованішої ілюстрації Detailed дозволяє більше контурів. Для чистої лінійної графіки чи силуету Black & white зводить його до двох тонів.
- Перевірте перегляд до/після. Порівняйте обведення з оригіналом. Якщо краї виглядають грудкуватими або інструмент вигадав зайві кольори, спробуйте інший пресет — менше кольорів зазвичай дає чистіший, менший результат.
- Завантажте SVG і відкрийте його у векторному редакторі, щоб доопрацювати за потреби.
Оскільки воно працює повністю у вашому браузері, логотип, який ви кидаєте, ніколи не завантажується — він зчитується з полотна на власній машині, немає облікового запису, і воно працює офлайн, щойно сторінка завантажилася.
Чистка й перефарбування після обведення
Вивід — це звичайний SVG із названих контурів і заливок, тож ви не замкнені на тому, що видало обведення. Відкрийте його в Illustrator, Inkscape чи Figma — і ви можете змінити колір цілої ділянки, відредагувавши одну заливку, задати точний hex вашого бренду, видалити зайву фігуру, яку підхопив обвідник, чи підштовхнути контур. Це справжня винагорода: логотип перестає бути фіксованою картинкою і стає редагованим об'єктом будь-якого розміру.
Де воно не допоможе: фото
Будьте чесні щодо вхідного. Воно обводить фігури, а не фотографії. Якщо ви подасте фото — портрет, знімок товару, пейзаж — воно все одно видасть SVG, але жахливий: тисячі тонких кольорів апроксимуються складеними ляпками, файл роздувається далеко за оригінальний JPG, і виглядає розмазано. Для будь-чого з безперервним тоном тримайте це растровим форматом і стисніть натомість. І це не ШІ, що перемальовує ваш логотип у щось нове — якщо вихідний PNG розмитий чи зашумлений, обведення успадковує це. Чистий, плаский, малокольоровий логотип дає чистий SVG; це і є золота середина.