Конвертировать PNG в SVG

Трассируйте PNG в масштабируемый SVG прямо в браузере. Подходит для логотипов и плоских иконок с несколькими цветами, а не для фотографий.

Перетащите файлы сюда

.png · до 20 МБ

Выберите файлы

Количество цветов8

Больше настроек

СглаживаниеИгнорировать фигуры меньше чем8Толщина контура0Сохранить прозрачностьМасштаб вывода

Как трассировать в SVG

1
Перетащите PNG
До 20 файлов, по 20 МБ и 4 мегапикселя на изображение. Файлы JPEG, WebP и BMP с расширением .png тоже принимаются и конвертируются.
2
Выберите количество цветов
Чем меньше цветов, тем чище и легче результат. Два подходят для черного знака на белом фоне, восемь — для большинства плоских иконок.
3
Скачайте SVG
Карточка с результатом показывает, сколько цветов и контуров получилось. Так сразу видно, подошли ли настройки.

Что делает трассировка

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

Четыре настройки и за что каждая отвечает

Количество цветов — главный рычаг. Оно задает размер палитры, в которую все квантуется, и сильнее всего влияет и на размер файла, и на чистоту контуров. Сглаживание определяет, насколько плотно кривые должны прилегать к найденной границе. Низкое значение сохраняет острые углы, но создает гораздо больше узлов. Высокое дает плавные линии, которые могут съесть мелкие детали. «Игнорировать мелкие фигуры» отбрасывает любой контур короче заданного числа пикселей: это средство против JPEG-артефактов и шума сканера. Толщина контура по умолчанию равна нулю, то есть фигуры заливаются без видимой обводки. Увеличьте ее, если хотите, чтобы каждая область рисовалась еще и контуром в тот же цвет.

Прозрачность и результат, который можно проверить

С включенным «Сохранять прозрачность» пиксели с альфой ниже половины превращаются в отдельный прозрачный цвет в палитре и не рисуются. Поэтому логотип на прозрачном фоне получается с таким же прозрачным фоном. Если выключить этот режим, сначала кладется прямоугольник самого частого непрозрачного цвета, а поверх него трассированные фигуры. Так удобнее, если в месте назначения прозрачность совсем не поддерживается. В любом случае на выходе обычный читаемый XML: можно открыть файл в любом редакторе, увидеть пути и перекрасить заливку вручную.

Файл остается на вашем устройстве

Декодирование и трассировка выполняются прямо во вкладке браузера. Декодер PNG написан на WebAssembly, трассировщик на JavaScript, и ни один из них не обращается к сети. Ничего не загружается, ничего не ставится в очередь на сервере, а закрытие вкладки полностью очищает все из памяти.

Частые вопросы

Почему SVG не выглядит точной копией моего PNG?

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

Сколько цветов выбрать для логотипа?

Посчитайте плоские цвета в логотипе и задайте это число. Одноцветный знак на белом фоне лучше всего трассировать с 2 цветами, типичный двухцветный логотип с 3 или 4. Большее количество не добавляет точности плоской графике, а только дробит сглаженные края на лишние промежуточные фигуры и раздувает файл.

Почему результат такой тяжелый для фото?

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

Что делает «игнорировать мелкие фигуры»?

Отбрасывает любой найденный контур короче этого числа пикселей. Мелкие крапинки от JPEG-сжатия, зерно сканера или чуть шумный фон иначе тоже превращаются в контуры, и каждый из них утяжеляет файл, не добавляя ничего заметного. Значение по умолчанию 8 убирает почти весь шум, но сохраняет осмысленные мелкие детали вроде точки над i.

Можно ли добавить обводку вокруг фигур?

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

Сохраняется ли прозрачность?

Да, если включен режим «Сохранять прозрачность». Пиксели с альфой ниже половины получают свой цвет в палитре и совсем не рисуются, поэтому фон остается прозрачным, а не превращается в белый прямоугольник. Чтобы вместо этого получить сплошной фон, выключите переключатель. Тогда подложка зальется самым частым цветом изображения.

Сколько файлов можно трассировать за раз?

До 20 файлов, по 20 МБ и 4 мегапикселя каждый. Лимит по мегапикселям специально ниже, чем в наших других инструментах для PNG: время трассировки растет быстрее, чем число пикселей, и большое изображение скорее подвесит вкладку, чем обработается.

Файл загружается на сервер?

Нет. PNG декодируется и трассируется в браузере, там же собирается SVG. Файл никуда не отправляется из вкладки ни на одном шаге.

Статьи по теме

Как сделать фавиконку без мыла на Retina-экранахРаньше одного маленького favicon.ico хватало для всего сайта. Уже много лет это не так, и поэтому столько иконок выглядят размытыми.