ZenovayTools

SVGパスエディタ

SVGパスデータを視覚化して検査します。d属性コマンド（M、L、C、Q、A、Z）を解析し、viewBox、ストローク、フィルを設定します。

Examples

Live Preview

8 commands parsed

Settings

Show grid lines

Parsed Commands(8 total)

#CmdDescriptionParameters
1MMove to (absolute)50, 30
2CCubic Bézier (absolute)50, 20, 35, 10, 20, 20
3CCubic Bézier (absolute)5, 30, 5, 50, 20, 65
4LLine to (absolute)50, 90
5LLine to (absolute)80, 65
6CCubic Bézier (absolute)95, 50, 95, 30, 80, 20
7CCubic Bézier (absolute)65, 10, 50, 20, 50, 30
8ZClose path—

SVGパスエディタの使い方

  1. 1SVGパスd属性を貼り付けるか入力します。
  2. 2ライブプレビューにレンダリングされたパスを確認します。
  3. 3下の表で解析されたコマンドを確認します。
  4. 4必要に応じてviewBox、ストローク、フィル設定を調整します。
Zenovayアナリティクス

創業者のためのアナリティクス。

  • リアルタイムの訪問者トラッキング
  • プライバシーファースト、クッキーバナーなし
  • 2分でセットアップ
Zenovayを見る

関連ツール

JSON フォーマッター & バリデーター
JSON データをフォーマット、検証、美しく整えます。構文強調表示とエラー検出が可能です。
JWT デコーダー
JWTトークンをデコードして検査します。ヘッダー、ペイロード、署名を表示します。
Base64 エンコード/デコード
テキストを Base64 にエンコードするか、Base64 をテキストにデコードします。UTF-8 およびバイナリデータに対応しています。
URLエンコード/デコード
URLコンポーネントをエンコードまたはデコードします。特殊文字、クエリ文字列、完全なURLを処理できます。

よくある質問

SVGパスd属性とは何ですか？▾
d属性は、描画するパスを定義します。M（移動）、L（線）、C（3次ベジェ）、Q（2次ベジェ）、A（円弧）、Z（閉じる）などのコマンドのシリーズが含まれます。
SVGパスコマンドはすべて何ですか？▾
M/m（移動）、L/l（線）、H/h（水平線）、V/v（垂直線）、C/c（3次ベジェ）、S/s（スムーズ3次）、Q/q（2次ベジェ）、T/t（スムーズ2次）、A/a（円弧）、Z/z（閉じる）。
絶対SVGパスコマンドと相対SVGパスコマンドの違いは何ですか？▾
大文字のコマンド（M、L、C）は原点からの絶対座標を使用します。小文字のコマンド（m、l、c）は現在のポイントからの相対座標を使用します。
SVG viewBoxとは何ですか？▾
viewBox属性はSVGの座標システムを定義します。4つの値（min-x、min-y、幅、高さ）を取ります。SVGコンテンツがコンテナ内でどのようにスケーリングおよび配置されるかを制御します。
SVGパスを最適化するにはどうすればよいですか？▾
相対コマンドを使用して座標サイズを削減し、不要な小数精度を削除し、連続する線分を結合し、可能な限りショートハンドコマンド（H、V、S、T）を使用します。