SVG 介紹

<path d="M 0 0 L 100 0 L 100 100 L 0 50 Z" />

The d (for data, clever) attribute is a list of commands:

M 0 0 will Move to the (x,y) point (0,0)
L 100 0 will draw a Line to (100, 0)
L 100 100 connects the Line to (100, 100)
L 0 50 connects to (0, 50)
Z connects line back to the first point

完整語法

<html>
  <svg
    width="5cm"
    height="4cm"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
  >
    <path d="M 0 0 L 100 0 L 100 100 L 0 50 Z" />
  </svg>
</html>

參考資料