Как создать путь SVG из линейного изображения?

У меня есть линейный рисунок в формате PNG, из которого мне нужно создать SVG.

Мне нужно создать путь svg справа налево, слева направо, от центра к сторонам ИЛИ от сторон к центру. Вот пример:

Изображение горизонта

Мне нужно это для плагина jQuery (ленивый рисовальщик линий), который анимирует этот рисунок линии в последовательности пути, указанного в файле SVG.

Я использую Adobe Illustrator CS6, и он создает беспорядочный путь SVG в файле SVG. Из-за этого анимация начинается и заканчивается резко с любого направления (в соответствии с путем SVG в файле SVG).

У меня также есть портативная версия Inkscape, хотя я не знаю, как использовать Inkscape для импорта PNG в виде линейного вектора.

Пожалуйста, может кто-нибудь предложить способ сделать это в Illustrator, Inkscape или любой другой утилите?

Кроме того, как уменьшить выходной файл SVG в Illustrator? Я поместил два штриховых рисунка PNG в иллюстратор, а затем обвел их. Выходной файл SVG весит 470 КБ, а мне нужно меньше 40 КБ. Есть ли какой-либо онлайн-инструмент или плагин Illustrator/Photoshop для оптимизации вывода SVG до размера 40 КБ?

Ответы (1)

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

введите описание изображения здесь

Вы можете увидеть следующее:

  • Линия реализуется не как линия, а как площадь. Хотя это можно исправить, это может объяснить некоторые из ваших проблем.
  • На уровне пикселей в вашей трассе много несовершенств.
  • Узлов гораздо больше, чем необходимо (что объясняет большой размер файла).

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

Таким образом, для достижения какого-либо удовлетворительного результата вам, вероятно, придется перерисовать этот горизонт самостоятельно. Учитывая, что он в основном состоит из простых геометрических фигур, это должно быть довольно простой задачей.

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

введите описание изображения здесь

Обратите внимание, как мало узлов я использовал.

Если вы попробуете это, не забудьте использовать инструменты, выравнивающие узлы относительно друг друга и делающие углы прямоугольными, если это уместно.

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

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

См. также этот вопрос о суперпользователе по этому вопросу.

"вам, вероятно, нужно перерисовать этот горизонт самостоятельно" - нет ли способа автоматизировать это? Может ли это быть чем-то полезным? github.com/fablabnbg/inkscape-centerline-trace
@Mawg: Учитывая строгие требования и применение ОП, я бы сказал « нет » по причинам, изложенным в вопросе. Если вы более снисходительно относитесь к тому, какой результат вы принимаете, ситуация, конечно, другая.
Как создать путь SVG из линейного изображения?
СпросиСетьПолитика конфиденциальности1y, 1v