Логотип нужен на баннер, а есть только картинка из переписки размером с почтовую марку. Эскиз для наклейки нарисован ручкой на бумаге. Плоттеру для резки нужен контур, а не точки. Во всех трёх случаях нужен вектор — SVG, где изображение собрано из фигур с заливками. Его можно увеличить до размера вывески без лесенки и поправить в Figma, Illustrator, Inkscape или CorelDRAW.
Обычно картинку обводят вручную или трассировкой в векторном редакторе — с подбором настроек и чисткой лишних узлов. «Перевести в вектор» делает это за один запуск: загружаете картинку, выбираете режим и получаете SVG.
Покажем на трёх картинках — логотипе, эскизе и фото — в обоих режимах: что выбрать, сколько фигур получается и где рассмотреть результат вблизи. Картинки условные: знак из нашего разбора заставки, эскиз сгенерирован нейросетью в виде снимка листа на телефон, пейзаж — из разбора «Удалить объект». А SVG — настоящие, из Seaframe, без правок.
- Инструмент
- Перевести в вектор
- Что берём
- логотип в JPG на чёрном фоне, эскиз ручкой на листе, снятый на телефон, фото пейзажа
- Запусков
- шесть — каждая картинка в режимах «Подробно» и «Просто»
- Что получили
- шесть SVG и PNG; от 7 фигур у простого логотипа до 2554 у фото; каждый запуск — от 38 секунд до полутора минут
Растр и вектор за минуту
PNG и JPG — это сетка цветных точек. Пока картинка показана в своём размере, её не отличить от вектора, но при увеличении проступают ступеньки и размытый край. SVG устроен иначе: внутри не точки, а описание фигур — «круг такого цвета», «кривая через эти точки». Поэтому его можно растянуть хоть на стену, а каждую фигуру — перекрасить, сдвинуть или удалить.
Учтите: файл с расширением .svg — ещё не всегда вектор. Некоторые конвертеры просто кладут растровую картинку внутрь SVG-файла, и увеличить её без лесенки по-прежнему нельзя. «Перевести в вектор» перерисовывает картинку фигурами — в наших файлах нет ни одной растровой вставки. Обратная задача — SVG в PNG нужного размера — решается в Конвертере.
Экран: картинка, режим и кнопка
Экран такой же, как у других утилит Seaframe. Сверху — поле «Перетащите картинку сюда»: файл можно выбрать на устройстве, вставить из буфера или взять «из библиотеки». Подходят JPG, PNG, WebP и HEIC до 8 МБ; картинка крупнее 4000 × 3000 уменьшается до этого размера.
Справа — выбор «Режим»:
- «Подробно» — «Мелкие детали и переходы — для иллюстраций и логотипов».
- «Просто» — «Меньше фигур и ровные контуры — для значков, наклеек и резки».
Под выбранным режимом написано, что получится на выходе: «SVG и PNG». Цена у режимов одинаковая, в кредитах — на кнопке «Перевести в вектор» до запуска.
Пока идёт работа, на экране написано «Перерисовываем картинку фигурами…». Готовый результат открывается со шторкой «было / стало» — исходник и вектор — и тремя кнопками под ней: «Скачать SVG», «Скачать PNG» и «Другая картинка». PNG — это картинка вектора для документов и мессенджеров, у наших запусков — 2047 точек по длинной стороне.
Логотип из переписки: «Подробно» и «Просто»
Самый частый случай: от логотипа остался только JPG из почты или с сайта. У нас — круглый знак с бирюзовыми и оранжевыми лепестками и кофейным зерном в центре, JPG 440 × 440 на чёрном квадрате. Тот же знак мы уже оживляли в заставку. Цвета плоские, деталей немного — такой логотип переводится в вектор проще всего.
Перевели его дважды — в «Подробно» и в «Просто».
На глаз два режима здесь почти не отличаются, а внутри файлов разница большая:
| «Подробно» | «Просто» | |
|---|---|---|
| Фигур | 57 | 7 |
| Цветов | 11 и 5 градиентов | 4 |
| Вес SVG | 37 КБ | 5 КБ |
| Время | 38 с | 49 с |
У «Просто» знак собран ровно так, как его собрал бы дизайнер: чёрный фон, два бирюзовых лепестка, два оранжевых и две половинки зерна, разделённые бороздкой. «Подробно» добавил к тем же фигурам мелкие переходы цвета по краям — их почти не видно, но править такой файл дольше. Чёрный квадрат в обоих режимах стал отдельной фигурой: если знак нужен на прозрачном фоне, эту фигуру достаточно удалить в редакторе.
Вблизи — тот же участок у зерна, увеличенный в пять раз:
Дуги лепестков ровные, бороздка на зерне сохранилась в обоих режимах, лесенки нет. Для этого знака лучше подошёл «Просто»: та же картинка, а фигур в восемь раз меньше — менять цвета и готовить к печати удобнее.
Эскиз ручкой со снимка на телефон
Второй частый случай — рисунок от руки: идея логотипа, наклейка, узор для вышивки. Наш эскиз — чашка с паром, нарисованная шариковой ручкой на листе A4 и снятая на телефон сверху: лист лежит на столе, в углу — тень от телефона. Сам снимок для разбора сгенерирован нейросетью, но устроен как настоящий: серый тон бумаги, стол по краям, тень, двойные штрихи там, где ручку отрывали.
Главное, что видно сразу: инструмент перевёл в вектор весь снимок, а не только линию. Стол стал бежевыми пятнами, лист — ровной серо-голубой заливкой, тень от телефона почти растворилась в цвете бумаги. У «Подробно» по листу рассыпались мелкие серые крапинки — так модель прочитала неровный тон бумаги; у «Просто» их почти нет.
Сама линия перенесена честно — вместе с двойными штрихами в местах, где рука вела ручку дважды:
Инструмент не выпрямляет руку: дрожание и наложения штрихов остаются, просто становятся фигурами. Для наклейки и резки удобнее «Просто» — в нём меньше фигур, и удалить фон со столом проще: выделить лишние фигуры и нажать Delete.
Как снять рисунок, чтобы лишнего было меньше:
- Только лист. Обрежьте снимок по краю бумаги до перевода — тогда стол не превратится в пятна.
- Свет ровный, без тени от телефона. Лучше у окна днём, телефон держать прямо над листом.
- Линия тёмная и сплошная. Ручка или маркер читаются лучше, чем бледный карандаш.
- Крупно. Чем крупнее и чётче исходник, тем ровнее контуры.
Фото пейзажа: плакат, а не копия
Фото переводится в вектор иначе, чем логотип. В нём нет плоских цветов — сплошь переходы, поэтому в SVG оно становится «плакатом» из пятен цвета, а не точной копией. Это стиль, а не ошибка.
Мы взяли пейзаж с тропинкой — тот самый, с которого убирали прохожую: облака, холмы и трава дают и переходы, и мелкую фактуру.
Холмы, полоса леса, домик и тропинка узнаются в обоих режимах. А небо — самая трудная часть: вот его участок крупно.
В «Подробно» облака разбились на квадратные ступенчатые пятна — похоже на увеличенный пиксель-арт, а не на мазки. В «Просто» от облаков осталась почти ровная серая заливка с редкими пятнами. И файлы тяжёлые: 2554 фигуры и полтора мегабайта против 57 фигур и 37 КБ у логотипа — в редакторе такой SVG открывается и двигается заметно медленнее.
Такой «плакат» годится как фон, постер или основа для стилизации, где пятна — часть замысла. Для точной копии фотографии вектор не подходит: оставьте фото в JPG или увеличьте его в Улучшить фото.
Что делать с SVG дальше
- Править. SVG открывается в Figma, Illustrator, Inkscape, CorelDRAW и в браузере: лишнюю фигуру можно удалить, цвет — сменить на фирменный, знак — растянуть без лесенки.
- Убрать фон. Фон часто становится отдельной фигурой — как чёрный квадрат у нашего логотипа или лист у эскиза. Удалите её, и знак окажется на прозрачном фоне.
- Мелкий текст — набрать заново. Надписи мелким шрифтом лучше заменить настоящим текстом в редакторе: так буквы будут ровными и их можно будет поправить.
- Печать и резка. Для наклеек, плоттера и вышивки удобнее режим «Просто» — в нём меньше фигур. Подготовку под конкретный станок делают в его программе.
- Вставить в документ. «Скачать PNG» отдаёт картинку вектора — её можно сразу отправить в мессенджер или вставить в презентацию. В Библиотеке у запуска есть обе кнопки — «SVG» и «PNG».
- Нет логотипа вообще. Логотип рисует знак сразу в векторе — как это выглядит, показали в разборе «Логотип для кофейни в векторе». А из готового знака Айдентика соберёт фирменный стиль — разбор «Фирменный стиль из готового знака».
Чего инструмент не делает
- Не превращает фото в точную копию. Фото становится плакатом из пятен цвета, плавное небо — ступенчатыми пятнами.
- Не отделяет рисунок от фона сам. Стол, бумага и тени переводятся вместе с линией — обрежьте снимок заранее или удалите лишние фигуры в редакторе.
- Не выпрямляет линию. Дрожание руки и двойные штрихи остаются в SVG.
- Не исправляет мелкий и размытый исходник. Чем крупнее и чётче картинка, тем ровнее контуры.
- Не для чужих работ. Переводите свои картинки или те, на которые у Вас есть права.
Как перевести свою картинку в вектор
- Подготовьте картинку
Крупно и чётко, без лишнего по краям: эскиз обрежьте по листу, лишнее рядом уберите в «Удалить объект», фон — в «Вырезать фон».
- Загрузите её
JPG, PNG, WebP или HEIC до 8 МБ: перетащите, выберите на устройстве, вставьте из буфера или возьмите из библиотеки.
- Выберите режим
«Подробно» — для иллюстраций с деталями, «Просто» — для логотипов, значков, наклеек и резки. Цена у них одинаковая.
- Нажмите «Перевести в вектор»
Цена в кредитах — на кнопке до запуска; если обработка не получится, кредиты вернутся. Страницу можно закрыть — результат сохранится в Библиотеке.
- Сравните шторкой и скачайте
«Скачать SVG» — для редактора, печати и резки, «Скачать PNG» — для документов и мессенджеров. Следующая картинка — «Другая картинка».
Что в итоге
- Вектор — это фигуры, а не точки: SVG увеличивается без лесенки и правится в любом векторном редакторе. В наших файлах растровых вставок нет.
- Плоский логотип переводится лучше всего: у «Просто» он собрался из 7 фигур вместо 57 — та же картинка, а править проще. Фон стал отдельной фигурой, её можно удалить.
- Эскиз переводится вместе со столом и бумагой: обрежьте снимок по листу заранее. Линия переносится как нарисована — с дрожанием и двойными штрихами.
- Фото становится плакатом: облака — ступенчатыми пятнами, а файл тяжелеет до полутора мегабайт. Для точной копии фото вектор не нужен.