<svg width="100px" height="100px">

  <path d="M10 10 H 90 V 90 H 10 L 10 10"/>
   <!-- 利用Z命令，效果与上一句相同 -->
  <path d="M10 10 H 90 V 90 H 10 Z"/>

  <!-- Points -->
  <circle cx="10" cy="10" r="2" fill="red"/>
  <circle cx="90" cy="90" r="2" fill="red"/>
  <circle cx="90" cy="10" r="2" fill="red"/>
  <circle cx="10" cy="90" r="2" fill="red"/>
</svg>
<!-- 多边形 -->
<svg width='500' height='500' style="border:1px solid #cd0000;margin: 100px">
  <polygon points="20 30,50 60,350 100" fill="red" stroke="blue" stroke-width="2"></polygon>
</svg>
<!-- 折线 -->
<svg width='500' height='500' style="border:1px solid #cd0000;margin: 100px">
<polyline fill="none" stroke="blue" stroke-width="10"
         points="50 50,400 20,300 200," />
</svg>
<!-- 直线 -->
<svg width='500' height='500' style="border:1px solid #cd0000;margin: 100px">
  <g stroke="green">
    <line x1="100" y1="300" x2="400" y2="480" stroke-width="3"></line>
  </g>
</svg>