design
無料
サインアップ不要
SVGパスビジュアライザー
SVGパスの`d`属性を貼り付け、グリッド付きでライブレンダリングし、解析された各パスコマンドを探索します。
ツールを読み込み中…
このツールについて
任意のSVGパスの`d`文字列を入力すると、グリッド背景付きのキャンバスにレンダリングされます。ツールはすべてのコマンド（M、L、C、Q、A、Z、H、V、S、T）を解析し、座標とともに内訳テーブルに一覧表示します。スケールスライダーでズームイン・アウトし、ストロークと塗りつぶしの色を選択し、塗りつぶしをオン/オフに切り替えられます。バウンディングボックスの寸法が計算されて表示されます。ワンクリックで使用準備ができた`<path d="..."/>`SVG要素としてパスをコピーできます。
使い方
- 1 入力フィールドにSVGパスの`d`文字列を貼り付けるか入力してください。サンプルパスが事前に読み込まれています。
- 2 スケールスライダーを調整し、ピッカーを使用してストローク/塗りつぶしの色を選択してください。
- 3 キャンバスの下の解析されたコマンドリストを確認して、各セグメントを理解してください。
- 4 「SVG要素としてコピー」をクリックして、コードで使用できる`<path d="..."/>`スニペットを取得してください。
よくある質問
関連ツール