Бесплатный конвертер

PNG в Вектор SVG

Преобразуйте растровые изображения PNG и JPG в масштабируемую векторную графику SVG. Быстро и безопасно в вашем браузере.

Перетащите PNG/JPG сюда

До 50 МБ

Или

Об этом инструменте

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

Этот конвертер использует библиотеку imagetracerjs — версию JavaScript алгоритмов трассировки векторов, аналогичную potrace. PNG декодируется в растровое изображение RGBA, растровое изображение сегментируется на цветовые области с использованием настраиваемой палитры, граница каждой области прорисовывается в путь, пути упрощаются с использованием аппроксимации Безье, а полученные пути создаются как элементы пути SVG. Весь конвейер работает в вашем браузере без какой-либо загрузки на сервер.

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

Зачем конвертировать PNG в SVG

Векторизация PNG наиболее полезна, когда вам нужно масштабировать изображение за пределы его исходного разрешения. Логотипы, в частности, часто создаются в формате PNG скромного размера и должны выглядеть четко на рекламных щитах, дисплеях Retina и широкоформатных отпечатках. Векторная трассировка создает SVG, который масштабируется без потери качества; компромиссом является точность воспроизведения исходных пикселей.

SVG также значительно компактнее PNG для графики с небольшим количеством цветов и большими плоскими областями. Значок PNG размером 256×256 может иметь размер 8 КБ; эквивалентный SVG с двумя или тремя цветами часто имеет размер менее 1 КБ. Для библиотек значков пользовательского интерфейса, поставляемых в веб-интерфейс, векторные версии уменьшают размер пакета и повышают резкость при любой плотности отображения.

Как использовать

Перетащите PNG, выберите настройки трассировки, создайте SVG.

  1. Загрузите свой PNG: Перетащите файл в область загрузки или нажмите, чтобы просмотреть. Лучшие результаты дают изображения PNG с острыми краями и небольшим количеством различных цветов — логотипы, значки, штриховые рисунки, простые иллюстрации. Фотографии плохо трассируются и создают огромные SVG-файлы.
  2. При необходимости настройте параметры трассировки: Количество цветов определяет, сколько различных цветов появляется на выходе. Упрощение пути (также называемое ltres или qtres) контролирует, насколько агрессивно алгоритм сглаживает углы. Более высокая точность позволяет получить SVG ближе к источнику, но с большим количеством данных о пути.
  3. Трассировка и предварительный просмотр: Алгоритм imagetracerjs выполняет квантование цвета, обнаружение краев, трассировку контуров и подгонку по Безье. Время отслеживания зависит от размера изображения и количества цветов. Четырехцветный логотип размером 256×256 создается менее чем за секунду; изображение 1024×1024 с 16 цветами может занять несколько секунд.
  4. Загрузите SVG-файл: Сохраните SVG на свое устройство. Файл содержит XML-разметку с элементами пути; вы можете открыть его в любом текстовом редакторе, чтобы проверить или вручную настроить результат.

Общие случаи использования

Технические детали

imagetracerjs реализует многоэтапный конвейер: квантование цвета уменьшает растровое изображение до фиксированного количества цветов с помощью кластеризации k-средних или медианного разреза; обнаружение краев идентифицирует границы пикселей между областями; трассировка контуров следует границам для создания замкнутых многоугольников; Подгонка линий и кривых аппроксимирует полигоны кривыми Безье для сокращения данных о пути.

Наиболее важными параметрами алгоритма являются количество цветов (обычно: 4–32), pathomit (пути короче указанного количества пикселей отбрасываются как шум), ltres (допуск линии — насколько далеко край может отклоняться перед разделением на новый сегмент) и qtres (допуск квадратичной кривой — насколько агрессивно сглаживаются кривые). Значения по умолчанию хорошо подходят для логотипов; сложные изображения выигрывают от настройки каждого изображения.

Вывод — стандартный SVG 1.1 с элементами пути. Каждая цветовая область становится одним контуром с атрибутом заливки. Полученный файл откроется в любом браузере, векторном редакторе или инструменте дизайна, поддерживающем SVG. Размер файла зависит в первую очередь от количества путей и плотности узлов; типичный прорисованный логотип имеет размер 1–10 КБ.

Лучшие практики

Часто задаваемые вопросы

Будет ли результат SVG настоящим векторным файлом?
Инструмент отслеживает растровое изображение для создания векторных путей. Результаты лучше всего работают с простой графикой, логотипами и штриховыми рисунками. На фотографиях образуются сложные траектории, и они могут выглядеть не так, как ожидалось.
Что отличает SVG от других форматов изображений?
SVG — векторный формат: изображения описываются как математические фигуры, а не пиксели. Это означает, что файлы SVG масштабируются до любого размера без потери качества, и обычно они намного меньше, чем растровые изображения для графики, такой как логотипы и значки.
Есть ли какие-либо ограничения, о которых следует знать?
Поддерживаются файлы размером до 50 МБ. Обработка очень больших или сложных файлов может занять больше времени. Все преобразования происходят в вашем браузере, поэтому скорость обработки зависит от вашего устройства.
Сохраняются ли мои изображения конфиденциальными во время конвертации?
Да. Ваши PNG-файлы полностью обрабатываются в вашем браузере с использованием Canvas API и JavaScript. Ничего не загружается ни на один сервер — файл передается напрямую с вашего устройства в конвертер и обратно на ваше устройство.
Можно ли редактировать трассировку в Illustrator или Inkscape?
Да. Результатом является стандартный SVG с элементами пути. И Illustrator, и Inkscape открывают его изначально и позволяют редактировать контуры, менять цвета и уточнять результат.
Мой PNG загружен на сервер?
Нет. Отслеживание происходит в вашем браузере с помощью imagetracerjs. Файл не покидает ваше устройство.
Почему мой SVG-файл огромен?
Обычно потому, что исходное изображение имеет слишком много цветов или слишком много мелких деталей. Попробуйте уменьшить количество цветов, увеличить упрощение пути или использовать другое исходное изображение с более чистой геометрией.
Могу ли я отслеживать PNG с прозрачностью?
Да. Прозрачные пиксели становятся областями без путей в SVG. Прозрачный фон сохраняется, когда SVG отображается на любом цвете фона.