面倒なSVGのパスを簡単に作成できてしまう便利ツール -SVG Path Builder

面倒で複雑なSVGのパスでも簡単に作成できてしまう便利ツールを紹介します。
オンラインでもローカルでもどちらでも利用できます。

SVG Path Builder
SVG Path Builder -GitHub

SVG Path BuilderはGUIで簡単にSVGのパスを調整し、コードを生成できるツールです。

複雑なSVGのパスも簡単作成

使い方は簡単。
クリックで各ポイントを指定し、右パネルでその間のラインを設定します。ポイントを追加するにはCtrl+クリック、削除は右パネルの「Remove」です。

パネルでポイント間のラインを設定

パスが完成したら、右パネルの「PATH CODE」にコードが生成されます。

コードの生成