Yqnn/svg-path-editor

これは何？

主な機能

• 01SVG pathデータをテキストで直接編集したり、キャンバス上の点をドラッグして編集したりできます。
• 02個々のpathコマンドを挿入・削除し、別の種類に変換できます。
• 03コマンドの座標を相対座標と絶対座標の間で切り替えられます。
• 04path全体に拡大縮小、移動、回転、丸め、最適化を適用できます。
• 05ズーム、ドラッグ、数値入力、表示範囲に合わせたズームでviewBoxを調整できます。

ユースケース

• ほかのツールから書き出したアイコンやイラストのpathを手作業で調整する。
• ブラウザ上でシンプルなSVG図形を作成する。
• コマンドを丸めたり最適化したりして、pathデータを整理・短縮する。

クイックスタート

1. 1

   Node.js v18.13 以上をインストールし、依存関係をインストールします

   npm install
2. 2

   開発サーバーを起動し、http://localhost:4200/ を開きます

   npm start

使う前に知っておきたいこと

• !ローカルで実行するには、Node.js v18.13 以上が必要です。
• !README には単体で動作するデスクトップ版のビルド手順はありません。ホスト版はブラウザーで動作します。

トピック

よくある質問

svg-path-editor とは？

ドラッグ操作で点を編集し、コマンドパネルでSVG pathデータを作成・編集できるブラウザベースのビジュアルエディター。 SVG Path Editorは、SVG pathの`d`属性を作成・編集するWebアプリです。テキストフィールドにpathデータを貼り付けると、キャンバス上の形状が更新されます。また、コマンドの種類を選んで終点をクリックし、ゼロからpathを作成することもできます。

svg-path-editor は無料で使えますか？ライセンスは？

svg-path-editor は Apache-2.0 ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

svg-path-editor は今もメンテナンスされていますか？

半年以内に更新あり。svg-path-editor の最終コミットは 2026年6月18日 です。

svg-path-editor は何に使えますか？

ほかのツールから書き出したアイコンやイラストのpathを手作業で調整する。 ブラウザ上でシンプルなSVG図形を作成する。 コマンドを丸めたり最適化したりして、pathデータを整理・短縮する。

svg-path-editor のインストール方法は？

Node.js v18.13 以上をインストールし、依存関係をインストールします: npm install 開発サーバーを起動し、http://localhost:4200/ を開きます: npm start

svg-path-editor はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/Yqnn/svg-path-editor