SVGパスエディター
無料でオンラインで利用可能 SVGパスエディター インストール不要のツール
SVG パスエディターについて
SVG パスエディターは、SVG パスの d 属性を記述・調整し、図形をリアルタイムで確認できるツールです。パス文字列を入力または貼り付けるとプレビューが逐次再描画され、表示は座標に合わせて自動で収まります。線と塗りの色、線の太さを設定し、完成したパスをコピーし、組み込みのコマンドリファレンスを開けます。すべてブラウザ内で動作し、何もアップロードされません。
使い方
1. 入力欄にパスデータを入力または貼り付けます 2. 線の色、塗りの色、線の太さを設定します 3. リアルタイムに更新されるプレビューを確認します 4. 必要に応じてコマンドリファレンスを開きます 5. コピーをクリックして完成したパス文字列を取得します
より良い結果のためのヒント
パスは、移動の M、直線の L、曲線の C など、座標を持つコマンドの並びです。大文字のコマンドは絶対座標・正確な位置を使い、小文字は直前の点からの相対座標を使います。表示はパス内の数値を走査して自動調整されるため、図形が切れて見える場合は余白を足すか座標を確認してみてください。弧やベジェなど各コマンドの正確な構文はリファレンスカードで確認できます。
▶d 属性とは何ですか？
SVG パスを記述するデータ文字列で、描画コマンドと座標の並びです。エディターはその文字列を受け取り、定義された図形を描画します。
▶プレビューはどうパスに収まりますか？
パス内のすべての数値を走査して x と y の最小値・最大値を探し、少しの余白を含めて表示枠を作り、図形全体が見えるようにします。
▶大文字と小文字のコマンドの違いは？
M や L のような大文字は原点からの絶対座標を使います。m や l のような小文字は直前の点からの相対座標を使います。
▶パスの検証はしますか？
入力内容をブラウザの SVG エンジンで描画するため、構文エラーは単に欠けた図形やおかしな図形として現れます。コマンドリファレンスが間違いの発見と修正に役立ちます。
▶結果をコピーできますか？
はい。コピーボタンがパス文字列をクリップボードに書き込み、SVG ファイルやソースコードに貼り付けられます。やり直し用のクリアボタンもあります。
このツールがあなたに役立ったなら、私にコーヒーをご馳走することをお勧めします。
私にコーヒーを買ってください。