Как конвертировать PNG в SVG: трассировка логотипов и иконок

PNG — растровое изображение: фиксированная сетка пикселей, у каждого из которых есть цвет и, при необходимости, значение прозрачности. Логотип 500 × 500 px состоит ровно из 250 000 таких квадратиков и ничего больше, поэтому при увеличении до размера плаката каждый квадрат лишь становится крупнее или размываются промежутки между ними. SVG — векторное изображение, текстовый файл со списком фигур вроде <path>, <circle> и <rect> с координатами и цветами заливки. Браузер или режущий плоттер перерисовывает эти фигуры в любом нужном размере, поэтому векторный логотип одинаково чёткий и на экране телефона, и на выставочном баннере.

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

Некоторые конвертеры пропускают самую сложную часть. Они создают корректный SVG-файл с одним элементом <image>, в который исходный PNG встроен как текст base64, из-за чего файл ещё и примерно на треть больше PNG. Такой файл открывается как SVG и проходит проверку типа, но остаётся пиксельным изображением в векторной обёртке: при увеличении видны те же зубчатые края, а режущий плоттер не находит контуров. Откройте любой SVG в текстовом редакторе и найдите data:image/png: если эта строка есть, векторизации не было.

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

Фотографии — противоположный случай. В портрете или предметном снимке тысячи едва различимых оттенков плавно переходят друг в друга, и векторный формат не умеет описывать это эффективно. Если попросить трассировщик взять 16 цветов, получится постеризованная иллюстрация с заметными полосами; если 64 — десятки тысяч мелких фигур в файле, намного больше PNG, и всё равно не похожих на фото. Мягкие градиенты, тени и свечение так же превращаются в стопки тонких полос. Третье слабое место — мелкий текст: при 10–12 px сглаживание сливает каждую букву с фоном, и трассировщик не отличает «е» от «о».

Разрешение важнее любых настроек. Трассировщик подгоняет каждую кривую под лесенку пикселей вдоль края, и чем мельче эта лесенка, тем точнее кривая. Если вы сами экспортировали PNG из Figma, Canva, Photoshop или презентации, экспортируйте его заново в размере, вдвое-втрое больше отображаемого: логотип шириной 1500–2000 px даёт трассировщику достаточно данных. Не увеличивайте маленький PNG нейросетевым апскейлером, если результат не выглядит чистым при масштабе 100 %: выдуманная текстура краёв будет трассирована так же добросовестно, как и настоящие края.

Затем упростите фон. PNG поддерживает полную прозрачность, и прозрачный фон — самый простой случай: полностью прозрачные пиксели считаются пустым местом, поэтому за рисунком в SVG нет белой рамки. Если у PNG сплошной фон, сначала обрежьте изображение по границам рисунка; точное кадрирование описано в нашем руководстве как обрезать фото под нужные пропорции. Пёстрый фон, например логотип, сфотографированный на футболке, нужно удалить или закрасить одним плоским цветом до трассировки.

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

Любой трассировщик задаёт одни и те же три вопроса, даже если названия отличаются. Первый: сколько цветов оставить. В конвертере PNG в SVG параметр Цветовой режим выбирает между режимами Цвет, Оттенки серого и Чёрно-белый, а Количество цветов задаёт, на сколько кластеров делятся пиксели, от 2 до 64. Установите число, которое вы записали. Слишком большое значение заставит трассировщик выделять сглаженные пиксели краёв в отдельные тонкие цвета, и вокруг каждой фигуры появится слабый ореол; слишком маленькое сольёт два фирменных цвета в один.

Второй вопрос: как обрабатывать края. Сглаживание скругляет ступеньки от пикселей, а Детализация определяет, насколько мелкое пятнышко ещё станет фигурой. На странице PNG значения по умолчанию — Детализация 70 и Сглаживание 40: они сохраняют мелкие углы чистого экспорта. Уменьшите Детализацию, если появились пыль и лишние точки, увеличьте Сглаживание, если кривые выглядят волнистыми, а для Кривые выберите Прямые линии для геометричных логотипов с прямыми краями или Пиксельные края для пиксель-арта, который должен остаться угловатым.

Третий вопрос относится только к чёрно-белой трассировке: где провести границу между чернилами и бумагой. Порог меняется от 1 до 254, по умолчанию 128. Пиксели темнее порога становятся чёрными, светлее — пустыми. Для подписи тонкой синей шариковой ручкой поднимите его до 160–180, чтобы слабые штрихи сохранились; для жирного рисунка маркером на слегка сером листе опустите до 100, чтобы текстура бумаги не превратилась в точки. Меняйте по одной настройке и сравнивайте результат, потому что они влияют друг на друга.

Не ограничивайтесь миниатюрой. Откройте SVG в браузере и увеличьте до 400–800 % самую сложную кривую: изгиб буквы или кончик острия. Хорошая трассировка даёт плавные дуги и острые углы там, где они есть в рисунке; плохая — волны, вмятины и скруглённые кончики. Затем откройте файл в векторном редакторе, например Inkscape, Illustrator или Figma, и включите режим контуров или узлов. Простому двухцветному логотипу обычно нужно несколько сотен узлов; если их несколько тысяч, трассировщик повторял шум, и такие контуры будет тяжело редактировать или резать.

Быстрая проверка — размер файла. Оптимизированный SVG плоского логотипа обычно занимает от нескольких до нескольких десятков килобайт и часто меньше исходного PNG. Если трассированный файл в несколько раз больше PNG, обычно это значит, что цветов слишком много, детализация чрезмерна или трассировали фото, которое трассировать не стоило. Оставьте включённой опцию Оптимизировать SVG: она округляет координаты и объединяет контуры без видимых изменений. В конце увеличьте рисунок до размера плаката и уменьшите до размера фавикона, чтобы убедиться, что он читается в обоих случаях.

Бесплатный вариант для компьютера — Inkscape. Импортируйте PNG, выделите его и откройте Контур > Векторизовать растр (Shift+Alt+B). Режимы с одним проходом, например «Яркостная отсечка», дают один чёрный контур и подходят для штриховых рисунков; режимы с несколькими проходами трассируют заданное число цветов или оттенков серого в виде наложенных слоёв. Чёрно-белая трассировка в Inkscape построена на Potrace — библиотеке, которую Питер Селинджер выпустил в 2001 году. Сам Potrace — программа командной строки: она читает PBM, PGM, PPM или BMP, а не PNG, работает только с двухцветными изображениями и сохраняет SVG, PDF, EPS или DXF, поэтому хорошо подходит для скриптов и пакетной обработки больших объёмов сканов.

В Adobe Illustrator функция «Трассировка изображения» (Image Trace) заменила прежнюю Live Trace начиная с Illustrator CS6. Поместите PNG, откройте Окно > Трассировка изображения и начните с готового пресета, например «Чёрно-белый логотип», «3 цвета» или «16 цветов», затем настройте параметры «Контуры», «Углы» и «Шум» в расширенном разделе. Трассировка остаётся «живой», пока вы не нажмёте Expand (Разобрать): тогда она превращается в обычные редактируемые контуры. Если ни одна из программ не установлена, тот же процесс — уменьшение числа цветов, поиск границ, подгонка кривых — выполняет онлайн-конвертер; конвертер изображений в SVG принимает также JPG, WebP и HEIC и умеет сохранять EPS, PDF или DXF вместо SVG.

В вебе SVG является рекомендацией W3C с 2001 года, и все современные браузеры отображают его в теге <img>, как CSS-фон или прямо в HTML, где цвета можно даже менять при наведении курсора. Векторизованный логотип обычно заменяет несколько PNG разных размеров для экранов retina одним небольшим файлом. Для режущих плоттеров SVG — формат, которого ждут Cricut Design Space и Silhouette Studio: каждая трассированная фигура становится линией реза, а многоцветная трассировка приходит отдельными слоями, которые можно вырезать из плёнки разных цветов. Лазерные станки и ПО для ЧПУ чаще предпочитают DXF, который PNG в DXF создаёт с теми же настройками трассировки.

Типографии просят векторные макеты, потому что печатному станку, оцифровщику вышивки или плоттеру нужны контуры, а не пиксели, и трассированный SVG часто подходит для наклеек, футболок или баннера. Но это всё равно приближение: кривые подобраны приблизительно, цвета усреднены по пикселям, а текст превращён в контуры. Поэтому перед трассировкой логотипа компании спросите у того, кто его делал. У дизайнера или агентства почти всегда есть исходник в AI, EPS, PDF или SVG с точными кривыми, именованными цветами и шрифтами, и отправить его им — дело минуты. Трассировка подходит, когда оригинал утерян, когда логотип сохранился только на отсканированном фирменном бланке или когда это ваш собственный рисунок.