PNG
SVG
SVG
ЗАГРУЗИТЬ
ФАЙЛ
Ожидание файла...
Превью
Ожидание файла...
Коротко об инструменте
PNG чаще всего приходит из графических редакторов, из папки со скриншотами или из пресс-кита компании, и именно на таком материале обводка работает лучше всего: заливки плоские, границы резкие, оттенков немного. Картинка разбирается на цветовые области, каждая записывается кривой, и готовый .svg собирается во вкладке без отправки куда-либо. Помните про альфа-канал: прозрачные пиксели вектор не хранит, и пустой фон станет обычной фигурой. Смотрите также: векторизовать фотографию из JPG, собрать favicon для сайта из того же логотипа, поднять контраст порогом перед трассировкой, обратно: получить PNG из вектора с прозрачностью.
Альфа-канал не переносится. Перед разбором картинка рисуется на непрозрачном холсте, поэтому область, которая была пустой, получает конкретный цвет и попадает в файл как обычная фигура. Убрать её несложно: откройте .svg в Inkscape или Figma, выделите самый нижний объект и удалите. Остальные контуры при этом не сдвинутся, ведь координаты уже посчитаны.
Никак — обводить текст на скриншоте бессмысленно. Кегль 10–12 px на экране занимает считаные пиксели по высоте, у букв нет запаса на разделение областей, и любой алгоритм слепит их в пятна. Рабочая схема: обведите только графику, а надписи наберите настоящим шрифтом поверх результата в редакторе. Так они останутся резкими и их можно будет переводить и редактировать.
Ровно столько, сколько заливок в самой иконке, обычно 2–4. Экспорт из редактора уже квантован: там нет ни шума, ни лишних оттенков, и запас в 16 цветов только породит тонкие фигуры-призраки по краям сглаживания. Посчитайте заливки в исходном макете и поставьте это число, плюс один на фон, если фон не прозрачный.
Да, на выходе получается стандартный документ с элементами path, который открывают все векторные редакторы. Узлы двигаются, заливки перекрашиваются, лишние фигуры удаляются. Полезная привычка после открытия: объединить одинаковые по цвету объекты и упростить контуры встроенной командой — вес файла падает, а форма на глаз не меняется.
Так работает сглаживание в исходнике. По границе двух заливок в PNG идёт полоса промежуточного оттенка, она уходит в отдельную область, а при отрисовке кривых по её краям остаются волосяные просветы. Помогает уменьшить число цветов, чтобы промежуточная полоса слилась с одной из сторон, либо в редакторе слегка растянуть нижние фигуры под верхние.
Для простых форм подойдёт, но контуры почти всегда требуют чистки. Обводка даёт много узлов и микроизломы там, где в макете была ровная дуга, а станок отработает каждый излом. Перед отправкой на резку упростите кривые, удалите фоновую фигуру и проверьте, что контуры замкнуты: разомкнутый путь плоттер либо пропустит, либо прорежет не там.
До: icon-download-256.png, экспорт из Figma, три плоских цвета и прозрачный фон вокруг знака
После: Цветов 3, детализация 4 — стрелка и подложка стали отдельными кривыми, форма остаётся чистой на баннере в три метра
До: diagram.png, 1440×900, снимок экрана: цветные блоки, тонкие стрелки, подписи кеглем 11 px
После: Цветов 8, детализация 3 — блоки и стрелки обвелись аккуратно, а мелкий текст стал нечитаемыми пятнами и его придётся набрать шрифтом заново
Оценка и фидбек помогают понять, что улучшать дальше.