SVGパスの直線で矢印アイコンを作成する

ラインコマンドによる矢印アイコン

矢印は直線のみで構築される基本的なUI要素です。パスはM、L、Zコマンドのみを使用します。

パス

M 10,50 L 60,50 L 60,30 L 90,55 L 60,80 L 60,60 L 10,60 Z

内訳

コマンド	説明
M 10,50	シャフトの左端（上端）から開始
L 60,50	シャフトの上端を右方向に描画
L 60,30	矢じりの翼（上）まで上がる
L 90,55	矢じりの先端まで描画
L 60,80	矢じりの翼（下）まで下がる
L 60,60	シャフトの下端に戻る
L 10,60	シャフトの下端を左方向に描画
Z	開始点に閉じる

バリエーション

細い矢印（シャフトなし）：

M 10,50 L 70,10 L 70,35 L 90,35 L 90,65 L 70,65 L 70,90 Z

シェブロン（開いた矢印）：

M 30,10 L 70,50 L 30,90

双方向矢印：

M 10,50 L 40,20 L 40,40 L 60,40 L 60,20 L 90,50
L 60,80 L 60,60 L 40,60 L 40,80 Z

サイズと方向

座標を変換するかCSS/SVGのtransform="rotate(...)"を使用して矢印を回転させます。左を向くにはx座標を反転します。上を向くにはパスでxとyを入れ替えるかrotate(-90)を適用します。

ストローク vs. フィル

塗りつぶされた矢印にはパスをそのまま使用してフィルカラーを設定します。ストロークされたアウトライン矢印（シェブロンなど）にはZを省略し、fill="none"とstrokeカラーと幅を設定します。