SVGのpathのコマンド

曲線は入れてない。

• M, m ：moveTo x,y 注意： M, mコマンドの後ろに座標を連ねた場合はLコマンドとして扱われる．
• L, l ：lineTo x,y
• V, v ：vertical x
• H, h ：horizontal y
• Z, z : endPath

pathの属性は：

• stroke="noneか色" ： 描画線の色。noneだと何もしない。
• stroke-width="寸法" ： 描画線の幅、幅のセンターが概念的な境界線
• fill="noneか色" ： 内部を塗りつぶす。noneだと何もしない。

事例：

<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"
  width="200" height="100" 
  viewBox="0 0 400 200" 
  style="background-color: lightpink"
>
  <rect x="10" y="10" width="100" height="100" fill="blue" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"
  width="200" height="100" 
  viewBox="0 0 400 200" 
  style="background-color: lightblue"
>
  <defs>
    <symbol id="circ" viewBox="0 0 200 200">
      <circle  r="30" cx="50" cy="100" />
    </symbol>
 </defs>
  <use xlink:href="#circ" x="20" y="50" fill="red" fill-opacity="0.5" />
</svg>