Конвертер изображений в SVG — PNG/JPG в вектор
Векторизация растровых изображений в SVG с настройкой цветов и детализации
Работает в браузере · файлы никуда не загружаются
Изображение сводится к нескольким цветам, и контур каждой цветовой области обводится линиями и кривыми. Это хорошо работает для логотипов, иконок, надписей и простых рисунков. Фотографии получаются постеризованными, а файл может стать очень большим; градиенты и мягкие края в исходном виде не сохраняются.
Перетащите изображение для конвертации в SVG
Один файл JPG, PNG, WebP, GIF или BMP (до 50 МБ). Можно также вставить сочетанием Ctrl+V (⌘V на Mac). Ничего не загружается на сервер.
Максимальное число цветов в SVG. Для логотипов попробуйте 2–8, для иллюстраций — 16 и больше.
Чем выше, тем точнее повторяются контуры и сохраняются мелкие точки, но файл больше и обработка дольше. 1 — просто, 5 — ближе всего к оригиналу.
Что делает инструмент
Инструмент преобразует растровое изображение (PNG, JPG, WebP, GIF или BMP) в векторный SVG. Растр — это сетка пикселей, и при увеличении он становится «квадратным»; SVG хранит линии и кривые и остаётся чётким в любом размере. Это выручает, когда исходный файл логотипа потерян и остался только маленький PNG, когда нужна иконка для сайта или вектор для лазерной резки, вышивки или наклеек.
Сначала о границах возможностей. Изображение сводится к нескольким цветам, и обводится контур каждой цветовой области, поэтому градиенты, мягкие края и фотографическая фактура в исходном виде не сохраняются. Чем проще и площе рисунок, тем чище результат.
Как пользоваться
- Перетащите изображение или нажмите Выбрать изображение. Можно и вставить через Ctrl+V.
- Задайте Цвета: 2 для чёрно-белого логотипа, 4–8 для логотипа в несколько цветов, 16 и больше для иллюстраций.
- Выберите Детализацию от 1 до 5. Чем выше, тем точнее повторяются контуры.
- Сравните предпросмотр с оригиналом и нажмите Сохранить SVG или скопируйте код.
Как это работает
- Сокращение цветов: каждый пиксель относится к одному из цветов выборочной палитры, которая уточняется за три прохода. Одно и то же изображение с теми же настройками всегда даёт одинаковый SVG.
- Векторизация: границы цветовых областей аппроксимируются прямыми и квадратичными кривыми. Детализация 1 допускает погрешность 4 px и отбрасывает фигуры короче 32 точек контура; детализация 5 следует контуру с точностью 0,25 px и сохраняет мелкие точки.
- Размер анализа: ради скорости длинная сторона уменьшается до 300 px при детализации 1, 700 px при детализации 3 и 1400 px при детализации 5, а координаты затем пересчитываются к исходному размеру.
- Очистка: фигуры полностью прозрачных цветов удаляются, задаются исходные ширина, высота и viewBox.
- Векторизация выполняется библиотекой imagetracerjs (общественное достояние).
Примеры
| Исходник | Настройки | Результат |
|---|---|---|
| Логотип-надпись PNG, чёрный, 800×300 | 2 цвета, детализация 3 | Чёрная надпись на белом, маленький файл |
| Иконка PNG в 4 цвета, 512×512 | 4 цвета, детализация 4 | 4 цвета, плавные кривые |
| Фото пейзажа JPG, 4000×3000 | 16 цветов, детализация 2 | Эффект плаката, файл намного больше, чем у логотипа |
Чтобы снова превратить вектор в PNG, воспользуйтесь конвертером SVG в PNG, а набор иконок для сайта создаст генератор favicon.
Частые вопросы
Можно ли превратить фотографию в SVG?
Можно, но получится несколько плоских цветовых пятен, как на плакате, а при высокой детализации файл может вырасти до нескольких мегабайт. Фотографии лучше хранить в JPG или WebP; этот инструмент рассчитан на логотипы, иконки, надписи и простые рисунки.
В результате много мелких точек.
Уменьшите детализацию, чтобы убрать мелкие пятна, и сократите число цветов, чтобы объединить похожие оттенки. Если исходник — шумный JPG, чаще всего помогает 2–8 цветов.
Сохраняется ли прозрачный фон?
Да. Полностью прозрачные области не создают фигур, поэтому в SVG остаются пустыми. Полупрозрачные области получают непрозрачность своего цвета.
Какого размера получается SVG?
У него ширина и высота исходного изображения в пикселях плюс viewBox, поэтому он чисто масштабируется до любого размера на сайте или в графическом редакторе.
Моё изображение загружается на сервер?
Нет. И анализ, и векторизация выполняются внутри вашего браузера.
