基本
<svg width="500px" height="500px" viewBox="0 0 500 500">
<line x1=0 y1=0 x2=100 y2=100></line>
</svg>svgタグで囲んでその中に表示したいものを記述していく。
width,heightとviewBoxはおそらく合わせてしまっても問題ない。
svg内に配置できる要素一覧は以下
line
直線
<line x1=0 y1=0 x2=100 y2=100></line>
x1,x2 が始点x2,y2 が終点
polyline
折れ線
<polyline points="0,0 0,100 100,0 100,100 200,200" stroke="#000" fill="none"></polyline>
x1,y1 x2,y2 ... xn,ynというふうにpointsを指定する。
rect
矩形
<rect x=400 y=400 width=50 height=50></rect>
始点とサイズを指定する。circle
円形
<circle cx=200 cy=100 r=20></circle>
cx,cyが中心点rが半径
ellipse
楕円
<ellipse cx="350" cy="50" rx="100" ry="50" fill="green"></ellipse>
rxが横の長さ、ryが縦の長さpolygon
多角形
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#4C3237" points="128.25,26 147.19,96.69 95.44,148.44 24.75,129.5 5.81,58.81 57.56,7.06 "/>
塗りつぶしルールとクリップ(くり抜き)ルールを設定するが詳細は調べていない。x1,y1 x2,y2 ... xn,yn
というふうにpointsを指定する。
polylineとの違いは始点と終点が繋がるかどうか。
path
複雑な形状
塗りつぶしを無効にすれば曲線も書ける
ベジェ曲線もいけるので理論上これだけで事足りるはず。
<path d="M 300,300 C 340,300 310,350 350,350" stroke="#000" fill="transparent"></path>
M x,y x,yへ移動。最初に必要。L x,y 線を引く。
H x 水平方向に線を引く。
V y 垂直方向に線を引く。
S x1,y1 x,y 二次ベジェ曲線。制御点が1つ。
C x1,y1 x2,y2 x,y 三次ベジェ曲線。制御点が2つ。
Z パスを閉じる。始点と終点が繋げられる。
命令（アルファベット）を指定した後は別の命令を指定するまでその命令になる。
上記例だと
300,300 へ移動した後340,300と310,350を制御点に350,350へ三次ベジェ曲線を引く。
stroke
アウトラインの色stroke-width="n"
でアウトラインが引かれる
fill
塗りつぶし方法blackなどの名前で指定できる。
text
テキスト
path上に配置したりも出来るらしい。
アニメーション
図形タグ内にanimateタグを入れることでアニメーションできる。
cssアニメーションを適用する方法もある（がIE11が対応していない）
<circle cx=400 cy=400 r=20>
<animate attributeName="cx" from="-30" to="400" dur="4s" repeatCount="indefinite" />
<animate attributeName="cy" from="-30" to="400" dur="8s" repeatCount="indefinite" />
</circle>
attributeNameがアニメーション対象rectだとx,yを指定する。また初期値(今回はcx,cy)は恐らく無視される。
fromが開始位置,toが終了位置。
durがアニメーションスピード
repeatCountがリピート回数、indefiniteが無限。
同じattributeNameは指定できないのでそれほど複雑なアニメーションはできないかも。
aタグで図形を囲むことでリンクを張ることもできる。
参考
http://www.tohoho-web.com/ex/svg.html
https://web-designer.cman.jp/html_ref/abc_list/svg/
http://www.atmarkit.co.jp/ait/articles/1206/01/news143.html
