Трассировка, а не обёртка
Когда вы отдаёте конвертеру JPG и просите SVG, он может сделать одно из двух, и это не варианты одного и того же.
Простой путь — положить исходный растр внутрь элемента <svg>. Он срабатывает всегда, не спотыкается ни на какой картинке, и расширение у файла правильное. Но это по-прежнему та же фотография: при увеличении она размывается ровно так же, как раньше. Это не векторная графика, а большинству тех, кто просит SVG, нужна именно она.
Второй путь — вычислить, где на самом деле находятся формы, и записать их контурами. Именно это здесь и происходит. В результате нет никакого растра: это набор путей, которые остаются чёткими на любом размере, и каждый из них можно выделить, передвинуть и перекрасить в векторном редакторе.
Как это работает
Сначала картинка сводится к небольшому числу плоских цветов, причём выбираются они из самого изображения, а не из готового списка: двухцветный логотип сохраняет свои точные два цвета, а не их приближения. Затем у каждого цвета обводится контур — по границам между пикселями, поэтому соседние фигуры делят общее ребро точно, без наложения и без волосяного зазора.
Контуры получаются ступенчатыми, по ступеньке на пиксель, поэтому их упрощают: ступеньки убирают, углы оставляют. Это и есть разница между логотипом в четыре килобайта и таким же на вид в четыреста. Наконец внешние и внутренние контуры каждого цвета складываются в один путь с правилом заливки even-odd — благодаря ему середина буквы «О» остаётся отверстием, а не залитым пятном поверх буквы.
С чем справляется хорошо
Со всем, что уже состоит из плоского цвета с внятными границами: логотипы, иконки, штриховая графика, подписи, схемы, диаграммы, скриншоты интерфейсов, сканы текста и рисунков пером. Такие изображения обводятся чисто, сохраняют форму и часто дают файл меньше исходного.
С чем справляется плохо и почему
С фотографиями. Трассировка держится на предположении, что картинка состоит из плоских областей, а фотография — прямая противоположность: непрерывный переход миллионов оттенков без единой плоской зоны. Сведение к горстке цветов выдумывает резкие границы, которых в кадре не было, и результатом становится постеризованное приближение из тысяч фигур в очень большом файле.
Это ограничение не конкретно этого инструмента, а трассировки как таковой. Поэтому страница измеряет картинку до того, как что-либо конвертировать: считает, какую долю изображения составляют его собственные несколько самых частых цветов. У плоской графики это больше девяноста процентов, у фотографий — заметно меньше половины, так что различить их несложно. Обвести фотографию вам всё равно не запретят — просто это не станет неожиданностью.
Настройки и чего они стоят
«Цвета» — до скольких плоских цветов сводится картинка. Слишком мало — теряются детали; слишком много — шум сжатия JPEG начинает обводиться как содержимое. Начните с того числа цветов, которое вы на картинке реально видите.
«Детализация» — насколько точно контуры повторяют исходные пиксели. Резче сохраняет острые углы ценой размера файла, мягче скругляет и файл уменьшает. Ни то ни другое не «правильно» вообще, поэтому вы видите оба варианта.
«Убрать крапинки» отбрасывает фигуры в один-два пикселя. JPG логотипа не идеально плоский: сжатие превращает каждую границу в полосу промежуточных оттенков, а каждый оттенок — в свой слой с россыпью островков. Их не видно, и они составляют большую часть файла, поэтому опция включена по умолчанию.
«Не обводить фон» находит цвет, преобладающий по краям картинки, и оставляет его необведённым — получается прозрачный SVG. Логотип, приехавший на белом прямоугольнике, — обычный случай, и этот прямоугольник к логотипу не относится.
Частые ошибки
Обвести фотографию и ждать чистого векторного результата — самое частое разочарование, и это не сбой, который можно исправить: так работает трассировка, когда в исходнике нет плоского цвета. Предупреждение о фотографии как раз для того, чтобы не тратить время на настройки, которые здесь ничего не исправят. Второй частый промах — оставить «Убрать крапинки» выключенной на сильно сжатом JPG: шум на границах, для очистки которого и существует эта опция, превращается в сотни лишних мелких фигур, раздувая и число фигур, и вес файла ради детализации, которую всё равно никто не разглядит.
Поменять настройку и скачать файл, не нажав «Трассировать» заново, — ловушка, от которой страница защищает сама, а не то, во что легко попасть случайно: предпросмотр и скачивание всегда отражают последнюю трассировку, и строка состояния прямо говорит, если настройка изменилась с тех пор. Если ссылка на скачивание выглядит устаревшей, так и есть — нажмите «Трассировать» ещё раз.
Особые случаи
Картинка одного сплошного цвета даёт ноль фигур: обводить попросту нечего, а включённая при этом опция «Не обводить фон» убирает единственную имеющуюся фигуру, оставляя пустой SVG. Инструмент говорит об этом прямо, а не отдаёт файл, который выглядит как молча провалившийся результат. Очень маленькая или малоконтрастная картинка тоже может обвестись почти в ничто — по той же причине, что и фотография: в ней слишком мало по-настоящему плоских областей, между которыми можно найти границу.
Похожие конвертеры
Если на самом деле нужен любой файл с расширением .svg, а не настоящая векторная графика — например, для формы, которая просто проверяет тип файла, — обёртка растра была бы совсем другой, куда более простой задачей, и этот конвертер её сознательно не делает. Если исходник — WebP или HEIC, а не JPG, сначала переведите его в JPG или PNG отдельным конвертером, а затем обводите результат здесь. Если картинку нужно не обвести, а вставить в документ, для этого есть отдельный конвертер изображения в Word.
Куда девается ваша картинка
Никуда. Всё описанное выше происходит в вашем браузере, на JavaScript, над файлом, который вы выбрали. У страницы нет адреса для загрузки и во время работы она не делает ни одного сетевого запроса.
Откройте страницу, отключите интернет — трассировка продолжит работать. Это самая простая демонстрация того, что ничего не покидает ваше устройство.