PerfectVector
Автор: Irene Kim

Как перевести PNG в SVG и проверить качество

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

5 мин чтения
На этой странице

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

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

PNG и SVG хранят разные данные

PNG — сетка пикселей. При сильном увеличении края становятся размытыми или ступенчатыми. Сжатие без потерь не отменяет конечного количества пикселей. См. спецификацию PNG 3.

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

Преобразование означает реконструкцию; качество зависит от точности восстановленных фигур.

Что означает сохранение качества

Открытия в Illustrator недостаточно. Проверьте:

  • Чистые контуры: кривые следуют рисунку, а не сетке пикселей.
  • Нужные узлы: точек достаточно для формы, но не слишком много для редактирования. Adobe рекомендует меньше точек для удобства и плавного отображения. См. значение числа узлов.
  • Точные цвета: плоские области не распадаются на множество близких оттенков.
  • Пригодную структуру: нужные части выделяются без случайных фрагментов и дублированной геометрии. Группы и составные контуры могут быть оправданы.

Детализация, шум, подгонка контуров, углы и цвета влияют на точность и сложность. Adobe Image Trace предоставляет соответствующие настройки. Расширение .svg не подтверждает удобство редактирования или резки. Для станка подготовьте SVG к лазерной резке и проверьте траекторию.

Сравнение сложности
Схема совы с плотным расположением узлов и меньшим количеством точек на похожих контурах
Схема объясняет сложность контуров. Сравнивайте реальную форму перед удалением узлов; показанные числа не являются тестом вашей картинки.

Как преобразовать и проверить PNG

Можно автоматически трассировать, затем проверить контуры, узлы, цвета и слои. В PerfectVector:

  1. Выберите исходник. Лучше оригинал, чем скриншот. Проверьте просветы букв, тонкие линии, прозрачность и детали в конечном размере.
  2. Загрузите и трассируйте. Откройте конвертер. Если подготовка меняет размер или сжатие, осмотрите подготовленную картинку. Сведения о продукте различают подготовку, преобразование, просмотр и разблокировку.
  3. Сравните бесплатный просмотр. Проверьте силуэт, намеренные зазоры, буквы и цвета. Просмотр не включает редактирование цвета.
  4. Разблокируйте перед правками. Один кредит открывает один результат. После этого меняйте и объединяйте близкие цвета. Проверяйте каждую правку: уменьшение палитры может стереть нужные различия; перекрашивание не объединяет пересекающиеся контуры резки.
  5. Экспортируйте рабочую копию SVG. Сохраните версию до дальнейшей очистки.
  6. Откройте в целевой программе. Проверьте размеры, фигуры, заливки, обводки и структуру в производственном размере. Чёткий просмотр в браузере не гарантирует импорт всех функций.

Практическая проверка

  • Совпадает ли внешний силуэт с исходником?
  • Сохранились ли просветы букв и мелкие зазоры?
  • Плавные ли кривые и остались ли нужные острые углы?
  • Сохраняют ли цвета свои роли после объединения?
  • Выделяются ли фигуры, а не только одно встроенное изображение?

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

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

Советы для чистого результата
  • Логотипы, значки и плоские иллюстрации часто подходят; детальные фото требуют иных ожиданий.
  • Повышайте слабый контраст только при сохранении нужных деталей.
  • Используйте лучший исходник: новые пиксели не возвращают размытые или удалённые детали.
  • Упрощайте цвета после трассировки и разблокировки, сравнивая каждое объединение с оригиналом.

Сравнение контроля и точности

МетодКонтрольПроверка
Автоматический векторизатор, включая PerfectVectorБыстрый первый результат и настройки продуктаТочность, узлы, палитра, приватность, текущие цены
Illustrator Image TraceКонтуры, углы, шум, цвета, методРазобрать результат, проверить сложность и потерянные детали
Inkscape Trace BitmapРежим, порог, несколько проходовНаложенные объекты, пятна, очистка
Ручная перерисовкаКаждая фигура и точкаВремя и соответствие источнику

Ручное рисование даёт прямой контроль; время зависит от картинки и исполнителя. Автоматические результаты меняются с исходником и настройками. См. Adobe, Inkscape и сравнение ИИ-векторизаторов.

Когда оставить PNG

Чёткие фигуры, логотипы, значки, линии и текст подходят для векторизации. Фото содержит непрерывные тона; их приближение фигурами может дать сложный или постеризованный файл. Векторизуйте ясные края и ограниченную палитру. Фото оставляйте растровым, если не нужен стилизованный, а не точный результат.

FAQ

Уменьшает ли перевод PNG в SVG качество? Контейнер сам по себе его не меняет. Восстановленные контуры масштабируются без пикселей, но точность зависит от источника, метода и настроек. Встроенный PNG не стал вектором.

Можно ли перевести фото PNG в SVG? Можно, но обычно не стоит: файл бывает огромным или постеризованным. Векторизация прежде всего для логотипов, значков и иллюстраций.

Бесплатно ли преобразование? Преобразование и просмотр бесплатны; один кредит открывает редактирование и экспорт. Сначала сравните, затем проверьте SVG в целевой программе.

Какие программы открывают SVG? В частности Illustrator, Figma, Inkscape, Affinity Designer и Canva. Поддержка фильтров, текста, масок и встроенного содержимого отличается. Проверяйте свою программу и версию.

Sources

  1. W3C — PNG, третье издание — Представление без потерь и альфа.
  2. W3C — SVG 2 — Фигуры, контуры и отображение.
  3. W3C — Встроенное содержимое — PNG внутри SVG не является векторной геометрией.
  4. Adobe — Настройки Image Trace — Детали, контуры, углы, шум и цвет.
  5. Adobe — Упрощение контуров — Удаление узлов и точность.
  6. Inkscape — Трассировка изображения — Один или несколько проходов.
  7. PerfectVector — Сведения о продукте — Подготовка, просмотр и разблокировка.

Преобразуйте PNG и сравните просмотр с контурами и деталями оригинала. Разблокируйте перед правками, затем проверьте экспорт в целевой программе.

Ещё из блога

PerfectVector

Превратите файл изображения в
редактируемый SVG

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