JPG в SVG v1.0

Что такое конвертер JPG в SVG

Конвертер JPG в SVG переводит растровое изображение в набор настоящих векторных контуров, которые можно открыть и отредактировать в Illustrator, Inkscape или Figma. Растровый JPG состоит из пикселей и мутнеет при увеличении, а SVG описывает картинку кривыми Безье и остаётся чётким на любом размере, от иконки 16 пикселей до баннера на фасаде здания. Инструмент DocPivot выполняет полноценную трассировку в цвете прямо в браузере, без загрузки файла на сервер. Основная задача, которую он решает, звучит просто: получить пригодный для печати и резки вектор из логотипа, вывески или схемы, у которых сохранился только сжатый JPG.

Почему JPG сложнее векторизовать, чем PNG

JPG приносит проблему, которой нет ни у одного другого исходного формата: алгоритм сжатия с потерями оставляет шум вокруг каждой границы. Вокруг контрастных краёв появляется звон, то есть тонкая кайма из полупрозрачных пикселей чужого оттенка. Плоские заливки распадаются на блоки 8 на 8 пикселей, а плавные переходы превращаются в ступенчатые полосы. Наивный трассировщик воспринимает каждый такой артефакт как отдельную фигуру и выдаёт файл, в котором вместо восьми осмысленных контуров лежат девятьсот мусорных.

Отсюда вытекает практическое правило: чем сильнее исходник был сжат как изображение, тем больше мусора придётся отсекать при векторизации. Если оригинал ещё существует в несжатом виде, лучше сначала перевести JPG в PNG из исходного файла, а не из пережатой копии, скачанной из мессенджера. Артефакты, которые уже записаны в пиксели, восстановить обратно невозможно, их можно только грамотно отфильтровать.

Преимущества конвертера JPG в SVG

Инструмент строился вокруг одной идеи: убрать шум по площади до того, как будет подобрана хоть одна кривая. Это меняет результат сильнее, чем любые настройки сглаживания после трассировки.

• Подавление артефактов по площади. Области меньше заданного порога отбрасываются до подбора кривых, поэтому звон и блочность JPEG не попадают в итоговый файл.
• Полноцветный результат. Известные бесплатные аналоги отдают только чёрно-белый вектор, здесь сохраняется палитра от 2 до 32 цветов.
• Настройка вместо скрытой константы. Порог подавления вынесен в интерфейс, а не зашит в код, и именно он отделяет пригодный контур от груды обрезков.
• Редактируемые слои. Каждый цвет собирается в отдельную группу, каждая фигура получает свой идентификатор, поэтому файл открывается разобранным, а не одной склеенной массой.
• Ничего не уходит на сервер. Квантование, сшивка контуров и подбор кривых работают в браузере, макет клиента остаётся на вашем компьютере.
• Честное предупреждение о фотографиях. Сервис прямо говорит, когда исходник не подходит для трассировки, вместо того чтобы молча вернуть файл тяжелее оригинала.
• Обратимость сценария. Готовый вектор при необходимости легко превратить в PNG для превью или письма, а для иконки сайта пригодится генератор фавиконов.

Ключевые возможности инструмента

• Количество цветов от 2 до 32. Задаёт, на сколько плоских областей разбивается картинка, и напрямую влияет на вес готового SVG.
• Детализация от 0 до 10. Управляет тем, насколько плотно кривая повторяет исходный контур, от грубого силуэта до точного следования краю.
• Порог подавления мелких областей. Отсекает фигуры меньше заданной площади, главный рычаг при работе с пережатыми исходниками.
• Фон: сохранить или удалить. Удаление фона нужно почти всегда, когда логотип пойдёт на плёнку, ткань или гравировку.
• Рабочее разрешение от 200 до 4000 пикселей. Трассировка идёт на уменьшенной копии, а контуры затем масштабируются обратно, что для вектора бесплатно и без потерь.
• Определение углов на 45 градусах. Резкие стыки остаются резкими, а не скругляются в кашу, что критично для шрифтовых логотипов.
• Подбор по исходному контуру. Кривые подгоняются под оригинальную границу области, а не под её упрощённую версию, поэтому ошибка не накапливается дважды.
• Порядок вывода по площади. Крупные фигуры выводятся первыми, мелкие ложатся поверх, и отверстия внутри букв не заливаются целиком.
• Слияние близких цветов палитры. Почти одинаковые оттенки объединяются, поэтому полосы от сжатия не становятся отдельными цветовыми слоями.
• Работа без регистрации. Ни аккаунта, ни ключа API, ни лимита на количество файлов в сутки.

Как работает трассировка JPG в SVG

1. Масштабирование рабочей поверхности. Изображение обрабатывается в уменьшенном виде, а полученные контуры увеличиваются до нужного размера уже как вектор.
2. Сведение к палитре. Квантование методом k-средних с детерминированной инициализацией по дальним точкам собирает почти одинаковые соседние пиксели в плоские области.
3. Поиск границ областей. Граничные рёбра каждого цвета сшиваются в замкнутые петли, а области ниже порога подавления отбрасываются вместе со звоном и блочностью.
4. Упрощение и подбор кривых. Сначала работает алгоритм Рамера-Дугласа-Пекера, затем определяются углы, после чего кубические кривые Безье подбираются методом наименьших квадратов по алгоритму Шнайдера с репараметризацией Ньютона.
5. Сборка файла. DocPivot выводит по одной группе на цвет и по одному контуру на фигуру, каждый со своим идентификатором, готовый к правке в векторном редакторе.

Если исходник перед трассировкой нужно подготовить, например обрезать поля или привести к другому размеру, пригодится изменение размера изображения перед загрузкой в конвертер.

Пресеты и их настройки

Четыре готовых пресета покрывают основные типы исходников, их значения подобраны замерами, а не наугад.

У пресета «Фото» порог подавления в шестнадцать раз выше, чем у «Логотипа», и причина простая: фотографический JPG на уровне пикселей почти целиком состоит из артефактов. Пресет «Трафарет» с двумя цветами сделан под задачи, где нужен чистый силуэт: гравировка, плёнка, шелкография. Для подготовки такого исходника часто помогает предварительное обесцвечивание изображения, а лишние поля снимает обрезка картинки. Если контраст исходника слабый и границы читаются плохо, стоит сначала прогнать файл через коррекцию цвета.

Когда стоит переводить JPG в вектор

Векторизация оправдана, когда изображение состоит из плоских областей с ясными границами и должно масштабироваться. Логотипы, вывески, схемы, отсканированная штриховая графика, иконки и надписи трассируются хорошо. Фотографии не трассируются в принципе, о чём подробнее ниже.

• Логотип есть только в JPG. Типичная ситуация в компаниях, где исходники не сохранились после смены подрядчика.
• Макет уходит в типографию. Растр там просто не примут, о требованиях речь пойдёт отдельно.
• Печать крупного формата. Баннер, вывеска, оклейка транспорта, где растр 800 пикселей превратится в мозаику.
• Резка и гравировка. Станку нужны линии, а не точки, растровый файл он не увидит как контур.
• Иконки и графика для сайта. SVG весит меньше, тянется под ретину и красится через CSS.
• Восстановление старого фирменного стиля. Скан бланка или печати превращается в редактируемый набор кривых.

Отдельный случай: снимки, сделанные на iPhone, приходят в формате HEIC, и перед трассировкой их придётся конвертировать HEIC в JPG или PNG.

Примеры использования в российских задачах

Карточка товара на маркетплейсе

Контекст: продавец на Wildberries или Ozon хочет вынести логотип бренда на инфографику карточки в высоком разрешении. Логотип сохранился только в виде JPG размером 600 пикселей из старой презентации. Пресет «Логотип» с восемью цветами даёт чистый вектор, который затем растягивается под любой шаблон карточки. Результат: одна инфографика собирается под все размеры площадки без пересъёмки и перерисовки.

Фирменный бланк и печать для документооборота

Контекст: бухгалтерии ИП нужен логотип в бланке договора и счёта, который не рассыпается при печати на лазерном принтере. Скан бланка переводится в вектор пресетом «Трафарет», контуры чистятся в Inkscape, файл вставляется в шаблон. Результат: логотип печатается ровным чёрным без серой каймы вокруг штрихов, как это бывает при вставке JPG.

Макет для лазерной гравировки

Контекст: мастерская принимает заказ на гравировку по дереву, клиент прислал картинку из мессенджера. Двухцветный пресет с высоким порогом подавления убирает шум сжатия, после чего в макете остаются только замкнутые контуры без обрывков. Результат: станок читает файл с первого раза, без ручной чистки паразитных линий.

Графика для сайта на 1С-Битрикс

Контекст: у интернет-магазина иконки категорий лежат растром и мылятся на экранах с высокой плотностью пикселей. Иконки трассируются пресетом «Клипарт», каждая получает группу и идентификатор, дальше подключаются спрайтом. Результат: страница грузится быстрее, а иконки остаются резкими при любом масштабе. Для фотоконтента того же магазина логичнее не векторизовать, а перевести JPG в WebP.

Требования типографий и лазерных станков

Российские типографии и мастерские предъявляют к векторным макетам набор требований, которые полезно знать до трассировки, а не после отказа в приёмке. Стандартный список выглядит так: только векторные форматы, замкнутые контуры, отсутствие дублей кривых и паразитных линий, текст в кривых, масштаб 1:1. Именно с последними двумя пунктами хуже всего справляются обычные онлайн-трассировщики.

Мусорные фигуры, порождённые артефактами JPEG, и есть те самые паразитные линии, из-за которых макет возвращают на доработку. Подавление по площади решает проблему на этапе трассировки, а не в ручной чистке узлов. Для гравировки дополнительно действует правило про цветность: желательна чёрно-белая графика без градаций серого, поскольку заливка означает область гравировки, а обводка означает линию реза. Под это как раз рассчитан пресет «Трафарет». Если приёмщик просит вектор в другом контейнере, готовый файл можно сохранить как PDF, что многие площадки принимают наравне с исходным SVG.

Честные ограничения инструмента

Фотографии трассировать не нужно, и вот почему. В фотографии нет плоских областей, из которых строится вектор, поэтому результатом будет постеризованное приближение, обычно тяжелее исходного JPG. Замер на снимке 800 на 600 пикселей показал: при 24 цветах SVG весит 546 КБ, при выбранных 12 цветах 284 КБ, и разница в точности между ними невелика. Пресет «Фото» сознательно настроен на размер, а не на достоверность, и он предназначен для стилизации, а не для сохранения качества.

Второе ограничение касается качества исходника. Трассировка не восстанавливает информацию, которой в файле нет. Мелкий, размытый или многократно пересохранённый JPG даст соответствующий вектор, и никакая настройка это не исправит. Третье: сложные градиенты и мягкие тени сводятся к ступенчатым областям, потому что палитра конечна. Четвёртое: результат почти всегда требует хотя бы беглой правки узлов в редакторе, машинная трассировка не заменяет ручную отрисовку логотипа, она экономит на ней несколько часов.

Обработка в браузере и защита данных

Все вычисления выполняются на вашем устройстве, файл никуда не отправляется. Это не юридическое заключение о соответствии, а архитектурное свойство: если данные физически не покидают браузер, вопрос трансграничной передачи по статье 12 закона 152-ФЗ применительно к этой операции просто не возникает. Для дизайн-студий и подрядчиков, работающих с макетами заказчиков по договору о конфиденциальности, разница между локальной обработкой и загрузкой на чужой сервер вполне ощутима. Отдельно стоит помнить, что JPG нередко хранит EXIF с геометкой и моделью камеры, и такие данные лучше убрать заранее через удаление метаданных из фото. В векторный вывод DocPivot метаданные исходника не переносятся.

Часто задаваемые вопросы