Превратите плоский логотип, иконку или штриховой рисунок в SVG, не зависящий от разрешения. Трассировка выполняется локально в этой вкладке, файл не покидает ваше устройство.
PNG хранит сетку пикселей. SVG хранит фигуры — залитые контуры, описанные координатами и кривыми. Поэтому перевод PNG в SVG не является простой сменой формата, как PNG в JPG: в сетке пикселей нигде не записано, где заканчивается одна фигура и начинается следующая. Конвертер должен вывести это сам, группируя пиксели близкого цвета в области и обводя каждую область контуром. Такой вывод называют трассировкой, или векторизацией, и его успех почти полностью зависит от того, что изображено на картинке.
Когда всё получается, результат лучше исходного файла. Контур не зависит от разрешения: один и тот же элемент остаётся чётким на визитке, в шапке сайта и на печатном баннере, а плоская графика часто выходит легче растрового оригинала. В наших измерениях логотип на 2,3 КБ превратился в SVG на 0,5 КБ всего из двух контуров, а отличие от оригинала при обычном размере просмотра было незаметным.
Когда не получается, провал вовсе не тонкий. У фотографии нет плоских областей для группировки: каждый пиксель чуть отличается от соседнего, поэтому трассировщик выдаёт тысячи крошечных контуров, которые вместе весят в несколько раз больше исходного JPEG и при этом выглядят как неудачная акварель. Поэтому конвертер осматривает изображение и сообщает, с каким случаем вы имеете дело, ещё до того, как вы потратите время на настройки.
Мы это измерили, а не предположили. Каждое тестовое изображение обводилось, полученный SVG растрировался обратно в исходный размер, и оба варианта сравнивались попиксельно. Меньшая ошибка означает, что вектор ближе к источнику.
| Плоский логотип, немного сплошных цветов | PNG на 2,3 КБ стал SVG на 0,5 КБ из 2 контуров; ошибка 2,1 | Идеальный случай. Плоская графика при 16 цветах. |
|---|---|---|
| Иконка или пиктограмма | Несколько контуров, заметно меньше 1 КБ | Идеально. Минимум даёт самый лёгкий файл без видимых потерь. |
| Штриховой рисунок или подпись | Обводится чисто; количество цветов на монохромном входе не даёт измеримой разницы | Берите Минимум — лишние цвета стоят размера и ничего здесь не дают. |
| Значок или печать с прозрачностью | 1,1 КБ, прозрачные области сохранены; ошибка 6,8 | Работает хорошо. Держите 8 цветов или больше, иначе оттенки поплывут. |
| Скриншот интерфейса с текстом | Панели и кнопки обводятся нормально, но каждая буква распадается на несколько контуров | Годится ради форм. Текст наберите заново в своём редакторе. |
| Фотография | Квантуется в тысячи цветов; SVG в несколько раз тяжелее PNG | Не подходит. Оставьте растровый файл или лучше сожмите его. |
Инструмент выполняет эту проверку на вашем изображении автоматически и показывает вердикт до того, как начнётся конвертация PNG в SVG, — так вы узнаёте заранее, а не после скачивания непригодного файла.
Трассировка PNG в SVG открывает четыре настройки, но важны они по-разному. Одна определяет качество результата, остальные — это тонкая подстройка.
Сколько записей палитры разрешено трассировщику — безусловно самая значимая настройка. Восемь — это нижняя граница: ниже неё цветная графика заметно искажается. В наших измерениях плоский логотип давал ошибку 2,1 при восьми цветах, 15,1 при четырёх и 56,9 при двух. Выше восьми кривая быстро выполаживается, поэтому 16 стоит по умолчанию, а 32 предназначено для подробных иллюстраций, а не рекомендуется как максимум.
Отбрасывает контуры меньше заданной площади, убирая крапины от сглаженных краёв. На реальной графике мы не заметили почти никакой разницы между минимальным и максимальным значением, поэтому это дополнительная настройка, а не то, что меняют пресеты. Поднимите её, если результат вернулся крапчатым.
Насколько обведённый контур может отходить от края пикселей. Свободный допуск даёт меньше кривых, они глаже, а файл легче; жёсткий повторяет каждую ступеньку оригинала, включая рваные. Пресеты задают его вместе с количеством цветов.
Смягчает изображение до обводки. Полезно на шумном скане: не даёт трассировщику превратить зерно или артефакты JPEG в сотни контуров. Для уже чистой графики оставьте ноль.
Всё происходит внутри этой вкладки браузера. Ничего не загружается на сервер, а это важно для невыпущенного фирменного стиля и всего, что попадает под соглашение о неразглашении.
Фотографии — самый явный провал, и об этом стоит сказать прямо, потому что огромная часть попыток перевести PNG в SVG приходится именно на неподходящий файл. Трассировка работает, отыскивая области одного цвета. У фотографии их нет: небо в пейзаже кажется однородным, но содержит сотни едва различимых оттенков синего, и трассировщик добросовестно обведёт каждый. Результат огромен, медленно отрисовывается и заметно хуже самой фотографии. Если нужна фотография полегче, сожмите её, а не векторизуйте.
Текст — второе типичное разочарование. Буквы обводятся как фигуры, а не как текст, поэтому результат нельзя выделить, найти поиском или отредактировать как шрифт. Мелкий текст страдает ещё и потому, что сглаживание размывает границу, нужную трассировщику, и каждая буква рассыпается на несколько перекрывающихся контуров. Если в логотипе есть словесная часть, честный рабочий подход — обвести здесь только символ, а слова заново набрать в дизайн-инструменте настоящим шрифтом.
Мягкие градиенты и тени находятся посередине. Они конвертируются без ошибок, но плавный градиент превращается в стопку плоских полос — та же постеризация, что была бы при сведении фотографии к шестнадцати цветам. Иногда это приятный эффект, а иногда он ломает макет, поэтому смотрите превью в полный размер, а не доверяйте одному лишь размеру файла.
Наконец, ни один трассировщик не восстановит деталь, которой в источнике никогда не было. Логотип в 64 пикселя, взятый с сайта, обведётся в комковатое подобие самого себя, потому что эти комки и есть то, что говорят пиксели. Начинайте с самой крупной и чистой копии, какую найдёте: с исходного экспорта, а не со скриншота, и с PNG, а не с JPG, поскольку сжатие JPEG добавляет собственные блочные края, которые трассировщик прилежно превратит в контуры.
Да. На выходе получается стандартная SVG-разметка из залитых контуров, поэтому файл открывается в Figma, Illustrator, Inkscape и любом редакторе кода. Можно перекрашивать отдельные контуры, удалять их или масштабировать всё целиком без потерь.
Для плоской графики — обычно да, часто в разы. В наших тестах логотип на 2,3 КБ обвёлся в 0,5 КБ. Для фотографий всё наоборот: SVG может весить в несколько раз больше исходного изображения, и это один из признаков, по которым работает проверка пригодности.
Нет. Трассировщик работает как WebAssembly и JavaScript внутри этой страницы, в фоновом воркере. Ваш файл никуда не отправляется, поэтому можно спокойно обрабатывать невыпущенные логотипы и клиентские работы.
Технически да, и результат почти наверняка окажется хуже самой фотографии. Ждите тысячи контуров, файл заметно большего размера и постеризованный вид. Инструмент отметит фотографическое изображение до конвертации, чтобы итог не стал неожиданностью.
Потому что трассировка видит буквы как фигуры, а не как текст. Мелкий или сглаженный шрифт распадается на несколько контуров на символ. Обведите здесь графические элементы, а текст наберите заново настоящим шрифтом в дизайн-инструменте.
Ручная перерисовка воссоздаёт макет минимальным числом чистых кривых и с правильным шрифтом. Трассировка следует за пикселями, поэтому даёт больше точек и наследует любую нерезкость источника. Для простого плоского логотипа разница часто незаметна; для сложного или низкого по разрешению знака перерисовка всё же лучше.
Принимаются PNG, JPG, WebP и GIF, поскольку изображение декодируется браузером до трассировки. PNG — лучшая отправная точка: в нём нет артефактов сжатия, которые трассировщик мог бы принять за деталь.
Да. Прозрачные области остаются прозрачными в SVG, поэтому обведённый значок или наклейка корректно лягут на любой цвет фона.
Остаётесь с растровыми изображениями? Эти инструменты тоже работают в браузере. конвертер изображений · сжатие изображений
Ваши фотографии не загружаются, редактирование изображений происходит в вашем браузере.