Repolode
Предложить
Yqnn

Yqnn/svg-path-editor

Визуальный редактор для браузера, позволяющий создавать и редактировать данные SVG-путей с помощью перетаскивания точек и панели команд.

Open source альтернатива:Inkscape

Открыть на GitHubСайт
Звёзды
5,336
Форки
423
Открытые issues
27
Последний коммит
4 месяца назад

Что это?

SVG Path Editor — веб-приложение для создания и редактирования атрибута `d` у SVG-путей. Вставьте исходные данные пути в текстовое поле, чтобы увидеть фигуру на холсте, или создайте путь с нуля: выберите тип команды и щёлкните в точке назначения.

Точки можно перемещать перетаскиванием, а отдельные команды пути — вставлять, удалять, преобразовывать в команды другого типа и переключать между относительными и абсолютными координатами. Редактор также позволяет менять порядок элементов пути: например, начинать путь или подпуть с выбранной команды либо разворачивать подпуть. Ко всему пути можно применять масштабирование, смещение, поворот, округление, преобразование координат, разворот и оптимизацию. Область viewBox можно масштабировать, перемещать или задавать численно; также есть функция подгонки масштаба по содержимому.

Логика редактирования опубликована отдельно в npm-пакете svg-path-editor-lib. Для работы проекта требуется Node.js версии 18.13 или выше; в комплект входят dev-сервер, сборка для production и модульные тесты Karma.

Ключевые возможности

  • 01Редактирование данных SVG-пути в виде текста или перетаскиванием точек на холсте.
  • 02Вставка, удаление и преобразование отдельных команд пути.
  • 03Переключение команд между относительными и абсолютными координатами.
  • 04Масштабирование, смещение, поворот, округление и оптимизация всего пути.
  • 05Настройка viewBox с помощью масштабирования, перетаскивания, числовых полей или подгонки масштаба по содержимому.

Сценарии использования

  • Точная настройка контуров иконок или иллюстраций, экспортированных из других инструментов.
  • Создание простых SVG-фигур прямо в браузере.
  • Очистка и сокращение данных пути за счёт округления или оптимизации команд.

Быстрый старт

  1. 1

    Установите Node.js версии 18.13 или выше, затем установите зависимости

    npm install
  2. 2

    Запустите сервер разработки и откройте http://localhost:4200/

    npm start

Что важно знать

  • Для локального запуска требуется Node.js версии 18.13 или выше.
  • В README нет отдельной сборки для настольных компьютеров; размещённая версия работает в браузере.

Темы

#svg#svg-path#graphics#vector#web-editor#typescript#svg-editor#svg-parser

Частые вопросы

Что такое svg-path-editor?
Визуальный редактор для браузера, позволяющий создавать и редактировать данные SVG-путей с помощью перетаскивания точек и панели команд. SVG Path Editor — веб-приложение для создания и редактирования атрибута `d` у SVG-путей. Вставьте исходные данные пути в текстовое поле, чтобы увидеть фигуру на холсте, или создайте путь с нуля: выберите тип команды и щёлкните в точке назначения.
svg-path-editor можно использовать бесплатно? Какая у него лицензия?
svg-path-editor распространяется с открытым исходным кодом под лицензией Apache-2.0. Перед использованием в коммерческих продуктах проверьте условия лицензии.
svg-path-editor всё ещё поддерживается?
Обновлялся за последние 6 месяцев. Последний коммит в svg-path-editor — 18 июн. 2026 г..
Для чего можно использовать svg-path-editor?
Точная настройка контуров иконок или иллюстраций, экспортированных из других инструментов. Создание простых SVG-фигур прямо в браузере. Очистка и сокращение данных пути за счёт округления или оптимизации команд.
Как установить svg-path-editor?
Установите Node.js версии 18.13 или выше, затем установите зависимости: npm install Запустите сервер разработки и откройте http://localhost:4200/: npm start
Где скачать svg-path-editor?
Исходный код и инструкции по установке — на GitHub: https://github.com/Yqnn/svg-path-editor

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты