Softonic

SVGパスビルダー

ステップ 1 / 2

空白部分をクリックして点を追加します。点をドラッグして移動します。ボタンで最後の点を削除できます。

次へ

SVG<path>上のd属性は、小さなドメイン専用言語です：M 10 10 L 100 10 C 120 10 120 60 100 60 Z。各文字はコマンド（moveto、lineto、3次ベジェ曲線、close-path）を、各数字は座標または制御点を表します。このビルダーでは、キャンバスをクリックしてアンカーポイントを配置し、ドラッグして形を整えながら、パスがリアルタイムに描かれる様子を確認できます。平滑化を有効にすると直線セグメントが3次ベジェ曲線に変わり、形状を閉じたうえで、生成されたd属性または完全なSVGをコピーできます。

パスを構築する方法

  1. 1

    クリックしてポイントを追加

    クリックするたびにキャンバスにアンカーポイントが追加され、パスは`M`（moveto）から順番にそれらをつなぎます。

  2. 2

    ドラッグして形を整える

    任意のポイントをドラッグして移動でき、ボタンで直前のポイントを削除できます。最小は2ポイントです。

  3. 3

    直線か滑らかか

    ポイントを直線`L`セグメントでつないだままにするか、「平滑化」を有効にして3次ベジェ曲線`C`に変換します。

  4. 4

    閉じるか開いたままにする

    「パスを閉じる」を有効にすると始点へ戻る`Z`が追加されます。ポリライン/ストロークにする場合は開いたままにします。

  5. 5

    d属性をコピー

    生成された`d`文字列はスペース区切りでクリーンなので、任意のSVGにそのまま貼り付けられます。完全なSVGをコピーまたはダウンロードすることもできます。

SVGパスコマンドのチートシート

上のビジュアルビルダーはM、L、C、Zコマンド（moveto、直線、3次ベジェ曲線、close-path）を生成します。以下の残りのコマンド一覧は、他の場所に貼り付けるd文字列を読んだり手動で編集したりするための参考です。大文字は絶対座標を使用します。小文字は現在のペン位置からの相対オフセットを使用します。

コマンド 名前 文法
M / m Moveto M x y
L / l Lineto L x y
H / h 水平線 H x
V / v 垂直線 V y
C / c 3次ベジェ曲線 C x1 y1 x2 y2 x y
S / s 滑らかな3次ベジェ曲線 S x2 y2 x y
Q / q 2次ベジェ曲線 Q x1 y1 x y
T / t 滑らかな2次ベジェ曲線 T x y
A / a 円弧 A rx ry x-axis-rot lg sweep x y
Z / z Closepath Z

完成例：丸みを帯びたチェックマーク

M 4 12 L 10 18 L 20 6

3つのコマンド：(4, 12) に移動、(10, 18) に線を引く、(20, 6) に線を引く。パスに stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" を追加すると、クリーンなチェックマークグラフィックが作成されます。

arcコマンドが最も難しい

A rx ry x-axis-rotation large-arc-flag sweep-flag x yは7つの数値を取ります：

  • rx, ry、楕円の半径
  • x-axis-rotation、楕円の回転角度（度）
  • large-arc-flag、短い弧には0、長い弧には1
  • sweep-flag、反時計回りには0、時計回りには1
  • x, y、終点

旗を一つずつ切り替えて、同じ2つの端点が4通りの異なる方法でどのように接続できるかを確認してください。

ヒント

  • 数値は小さく、丸めた値に保つ。 座標をピクセルグリッドまたは半ピクセル単位にスナップし、17桁の小数は避ける。
  • パスが単独で使われる場合は大文字コマンドを推奨。 後でパスを平行移動する場合は、小文字（相対）コマンドが便利です。
  • 塗りつぶすときだけ閉じる。 パスが純粋に線だけの場合、Zは見た目を変えず、1バイトを節約できます。
  • SVGOを通す。 末尾のゼロ、重複したスペース、繰り返しのコマンドはきれいにまとめられます。

よくある質問

dの座標はビュー範囲と同じ単位です。viewBox="0 0 24 24"用に設計されたパスをviewBox="0 0 100 100"上に配置すると、左上の四分画に表示されます。座標をスケーリングするか、ビュー範囲のサイズを変更してください。

パスを翻訳または繰り返す際に使用する場合、相対命令により形状の移植性が保たれます。新しいMを任意の位置に先頭に配置すると、下流のすべての要素がそれに従って移動します。

はい。<polyline points="0,0 10,10 20,0"> は <path d="M 0 0 L 10 10 L 20 0" /> に変更されます。多角形には最終的な Z が追加されます。ほとんどの最適化ツールではパスの圧縮効率が高いため、この処理は自動的に行われます。

描画効果にはCSS stroke-dasharrayおよびstroke-dashoffsetを使用します。要素をパスに沿って移動するには、SMIL <animateMotion>を使用し、hrefをパスIDに指定します。

いいえ。パスコマンドはブラウザ内で計算され、決して外部に送信されません。

関連ツール

マテリアルデザイン カラーピッカー

Material Designのカラーパレットを閲覧できます。任意の色調（50からA700）を1タップでHEX、RGB、HSL形式でコピーできます。

方眼紙ジェネレーター

印刷できる方眼紙をオンラインで作成：方眼またはドット罫を選び、間隔をmmで設定し、A4かLetterと好きな線の色を指定して、印刷または鮮明なSVGでダウンロードできます。

罫線入り用紙ジェネレーター

印刷できる罫線入り用紙を無料で作成。カレッジ罫、広め罫、狭め罫を選び、行間をmmで設定し、用紙サイズとマージン線を決めて、印刷またはSVGでダウンロードできます。

旗作成ツール

6種類のレイアウト、色、文字、シンボルで、シンプルな3:2のカスタム旗をブラウザ内でデザインします。SVGまたはPNGをダウンロードするか、ブラウザの印刷ダイアログを開けます。

画像アップスケーラー

AI超解像または従来の補間処理で、低解像度画像を2×、3×、4×に拡大しながら重要なディテールを保ちます。

画像ピクセルレーター

調整可能なブロックサイズで画像全体または選択した領域をピクセル化し、顔、ナンバープレート、またはレトロな8ビットアートの遮蔽に使用できます。

このツールは他の言語でも利用できます