<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="30" font-size="14">Basic Markers</text>
  <path fill="none" stroke="black" stroke-width="16" d="M 130 40 L 180 40 L 180 90"/>
  <g transform="translate(114,24)">
    <rect width="32" height="32" fill="purple" stroke="none"/>
  </g>
  <g transform="translate(164,24)">
    <rect width="32" height="32" fill="purple" stroke="none"/>
  </g>
  <g transform="translate(164,74)">
    <rect width="32" height="32" fill="purple" stroke="none"/>
  </g>

  <text x="10" y="115" font-size="14">Start, Middle and End</text>
  <path fill="none" stroke="black" stroke-width="16" d="M 130 135 L 180 135 L 180 185"/>
  <g transform="translate(114,119)">
    <rect width="32" height="32" fill="purple" stroke="none"/>
  </g>
  <g transform="translate(180,135)">
    <circle r="16" fill="green" stroke="none"/>
  </g>
  <g transform="translate(164,169)">
    <path d="M 16 0 L 32 32 L 0 32 Z" fill="blue" stroke="none"/>
  </g>

  <text x="10" y="210" font-size="14">Automatic Orientation</text>
  <path fill="none" stroke="black" stroke-width="16" d="M 130 230 L 180 230 L 180 280"/>
  <g transform="translate(130,230) rotate(0)">
    <path d="M 0 -16 L 16 16 L -16 16 Z" fill="blue" stroke="none"/>
  </g>
  <g transform="translate(180,230) rotate(45)">
    <path d="M 0 -16 L 16 16 L -16 16 Z" fill="blue" stroke="none"/>
  </g>
  <g transform="translate(180,280) rotate(90)">
    <path d="M 0 -16 L 16 16 L -16 16 Z" fill="blue" stroke="none"/>
  </g>
</svg>