SVGパスの直線でチェックマークアイコンを描く

ラインコマンドによるチェックマークアイコン

チェックマークは最もシンプルで認識されやすいアイコンの1つです。右に傾いたV字型を形成する2つの線分だけで構成されます。

パス

M 10,55 L 35,80 L 90,20

内訳

コマンド	説明
M 10,55	チェックの左翼から開始
L 35,80	下の頂点まで右下に描画
L 90,20	長い腕の上端まで右上に描画

最適なスタイリング

これは開いたパス（Zなし）なので、以下のようにスタイリングします：

<path d="M 10,55 L 35,80 L 90,20"
      fill="none"
      stroke="#22c55e"
      stroke-width="8"
      stroke-linecap="round"
      stroke-linejoin="round" />

roundの線端と結合がチェックマークに洗練されたフレンドリーな外観を与えます。

アニメーション付きチェック

人気のあるアニメーションはstroke-dasharrayとstroke-dashoffsetを使用してチェックマークを段階的に描画します：

path {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: draw 0.4s ease-out forwards;
}
@keyframes draw {
  to { stroke-dashoffset: 0; }
}

stroke-dasharrayの値はパスの総延長から計算します（このパスでは約120）。

バリアント

太い丸みのあるチェック（広い角度）：

M 15,50 L 40,75 L 85,25

チェックボックス付き：

M 5,5 L 95,5 L 95,95 L 5,95 Z M 20,50 L 40,70 L 80,25

プロポーション

底部の頂点の角度が可読性に影響します。70〜100度の頂点角度がチェックマークとして明確に読めます。浅すぎるとVに見え、広すぎると方向性を失います。