Как перевести JPG и PNG в SVG

Короткий ответ: преобразовать в SVG картинку JPG (он же JPEG) или PNG можно двумя способами, и результат у них разный. Первый — «завернуть»: картинка целиком вкладывается в файл SVG и остаётся растром. Второй — векторизация: программа заново строит изображение из контуров, и получается настоящий вектор. Большинство конвертеров в SVG молча делают первое. Настоящий перевод выполняет трассировка — например, в нашей программе RasterTracer. Ниже — как отличить одно от другого и как получить чистый SVG.

Картинка в SVG: два разных результата

SVG — текстовый формат. Внутри файла записаны команды: провести кривую отсюда сюда, залить таким-то цветом. Но среди этих команд есть и такая: «показать вот эту растровую картинку». Она позволяет вставлять фотографии в векторные макеты — и она же позволяет выдать любую картинку за SVG.

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

Как проверить, что внутри файла SVG

Способ первый — увеличить. Откройте файл в браузере и приблизьте в несколько раз, удерживая Ctrl и вращая колесо мыши. Если края расплываются и распадаются на квадраты — внутри растр.

Способ второй — заглянуть в текст. Откройте SVG в Блокноте: это обычный текстовый файл.

• Видите слово <image и за ним длинную, на тысячи знаков, строку из букв и цифр — это вложенная картинка.
• Видите много строк, начинающихся с <path, — это контуры, то есть вектор.

Так проверяют и файл, полученный от подрядчика, и результат онлайн-конвертера — до того как отправить его дальше.

Как перевести PNG и JPG в SVG трассировкой

Сама трассировка в RasterTracer занимает несколько щелчков: картинка, режим под число цветов, готовый набор настроек — и рядом с оригиналом появляется вектор. Все шаги и настройки разобраны в основном тексте раздела — из растра в вектор; здесь остановимся на том, что относится именно к файлу SVG.

Сохранить в SVG или скопировать

• Экспорт — Ctrl + S. Трассировка выполняется в полном разрешении исходника, результат записывается в файл.
• Копирование — Ctrl + C. В буфер обмена попадает текст SVG, построенный по предпросмотру. Его можно вставить прямо в векторный редактор или в код страницы — удобно для значков.

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

Как получить чистый SVG с малым числом узлов

Хороший векторный файл — не тот, что обвёл каждую точку исходника, а тот, что передал форму минимумом контуров. Он легче, быстрее рисуется на странице и проще в правке. Строка состояния программы показывает число путей, число цветов и размер SVG — следите за ними, пока двигаете ползунки.

• Сравнивайте размер файла, а не только вид. Два результата могут выглядеть одинаково, а весить в пять раз по-разному. Для значка на сайте берите тот, что легче.
• Не гонитесь за точностью. Чуть большее сглаживание убирает дрожь линий и сокращает число узлов; слишком большое срезает углы. Где проходит граница, видно на шторке сравнения.

Остальные приёмы — крупный исходник, меньше цветов, подавление шума — общие для любой трассировки и собраны в основном тексте раздела.

JPG в SVG и PNG в SVG: есть ли разница

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

Что переводить в SVG не стоит

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

Онлайн-конвертер в SVG: на что смотреть

Сервисы «PNG в SVG онлайн» бывают обоих видов: одни действительно трассируют, другие оборачивают. По описанию на сайте это не всегда понятно, поэтому результат стоит проверять способами из второго раздела. Настроек у трассирующих сервисов обычно немного, а картинка отправляется на чужой сервер — для логотипа заказчика или подписи это стоит учитывать.

Что делать с готовым файлом дальше — чем его открыть и как вставить на сайт — рассказано в тексте про то, что такое SVG. А если нужен вектор для типографии, начните с разбора требований: логотип в векторе и «в кривых».