SVG - Draw Arrow

SVG 

Sample 1

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -100 200 200">
<defs>
  <marker id='mid' orient="auto"
    markerWidth='2' markerHeight='4'
    refX='0.1' refY='1'>
    <!-- triangle pointing right (+x) -->
    <path d='M0,0 V2 L1,1 Z' fill="orange"/>
  </marker>
  <marker id='head' orient="auto"
    markerWidth='2' markerHeight='4'
    refX='0.1' refY='2'>
    <!-- triangle pointing right (+x) -->
    <path d='M0,0 V4 L2,2 Z' fill="red"/>
  </marker>
</defs>

<path
  id='arrow-line'
  marker-mid='url(#mid)'
  marker-end='url(#head)'
  stroke-width='5'
  fill='none' stroke='black'  
  d='M0,0 L20,20 C40,40 40,40 60,20 L80,0'
  />
</svg>

Result

Sample 2

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
 <defs>
  <marker id="Triangle" viewBox="0 0 20 20" refX="0" refY="10" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
   <path d="M 0 0 L 20 10 L 0 20 z"/>
  </marker>
  <marker id="Circle" viewBox="0 0 10 10" refX="4" refY="10" markerUnits="strokeWidth" markerWidth="6" markerHeight="6" orient="auto">
   <circle cx="5" cy="5"  r="3" fill="black"/>
  </marker>
  <marker id="Rect" viewBox="0 0 20 20" refX="0" refY="10" markerUnits="strokeWidth" markerWidth="10" markerHeight="10" orient="auto">
   <rect width="10" height="10" fill="grey"/>
  </marker>
 </defs>
 
 <line x1="10" y1="10" x2="100" y2="10" stroke="black" stroke-width="1" marker-end="url(#Triangle)" marker-start="url(#Circle)"/>
 <path d="M 10 20 100 20 A 20 30 0 0 1 120 50 L 120 110" marker-end="url(#Triangle)" marker-mid="url(#Rect)" fill="none" stroke="black"/>
 </svg> 

Result

 
Reference: http://stackoverflow.com/questions/11808860/arrow-triangles-on-my-svg-line