元

polyline で三角形と四角形 (棒) を組み合わせれば矢印が作れます。

stroke-width : 左から 1, 5, 10

stroke-width で太さをある程度調整できます。
stroke-linejoin で角の丸さを指定できます。このサンプルは stroke-linejoin="round"

transform="rotate(d)" で回転させる

矢印のパーツを 1個だけ用意すれば向きは transform rotate() の角度で調整
できます。
下のサンプルは svg タグの中に transform を書いていますが、img タグの
CSS でも transform を指定できます。
左から d = 0, 90, 135, 160, 180, 270

transform scale(x,y) で縦横の比率を変える

scale でも太さ長さをある程度調整できます (矢印の先の大きさが変わるけど・・・)。
サンプルでは svg タグ内に scale を書いていますが、img の width, height 
でも縦横の長さを調整できます。

(2023/05)
動作     : Edge106

◎ノート