Edit in JSFiddle

<svg height="300" width="700">
  <line x1="30" y1="30" x2="200" y2="200" style="stroke:red;stroke-width:2" />
  <line x1="10" y1="100" x2="300" y2="50" style="stroke:black;stroke-width:2" />
  <text x="20" y="20" fill="red">x1, y1</text>
  <text x="190" y="220" fill="red">x2, y2</text>
  <text x="0" y="120" fill="black">x3, y3</text>
  <text x="290" y="40" fill="black">x4, y4</text>
  <text x="100" y="95" fill="green">x, y</text>
  
  <circle cx="30" cy="30" r="5" fill="red" />
  <circle cx="200" cy="200" r="5" fill="red" />
  <circle cx="10" cy="100" r="5" fill="black" />
  <circle cx="300" cy="50" r="5" fill="black" />
</svg>