itsytools.

PNG · JPG → SVG

Векторизация PNG/JPG в SVG

Преобразуйте PNG или JPG в редактируемые фигуры SVG. Просматривайте и скачивайте результат прямо в браузере.

01

Добавить изображение

PNG · JPG · JPEG

8

Меньше цветов — проще SVG.

02

Ваш SVG

Добавьте изображение и векторизуйте его для предварительного просмотра.

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

Выберите изображение и настройки трассировки SVG

Трассировка превращает цветные области PNG или JPG в контуры SVG. Плоская графика и чёткие края обычно подходят лучше фотографий. Результат приближает исходник и не восстанавливает отсутствующие детали.

Пошаговая инструкция

  1. Откройте PNG или JPG с чётким объектом. Заранее обрежьте ненужное окружение, если оно создаст лишние контуры.
  2. Начните с небольшой палитры и сбалансированной детализации. Выполните трассировку, сравните предпросмотры и меняйте одну настройку за раз.
  3. Скачайте SVG и проверьте его в нужном размере отображения. Сохраните растровый оригинал, если важны точные детали фотографии.

Настройки и ограничения

Цветовая палитра
Меньше цветов упрощают области и уменьшают число контуров, но могут объединить важные оттенки. Больше цветов не возвращают детали.
Детализация трассировки
Простой, сбалансированный и подробный режимы ограничивают длинную рабочую сторону соответственно до 240, 400 и 600 пикселей.
Прозрачность и текст
Прозрачные области пропускаются. Частичная прозрачность упрощается; текст превращается в фигуры, а не редактируемые или доступные для поиска символы.

Разбор примера

Загрузите color-blocks.png, выберите 3 цвета и сбалансированную детализацию. Исходник 600 × 400 трассируется при 400 × 267 пикселях.

Скачать файлы примера

Пример исходных данных

600 × 400 px · 3

Ожидаемый результат

<svg width="600" height="400" viewBox="0 0 400 267">
  <path/> <path/> <path/>
</svg>

Пример SVG содержит 3 заполненных контура и сохраняет размер отображения 600 × 400. В нём нет встроенного исходного растра.

Вопросы и устранение неполадок

Почему исчезли маленькие буквы или тонкие линии?

Уменьшение и упрощение могут удалить их. Попробуйте подробный режим и более чистый исходник; воссоздайте важный текст в векторном редакторе.

Всегда ли SVG меньше PNG?

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

Почему полностью прозрачное изображение отклоняется?

Нет видимых пикселей для трассировки. Выберите графику с видимыми фигурами вместо пустого прозрачного холста.